Column Chart with Negative

Column Chart with Negative

by chanaka1

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.dataviz.min.css">
    <div id="example" class="k-content">
    <div id="chart"></div>
</div>

CSS

.chart-wrapper, .chart-wrapper .k-chart {
        height: 300px;
    }

JavaScript

function createChart() {
        $("#chart").kendoChart({
            title: {
                text: "Site Visitors"
            },
                legend: {
                position: "bottom"
            },
            seriesDefaults: {
                type: "column",
                labels: {
                    visible: true,
                    background: "transparent",
                   
                }
            },
            series: [{
                name: "Total Visits",
                data: series1,
                gap: 1.0,
                spacing: 0
            }, {
                name: "Unique visitors",
                data: series2,
                gap: 1.0
            }],
            valueAxis: {
                min: -200000,
                max: 200000,
                axisCrossingValue: 50000,  
                line: {
                    visible: false
                },
                title: {
                    text: "Availability"
                },
               
                color: 'blue'
            },
            categoryAxis: {
                color: "blue",
               // categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
                majorGridLines: {
                    visible: true,
                    position: "bottom"
                }
            },
            tooltip: {
                visible: true,
                format: "{0}"
            }
        });
    }

var series1=[56000, 63000, 74000, 91000, 117000, 158000];
var series2= [-52000, 34000, 23000, -98000, 67000, 83000];

    $(document).ready(function () {
        createChart();

        $("#example").bind("kendo:skinChange", createChart);

        var chart = $("#chart").data("kendoChart"),
            firstSeries = chart.options.series;
    });