<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="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js" type="text/javascript"></script>
<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<style>
    .dhx_axis_item_x{
        font-size: 11px
    }
    .dhx_axis_item_y{
        font-size: 11px
    }
</style>
<script>
var barChart;
window.onload = function() {
    barChart = new dhtmlXChart({
        view: "bar",
        color: "#66ccff",
        gradient: "3d",
        container: "chart_container",
        value: "#data0#",
        label: "#data0#",
        radius: 3,
        tooltip: {
            template: "#data0#";
        },
        width: 50,
        origin: 0,
        yAxis: {
            start: -1000,
            step: 500,
            end: 2000
        },
        group: {
            by: "#data2#",
            map: {
                data0: ["#data0#", "sum"]
                }
        },
        xAxis: {
            template: "#id#";
        },
        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.enableSmartRendering(true);
    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:170px; background-color:white;"></div>
<hr>
<div id="chart_container" style="width:600px;height:300px;"></div>