Highcharts Demo

author(s): Torstein Hønsi

by Sillvva

HTML

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

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

SCSS

#reporting {
    .series {
        background: #4a4a4a;
        color: #ffffff;
        padding: 10px;
        margin-bottom: 10px;
        cursor: pointer;
        font-family: sans-serif;
        &:hover {
            background: #6a6a6a;
        }
        .series-value {
            float: right;
        }
    }
}

JavaScript

var $report = $('#reporting');

var series = [
	{name: 'an1', color: '#ff0000'}, 
    {name: 'an2', color: '#008000'},
    {name: 'an3', color: '#0000ff'}
];
var timestamps = [
	new Date('04/30/2018').getTime(),
    new Date('05/07/2018').getTime(),
    new Date('05/14/2018').getTime(),
    new Date('05/21/2018').getTime()
];
var data = [];

for(var j in timestamps) {
	timestamps[j] -= getUTCOffset(timestamps[j], true);
}

$('#reporting').html('<div class="series-seldate"></div>');

for (var i in series) {
    var s = {
        name: series[i].name,
        color: series[i].color,
        data: []
    };
    for (var j in timestamps) {
        s.data.push([timestamps[j], Math.floor(Math.random() * 150)]);
    }
    data.push(s);
    
    $('#reporting').append('<div id="series-'+series[i].name+'" class="series" style="background: '+series[i].color+';">'+series[i].name+' <span class="series-value"></span></div>')
}

Highcharts.chart('container', {

    title: {
        text: ''
    },
    credits: {
        enabled: false
    },
    plotOptions: {
        series: {
        	marker: {
            	enabled: false,
                states: {
                	hover: {
                    	enabled: false
                    }
                }
            },
            point: {
                events: {
                    mouseOver: function() {
                    	var chart = this.series.chart;
                        chart.setTitle({ text: new Date(this.x + getUTCOffset(this.x, true)).toLocaleString().replace(', 12:00:00 AM',''), floating: true });
                        for (var i in chart.series) {
                        	var item = chart.series[i];
                            $('#series-'+item.name+' .series-value').html(item.data[timestamps.indexOf(this.x)].y);
                        }
                    },
                    mouseOut: function() {
                    	var chart = this.series.chart;
                        chart.setTitle({text: ''});
     ...