<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
 
<div id="chart1" style="width:450px;height:300px;border:1px solid #A4BED4;"></div>
 
<script>
var data = [{
    sales: "3.0",
    sales1: "3.4",
    sales2: "1.2",
    sales3: "6.9",
    year: "2000"
}, {
    sales: "5.0",
    sales1: "5.0",
    sales2: "5.0",
    sales3: "5.0",
    year: "2001"
}, {
    sales: "3.4",
    sales1: "4.7",
    sales2: "1.9",
    sales3: "5.5",
    year: "2002"
}];
function init() {
    var barChart1 = new dhtmlXChart({
        view: "stackedBar",
        container: "chart1",
        value: "#sales#",
        label: "#sales#",
        width: 60,
        tooltip: {
            template: "#sales#";
        },
        xAxis: {
            title: "Sales per year",
            template: "#year#";
        },
        yAxis: {
            title: "Sales,million";
        },
        gradient: "3d",
        //border:false,
        color: "#66cc33",
        legend: {
            values: [{
                text: "department A",
                color: "#66cc33"
            }, {
                text: "department B",
                color: "#ff9933"
            }, {
                text: "department C",
                color: "#ffff99"
            }, {
                text: "department D",
                color: "#66ffcc"
            }],
            valign: "top",
            align: "right",
            width: 120,
            layout: "y",
            marker: {
                width: 15,
                type: "round";
            }
        }
    });
    barChart1.addSeries({
        value: "#sales1#",
        color: "#ff9933",
        label: "#sales1#",
        tooltip: {
            template: "#sales1#";
        }
    });
    barChart1.addSeries({
        value: "#sales2#",
        color: "#ffff99",
        label: "#sales2#",
        tooltip: {
            template: "#sales2#";
        }
    });
    barChart1.addSeries({
        value: "#sales3#",
        color: "#66ffcc",
        label: "#sales3#",
        tooltip: {
            template: "#sales3#";
        }
    });
    barChart1.parse(data, "json");
}</script>