Highcharts Demo

author(s): Torstein Hønsi

by Roydon DSouza

HTML

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

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="reporting"></div>

CSS

#reporting {
    position: absolute; 
    top: 55px; 
    right: 20px; 
    font: 12px Arial, Verdana; 
    color: #666;
}

JavaScript

$(function () {
      $('#container').highcharts({
        chart: {
            type: 'areaspline',
			backgroundColor:'#272d31',
			 align: 'left'
			
        },
        title: {
            text: 'CPM, IMPS, SPEND, etc'
        },
		tooltip:{
			enabled:false
		},
        legend: {
			enabled:false
        },
        xAxis: {
            allowDecimals: false,
            labels: {
					useHTML: true,
                    formatter: function () {
                        return 'Week ' + parseInt(this.value+1); // clean, unformatted number for year
                    }
            },
            
            max:7,
			  tickColor: 'transparent',
                        tickWidth: 0,
        },
        yAxis: {
			gridLineWidth:0,
            title: {
                text: 'No title required'
            }
        }, credits: {
            enabled: false
        },
       	plotOptions: {
		  areaspline: {
                fillOpacity: 0.1
            },
			

            series: {
			 marker: {
                                enabled: false,
                                states: {
                                    hover: {
                                        enabled: false
                                    }
                                }
                            },
               
                point: {
                    events: {
                        mouseOver: function() { 
						var res = this.category;
						var chart = this.series.chart;
						var maxVal = 7
						
						
						//First and Last data Label no need the Mouse Over
						if(res ==0 || res== maxVal)
						{
							return false;
						}
						 $('[id^=first]').hide();
						 $('[id^=last]').hide();
						label="";
								function keysrt(key,desc) {
		  return function(a,b){
		   return desc ? (a[key] < b[key]) : (a[key] > b[key]);
		  }
		  }

		var findFixOverLap =  function(yAxis,yAxis2,seriesAxis,index)
		{
			boxHeight = 20;			
			difference = parseInt(yAxis) -...