Check documentation for the latest version of dhtmlxSuite Integration with dhtmlxChart DHTMLX Docs

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