<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>
<script type="text/javascript">
var chart;
window.onload = function(){
    drawChart("plot");
};
function drawChart(preset){
    chart =  new dhtmlXChart({
        view:"line",
        container:"chartContainer",
        value:"#sales#",
        yAxis:{
            start:0,
            step:10,
            end:100,
            template:function(value){
                return (value%20?"":value);
            }
        },
        xAxis:{
            template:"'#year#"
        },
        preset: preset
    });
    chart.parse(dataset,"json");
}
function applyPreset(){
    var preset = document.getElementById("preset").value;
    chart.destructor();
    drawChart(preset);
}
</script>
 
   <div style="padding: 5px;">
    <b>Preset:</b>
    <select id="preset" onchange="applyPreset()">
        <option value="plot" selected>plot</option>
        <option value="diamond">diamond</option>
        <option value="simple">simple</option>
    </select>
</div>
<div id="chartContainer" style="width:550px;height:250px;border:1px solid #A4BED4;"></div>