<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<script src="../common/testdata.js"></script>
<style>
    #chartContainer1,#chartContainer2,#chartContainer3{
        width:400px;
        height:250px;
    }
     #cont1,#cont2,#cont3{
        margin:10px;
        display:inline-block;
    }
</style>
<script type="text/javascript">
    var chart,chart2,chart3;
    window.onload = function(){
        var baseConfig =  {
            view:"bar",
            value:"#sales#",
            yAxis:{
                start:0,
                step:10,
                end:100,
                template:function(value){
                    return (value%20?"":value);
                }
            },
            xAxis:{
                template:"'#year#"
            },
            padding:{
                left:20
            }
        };
        /*chart1*/
        var config1 = {
            container:"chartContainer1",
            preset:"column"
        };
        dhtmlx.extend(config1,baseConfig);
        chart1 =  new dhtmlXChart(config1);
        chart1.parse(dataset,"json");
         /*chart2*/
        var config2 = {
            container:"chartContainer2",
            preset:"stick"
        };
        dhtmlx.extend(config2,baseConfig);
        chart2 =  new dhtmlXChart(config2);
        chart2.parse(dataset,"json");
         /*chart3*/
         var config3 = {
            container:"chartContainer3",
            preset:"alpha"
        };
        dhtmlx.extend(config3,baseConfig);
        chart3 =  new dhtmlXChart(config3);
        chart3.parse(dataset,"json");
    };
</script>
 
<div id="cont1">
    preset: <b>"column"</b>
    <div id="chartContainer1"></div>
</div>
<div id="cont2">
    preset: <b>"stick"</b>
    <div id="chartContainer2"></div>
 </div>
<div id="cont3">
    preset: <b>"alpha"</b>
    <div id="chartContainer3"></div>
</div>