Highcharts Demo 2 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/exporting.js"></script>

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

JavaScript

$.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', {
        chart: {
            zoomType: 'x'
        },
        title: {
            text: 'USD to EUR exchange rate over time'
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime',
            tickInterval: 7 * 24 * 3600 * 1000,
        },
        yAxis: {
            title: {
                text: 'Exchange rate'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2: 1
                    },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            }
        },

        series: [{
            type: 'line',
            name: 'USD to EUR',
            data:...