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.

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