DHTMLX Chart

DHTMLX позволяет создавать следующие виды диаграмм: area, horizontal bar, vertical bar, stacked vertical bar, stacked horizontal bar, donut, line, pie, radar, scatter и spline.


var myChart = new dhtmlXChart({ container: "myContainerId" });
// or
var myChart = appLayout.cells("b").myChart.refresh();

myChart.refresh();

myChart.add({ name: "Steve", age: 45, profileViews: 83 });
myChart.add({ name: "John", age: 27, profileViews: 115 });
myChart.add({ name: "Ashley", age: 34, profileViews: 225 });

Метод define() позволяет менять настройки и данные диаграммы. Первый аргумент - имя свойства, а второй - значение. Некоторые настройки:
• view: (string) sets the type of chart
• container: (string) used in DOM initialization
• padding: (object, int) sets the padding of the chart
• legend: (object) creates a chart legend
• value: (string) sets the first series value
• label: (string) sets the first series label
• gradient: (function, string) sets value gradient
• x axis: (object) sets the x axis properties
• y axis: (object) sets the y axis properties

Серии данных могут быть следующих типов:
• value (the value to be compared)
• label (the label for each value)
• color (the color for that series)

myChart.define("value", "#profileViews#");
myChart.refresh();

myChart.define("label", "#name#(#profileViews#)");
myChart.refresh();

myChart.define("padding",100);
myChart.refresh();



myChart.define("view","bar");
myChart.refresh();

myChart.define("label", false);
myChart.define("padding", 50);
myChart.define("xAxis", {
 title: "Names",
 template: "#name#",
 lines: false
})
myChart.define("tooltip","Views (#profileViews#)");
myChart.refresh();


Метод addSeries() позволяет добавлять дополнительные серии данных:
myChart.addSeries({
 value: "#age#",
 color: "purple",
 tooltip: "Age (#age#)"
});
myChart.refresh();

Каждый объект данных добавленный к диаграмме имеет свой индекс и идентификатор:
var steveDataId = myChart.idByIndex(0);

Метод get() позволяет получить объект данных по идентификатору:
var steveData = myChart.get(steveDataId);

steveData.name = "Steven";
myChart.refresh();

События:
myChart.attachEvent("onItemClick", function(id){
 alert("This is data for "+myChart.get(id).name);
});

Добавим в app.js следующий код:
// Chart
var appChart;
dhtmlxEvent(window, "load", function() {
    appChart = appLayout.cells("b").attachChart({
        view: "bar",
        value: "#age#",
        label: "#age#",
        gradient: "rising",
        tooltip: {
            template: "#age#"
        },
        xAxis: {
            title: "Users",
            template: "#name#",
            lines: false
        },
        yAxis: {
            title: "Years of Age",
            lines: true
        },
        padding: {
            left: 25,
            right: 10,
            top: 45
        }
    });
    // reset chart data
    callbacks.refreshChart();
});

Также поправим callbacks:
refreshChart: function(){
 appChart.clearAll();
 appChart.parse(storage.getUserBarChart(),"json");
},

dataChanged: function(){
 callbacks.refreshGrid();
 callbacks.refreshChart();
}

Также возможно надо будет добавить в СSS в index.html строку
.dhx_chart{ z-index: 1; }
чтобы диаграмма не перекрывала всплывающее окно.


Теги: