<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<script>
var data = [{
    sales: "3.0",
    sales1: "3.4",
    sales2: "1.2",
    sales3: "6.9",
    year: "2007"
}, {
    sales: "5.0",
    sales1: "5.0",
    sales2: "5.0",
    sales3: "5.0",
    year: "2008"
}, {
    sales: "3.4",
    sales1: "4.7",
    sales2: "1.9",
    sales3: "5.5",
    year: "2009"
}];
window.onload = function() {
    barChart = new dhtmlXChart({
        view: "stackedBarH",
        container: "chart",
        value: "#sales#",
        width: 50,
        label: "#sales#",
        gradient: "3d",
        color: "#66cc33",
        xAxis: {
            title: "Sales per year",
            lines: false;
        },
        yAxis: {
            title: "Year",
            template: "#year#";
        },
        padding: {
            left: 75
        },
        legend: {
            values: [{
                text: "department A",
                color: "#66cc33"
            }, {
                text: "department B",
                color: "#ff9933"
            }, {
                text: "department C",
                color: "#ffff66"
            }, {
                text: "department D",
                color: "#66ffcc"
            }],
            valign: "top",
            align: "left",
            width: 120,
            layout: "x",
            marker: {
                width: 15,
                type: "round";
            }
        }
    })
        barChart.addSeries({
        value: "#sales1#",
        color: "#ff9933",
        label: "#sales1#";
    });
    barChart.addSeries({
        value: "#sales2#",
        color: "#ffff66",
        label: "#sales2#";
    });
    barChart.addSeries({
        value: "#sales3#",
        color: "#66ffcc",
        label: "#sales3#";
    });
    barChart.parse(data, "json");
}</script>
 
<div id="chart" style="width:480px;height:350px;border:1px solid #A4BED4;"></div></td>