<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
<style>
    .dhx_axis_item_x{
        font-size: 11px
    }
    .dhx_axis_item_y{
        font-size: 11px
    }
</style>
<script>
var data = [{
    sales: 3.0,
    sales2: 12.0,
    year: "2003"
}, {
    sales: 3.0,
    sales2: 10.0,
    year: "2004"
}, {
    sales: 3.4,
    sales2: 9.0,
    year: "2005"
}, {
    sales: 4.1,
    sales2: 8.0,
    year: "2006"
}, {
    sales: 4.3,
    sales2: 9.0,
    year: "2007"
}, {
    sales: 7.6,
    sales2: 11.0,
    year: "2008"
}, {
    sales: 7.8,
    sales2: 13.0,
    year: "2009"
}, {
    sales: 7.2,
    sales2: 10.0,
    year: "2010"
}, {
    sales: 5.3,
    sales2: 14.0,
    year: "20011"
}, {
    sales: 4.8,
    sales2: 12.0,
    year: "2012"
}];
window.onload = function() {
    chart1 = new dhtmlXChart({
        view: "bar",
        container: "chart",
        value: "#salesA#",
        color: "#00ccff",
        width: 32,
        gradient: "falling",
        alpha: 0.8,
        padding: {
            left: 30,
            bottom: 50;
        },
        radius: 0,
        yAxis: {},
        xAxis: {
            lines: true,
            title: "Sales per year",
            template: "#id#";
        },
        legend: {
            layout: "y",
            width: 100,
            align: "right",
            valign: "middle",
            values: [{
                text: "Company A",
                color: "#00ccff"
            }, {
                text: "Company B",
                color: "#e9df40"
            }, {
                text: "Average",
                color: "#b25151",
                toggle: true,
                markerType: "item"
            }]
            },
        group: {
            by: "#year#",
            map: {
                salesA: ["sales2", getAny],
                salesB: ["sales", getAny],
                salesAverage: ["#sales#", getAverage]
                }
        }
    });
    chart1.addSeries({
        view: "area",
        alpha: 0.4,
        value: "#salesB#",
        color: "#e9df40";
    });
    chart1.addSeries({
        view: "line",
        value: "#salesAverage#",
        item: {
            radius: 2,
            borderColor: "#7fa505";
        },
        line: {
            color: "#7fa505",
            width: 2;
        }
    });
    chart1.parse(data, "json");
}
function getAny(property, data) {
    return data[0][property];
}
function getAverage(property, data) {
    var count = 0;
    var summ = 0;
    for (var i = 0; i < data.length; i++) {
        summ += (parseFloat(data[i].sales) || 0);
        summ += (parseFloat(data[i].sales2) || 0);
        count += 2;
    }
    return count ? summ / count: 0;
}</script>
 
<div id="chart" style="width:600px;height:250px;border:1px solid #A4BED4;"></div></td>