<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: "#sales#",
        label: "#sales#",
        sort: {
            by: "#sales#",
            as: "int";
        },
        group: {
            by: "#data2#",
            map: {
                author: ["#data2#"],
                sales: ["#data0#", "sum"]
                }
        },
        xAxis: {
            lines: false,
            template: "#author#";
        },
        padding: {
            left: 0,
            right: 0;
        },
        color: "#45abf5",
        gradient: "rising",
        width: 50;
    });
    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:600px;height:250px;"></div>