Highcharts Static MultiLine

Static MultiLine

by Nayana Das

HTML

<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

var mainjson = [{"name":"Tokyo","data":[{"x":"12-06-2016","y":7},{"x":"13-06-2016","y":14.5},{"x":"14-06-2016","y":6.2},{"x":"15-06-2016","y":4.2}]},{"name":"London","data":[{"x":"12-06-2016","y":4.5},{"x":"13-06-2016","y":8},{"x":"14-06-2016","y":7.5},{"x":"15-06-2016","y":2.4}]}];

var xaxis =[];

for(var i=0;i<mainjson.length;i++){
	var obj = mainjson[i];
  var dataarr = obj["data"];
  for(var j=0;j<dataarr.length;j++){
    if(xaxis.indexOf(dataarr[j]["x"]) != 0){
    		xaxis.push(dataarr[j]["x"]);
    }
  }
}
//alert(xaxis.includes("12-06-2016"));

var uniqueNames = [];
$.each(xaxis, function(i, el){
    if($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});

console.log(" Xaxis : "+uniqueNames);

var seriesarray=[];

for(var i=0;i<mainjson.length;i++){
	var obj = mainjson[i];
  var dataarr = obj["data"];
  var sdataarr =[];
  var sobj={};
  sobj["name"]=mainjson[i].name;
  for(var j=0;j<dataarr.length;j++){
    sdataarr.push(dataarr[j]["y"]);
  }
  sobj["data"]=sdataarr;
  
  seriesarray.push(sobj);
}

console.log(" seriesarray : "+JSON.stringify(seriesarray));

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: 'Monthly Average Temperature'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: uniqueNames
        },
        yAxis: {
            title: {
                text: 'Temperature'
            },
            labels: {
                formatter: function () {
                    return this.value + '°';
                }
            }
        },
        tooltip: {
            crosshairs: true,
            shared: true
        },
        plotOptions: {
            spline: {
                marker: {
                    radius: 4,
                    lineColor: '#666666',
                    lineWidth: 1
                }
            }
        },
        series: seriesarray
    });
});