Highcharts Demo Ex

author(s): Torstein Hønsi

by XcsN

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<!-- Additional files for the Highslide popup effect -->
<script src="https://www.highcharts.com/media/com_demo/js/highslide-full.min.js"></script>
<script src="https://www.highcharts.com/media/com_demo/js/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="https://www.highcharts.com/media/com_demo/css/highslide.css" />

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

.highcharts-credits{display:none;}

JavaScript

// Get the CSV and create the chart
$.getJSON('http://37.148.211.78/graphic?user_id=23', function (data) {
		data = data.obj.exchanges;
    var data1 = [], data2 = [];
    for(var x = 0, l = data.length; x <l; x++)
    {
    	 var str = data[x][2].split(' ');
       var date = str[0].split('-');
       var time = str[1].split(':');
       date = Date.UTC(date[0], date[1], date[2], time[0], time[1], time[2], 0); 
       data1.push([date, parseFloat(data[x][1])]);
       data2.push([date, parseFloat(data[x][0])]);
    }

    Highcharts.chart('container', {

        xAxis: {
            tickInterval: 360, // one week
            tickWidth: 0,
            gridLineWidth: 1,
            labels: {
                align: 'left',
                x: 3,
                y: -3
            }
        },

        yAxis: [{ // left y axis
            title: {
                text: null
            },
            labels: {
                align: 'left',
                x: 3,
                y: 16,
                format: '{value:.,0f}'
            },
            showFirstLabel: false
        }, { // right y axis
            linkedTo: 0,
            gridLineWidth: 0,
            opposite: true,
            title: {
                text: null
            },
            labels: {
                align: 'right',
                x: -3,
                y: 16,
                format: '{value:.,0f}'
            },
            showFirstLabel: false
        }],
         xAxis: {
            type: 'datetime'
        },

        legend: {
            align: 'left',
            verticalAlign: 'top',
            y: 20,
            floating: true,
            borderWidth: 0
        },

        tooltip: {
            shared: true,
            crosshairs: true
        },

        plotOptions: {
            series: {
                cursor: 'pointer',
                point: {
                    events: {
                        click: function (e) {
                            hs.htmlExpand(null,...