Simon Simon - 4 months ago 13
jQuery Question

High Charts : Two lines showing instead of one

I,m working with highcharts.js

The issue is while creating a graph its showing me two lines instead of
one.

It should only show me one line because its ploting the graph between 2 values
which are (timestamp and value).

Can you please check why its showing me two lines instead of one and how can i fix this :

(Just copy and paste the code in a file and it should work).

<!DOCTYPE html>
<html>

<head>

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

</head>

<body style="background:#212224;">

<div id="container" style="max-width: 1666px; margin: 0 auto"></div>

<script type="text/javascript">

$.getJSON('https://dl.dropboxusercontent.com/u/76618626/data4.json', function (data) {
console.log("data size is : ");
console.log(data);

var data3 = [];

$.each(data.data,function(i,d){
console.log(new Date(d.timestamp).getTime(), d.value);

data3.push([new Date(d.timestamp).getTime(),d.value]);

});

console.log("Data 3 is :");
console.log(data3);
var data4 = [];
Highcharts.each(data3, function(p, i) {
if (typeof p[0] !== 'number' || typeof p[1] !== 'number') {
console.log('Invalid data is :')
console.log(p);
} else {
data4.push(p);
}
});



$('#container').highcharts({

chart: {
backgroundColor: '#000000',
},

title: {
text: 'Test Graph',
style: {
color: '#FFFFFF',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
title: {
text: 'Time Stamp'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1

},
yAxis: {
title: {
text: 'Value'
},
gridLineColor: 'grey',
gridLineWidth: 1,
lineWidth:1
},
legend: {
enabled: true
},

exporting: false,



plotOptions: {
line: {
lineColor: 'red',
fillOpacity: 1,
lineWidth: 2,
states: {
hover: {
lineWidth: 2
}
},
threshold: null,
marker: {
fillColor: '#e57255'
}


},


},


series: [{
type: 'line',
name: 'test',
data: data4
}]
});
});

</script>
</body>
</html>

Answer

I rewrote your code in jsFiddle. It is actually a single Line chart.

Check out the print out at console.log(new Date(d.timestamp).toString(), d.value);.

Your data's timestamps start from Tue Jul 05 2016 03:00:00, increase to Thu Jul 07 2016 03:00:00, and starts again from Jul 05 2016 03:00:00.

Hence this is why your chart seems like a two-line chart. The bottom part of the line is being linked back to the top line.

Just update your data JSON and you will be good.

Edited:

Update my fiddle to arrange timestamps using .sort().

Comments