Check documentation for the latest version of dhtmlxSuite Step 4. Add a Chart DHTMLX Docs

Step 4. Add a Chart

Now, we will add a chart that will represent data that we have specified in the grid. It's going to be a vertical bar chart that will display profits or losses per a specific period. By default, profits.

To create charts on the page, the DHTMLX library provides the dhtmlxChart component.

To add a chart to the layout's cell:
  1. Call the attachChart() method to add a chart to the cell "b" of the layout:


    var chart = layout.cells("b").attachChart({
        view:"bar",                                      //defines the chart's type
        value:"#data2#",                  //data property that the chart represents 
        color:"#36abee",                            //the color of the chart's bars
        padding:{left:75, bottom:50, top:50, right:30},//padding of chart's content 
        yAxis:{start:0, step:50000, title:"Value ($)"},    //sets the vertical scale
        xAxis:{                                         //sets the horizontal scale                                  
            template:function(obj){return "<span class='quarter'>"+obj.data1+
            "</span>"+(obj.data1=="I"?" '"+obj.data0.substr(2,2):"")}
        preset:"column",                               //applies the styling preset 
        border:0                                           //disables bars' borders
  2. Call the parse method to load data from the grid to the chart:


        chart.parse(grid,"dhtmlxgrid"); });
    We will call the parse method in the 2nd parameter of the dhtmlxGrid's load method, which is a callback function. We use it to ensure that data will be completely loaded to the grid before we start to populate the chart.
    In case a chart takes data from a grid, the parse method takes 2 parameters: the dhtmlxGrid object and the value "dhtmlxgrid" (the format for grid's data).

Back to top