High Charts New v2

by Roydon DSouza

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- Additional files for the Highslide popup effect -->
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide-full.min.js"></script>
<script type="text/javascript" src="http://www.highcharts.com/media/com_demo/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/media/com_demo/highslide.css" />
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'areaspline',
            backgroundColor: '#272d31',
            align: 'left'

        },
        title: {
            text: 'CPM, IMPS, SPEND, etc'
        },
        tooltip: {
            enabled: false
        },
        legend: {
            enabled: false

        },
        xAxis: {
            tickInterval: 1,
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return 'Week' + '0' + parseInt(this.value+1);

                }
            },
            tickColor: 'transparent',
            tickWidth: 0,
            min: 0,
            max: 7
        },
        yAxis: {
            gridLineWidth: 0,
            title: {
                enabled: false
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {

            areaspline: {
                fillOpacity: 0.1
            },

            series: {
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                },

                point: {
                    events: {
                        mouseOver: function () {
                            //alert ('Category: '+ this.category +', value: '+ this.y);

                            var res = this.category;
                            var chart = Highcharts.charts[0];
                            data = [];
                            for (var i = 0; i < chart.series.length; i++) {
                                for (var j = 0; j < chart.series[i].points.length; j++) {
                                    if (j == res) {
                                        data.push(chart.series[i].points[j].y)
                                    }
                                }

                         ...