Integration with dhtmlxChart

Pretty often, you may need to integrate your grid with a chart, i.e. to show grid's data and their changes in a chart. And this article is devoted to the grid-chart integration.

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

myChart.parse(mygrid,"dhtmlxgrid");

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

1. Create dhtmlxChart object:

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

2. Create dhtmlxGrid object:

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

3. Load data to the grid:

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

4. Load data from the grid to the chart:

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

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

   function refresh_chart(){ // the function called every time data in grid is changed 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 if (stage == 2)//sets editing stage."2" means - event fires after editor closed refresh_chart();// calls the function defined before return true; });

6. Put all the code into window.onload() function:

   //function ensures that our code will be performed just after page loading finishes  window.onload = function(){ //put all the code stated above here }

Related sample is dhtmlxChart/samples/09_integration/01_dhtmlxgrid.html

Back to top