Budget Estimation High Level View

author(s): Gopinagh.R

by gopinaghr

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src = "http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

var chart;
$(document).ready(function() {
    var width = $(document).width() - 20;
    var height = $(document).height() - 20;
    $("#container").css("width", width);
    $("#container").css("height", height);
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            zoomType: 'xy'
        },
        title: {
            text: 'Budget Estimation'
        },
        subtitle: {
            text: 'Select area to zoom.Click Reset Zoom to reset selection'
        },
        credits: {
            enabled: true,
            position: {
                align: 'right',
                x: -10,
                verticalAlign: 'bottom',
                y: -5
            },
            href: "http://www.qualiantech.com",
            text: "Qualian Technologies Pvt Ltd"
        },
        xAxis: {
            categories: [
                'Capital',
                'Material',
                'Human Resource',
                'Equipment', 'Petty cash'
                ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Amount Distribution'
            }
        },
        legend: {
            shadow: true,
            itemHoverStyle: {
                color: '#FF0000'
            }
        },
        tooltip: {
            useHTML: true,
            headerFormat: '<small>{point.key}</small><table>',
            pointFormat: '<tr><td style="color: {series.color}">{series.name}: {point.y}</td>',
            footerFormat: '</table>',
            valueDecimals: 2
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Birla group Construction  in (INR)',
            data: [900000, 30988.85775360000, 512000, 64000, 150000]},
        {
            name: 'Marg Pushkara  in (INR)',
            data: [80000000, 293995, 903440, 635200,...