Highcharts Stock Demo

author(s): Torstein Hønsi

by muhaimincs

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker3.min.css">
<div id="container" style="height: 400px; min-width: 600px"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart:{
            zoomType:"xy",
            width:700
        },
        title:{
            text:"Daily Seepage Volume Plot"
        },
        subtitle:{
            text:"Batu Dam"
        },
        xAxis:{
            type:"datetime",
            id:"dt",
            ordinal:true
        },
        yAxis:[{
            id:"root-Discharge",
            opposite:false,
            startOnTick:false,
            endOnTick:false,
            title:{
                text:"Discharge (Litre/Second)"
            }
        }],
        tooltip:{
            shared:false,
            crosshairs:[false,false],
            animation:false,
            shadow:false
        },
        scrollbar:{
            enabled:true
        },
        loading:{
            labelStyle:{
                top:"45%"
            }
        },
        plotOptions:{
            spline:{
                lineWidth:1,
                events:{
                    checkboxClick: this.showSeries
                }
            },
            column:{
                borderWidth:0.01
            },
            series:{
                allowPointSelect:true,
                point:{
                    events:{
                        click: this.selSingleSeries
                    }
                },
                marker:{
                    enabled:false,
                    radius:2
                },
                connectNulls:true
            }
        },
        rangeSelector:{
            enabled:true,
            inputEnabled:true,
            inputDateFormat:"%d/%m/%Y",
            inputEditDateFormat:"%d/%m/%Y",
            inputDateParser: function (value) {
                value = value.split('/');
                console.log(value);
                return Date.UTC(
                    parseInt(value[0]),
                    parseInt(value[1]) - 1,
                    parseInt(value[2])
                );
            }		
      ...