Budget Estimation View 2

author(s): Gopinagh.R

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="margin: 0 auto"></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: 'Project wise Budget Estimation'
                    },
                    subtitle: {
                        text: 'Select area to zoom.Click Reset Zoom to reset selection'
                    },
                    
                    xAxis: {
                        categories: ['VGP resort <br/>in (USD)','Spec info city <br/>in (USD)','Balewadi <br/>in (USD)','WTC <br/>in (INR)','Vizag Homes <br/>in (INR)','Aditi farms <br/>in (INR)'] 
                            },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Amount Distribution'
                        }
                    },
                    legend: {             
                        shadow: false
                    },
                    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,
                        crosshairs: [{
                            width: 1,
                            color: 'Gray'
                        }, {
                            width: 1,
                            color: 'gray'
                        }]
                    },
                   ...