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