<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>