Check documentation for the latest version 6.0 of dhtmlxSuite Grid Integration DHTMLX Docs

Grid Integration

Pretty often, you may need to integrate grid with chart, i.e. show grid's data and their changes on chart.

And this article we'll devote to grid-chart integration.

chart/grid-chart_01.png

Related sample:  Integration with grid

In short, the integration is implemented through the only code line:

myChart.parse(mygrid,"dhtmlxgrid");

In detail, to perform the integration you should make the following steps:

  1. Create dhtmlxChart object;
  2. Create dhtmlxGrid object;
  3. Load data to the grid;
  4. Load data from the grid to the chart;
  5. Additionally, implement chart refreshing when data in the grid is changed;
  6. And put everything into window.onload function to ensure that our code will be performed as soon as the page finishes loading.

Step 1. Create dhtmlxChart object

var myChart =  new dhtmlXChart({
    view:"bar",//sets chart's type. In our case it's vertical bar
    color:"#66ccff", //sets color of bars
    container:"chart_container",// an html container that will contain our chart
    // sets data that chart will present. #data0# refers to the first column of the grid
    value:"#data0#", 
    label:"#data0#", // specifies chart labels
    width:30, // sets the width of bars
    origin:0, //represents positive and negative values
    yAxis:{  //sets vertical axis
        start:-1000,
        step: 500,
        end:2000    
    },
    xAxis:{ 
        template:function(){
            return ""
        } //horizontal axis without labels
    }
});

Step 2. Create dhtmlxGrid object

var mygrid = new dhtmlXGridObject('gridbox');// creates dhtmlxGrid instance
mygrid.setSkin("dhx_skyblue")// sets skin of our grid

Step 3. Load data to the grid.

// loads data to the grid from the external file gridData.xml
mygrid.load("xml/gridData.xml");

Step 4. Load data from the grid to the chart

myChart.parse(mygrid,"dhtmlxgrid")// loads grid's data to the chart

Step 5. Implement chart refreshing when data in the grid is changed

// the function is called every time data in the grid is changed
function refresh_chart(){ 
    myChart.clearAll();// clears chart dataset
    myChart.parse(mygrid,"dhtmlxgrid"); //loads new grid data to the chart
};
 
mygrid.attachEvent("onEditCell",function(stage){// fires after the editor is closed
    // specifies stage of editing. "2" means that event will fire when the editor closes
    if (stage == 2)
    refresh_chart();// calls the function defined before
    return true;
});

Step 6.Put everything into window.onload() function

//the function ensures that our code will be performed when the page's loading ends
window.onload = function(){ 
...//the code stated above
}
Back to top