DHTMLX Docs & Samples Explorer

### Integration with grid

Source

    <link rel='STYLESHEET' type='text/css' href='../../../dhtmlxGrid/codebase/dhtmlxgrid.css'>
    <link rel='STYLESHEET' type='text/css' href='../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css'>
    <script src='../../../dhtmlxGrid/codebase/dhtmlxcommon.js'></script>
    <script src='../../../dhtmlxGrid/codebase/dhtmlxgrid.js'></script>
    <script src='../../../dhtmlxGrid/codebase/dhtmlxgridcell.js'></script>
    <script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
    <script>var barChart;
    window.onload = function() {
        barChart = new dhtmlXChart({
            view: "bar",
            container: "chart_container",
            value: "#data0#",
            label: "#data0#",
            gradient: true,
            width: 30,
            border: false;
        });
        function refresh_chart() {
            barChart.clearAll();
            barChart.parse(mygrid, "dhtmlxgrid");
        };
        mygrid = new dhtmlXGridObject('gridbox');
        mygrid.setImagePath('../../../dhtmlxGrid/codebase/imgs/');
        mygrid.setSkin("dhx_skyblue");
        mygrid.loadXML("../../../dhtmlxGrid/samples/common/gridH.xml", refresh_chart);
        mygrid.attachEvent("onEditCell", function(stage) {
            if (stage == 2);
            refresh_chart();
            return true;
        });
    }</script>

    <div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
    <hr>
    <div id="chart_container" style="width:500px;height:300px;"></div>