High Charts New

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: '#000',
            align: 'left'

        },
        title: {
            text: 'CPM, IMPS, SPEND, etc'
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            verticalAlign: 'top',
            x: 150,
            y: 100,
            floating: true,
            borderWidth: 1,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        xAxis: {
            allowDecimals: false,
            labels: {
                formatter: function () {
                    return 'Week ' + this.value; // clean, unformatted number for year
                }
            },

            max: 7,
            tickWidth: 0
        },
        yAxis: {
            title: {
                text: 'No title required'
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 0
            },

            series: {

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

                            console.log(res);
                            var chart = Highcharts.charts[0];

                            //var first_set = this.getSpecificData(res);
                            data = [];
                            for (var i = 0; i < chart.series.length; i++) {

                                for (var j = 0; j < chart.series[i].points.length; j++) {
                                    if (j == res) {
                                        //console.log(chart.series[i].points[j].y);
                                        data.push(chart.series[i].points[j].y)
            ...