Simon Simon - 1 year ago 78
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

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>


<script src=""></script>
<script src=""></script>


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

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

<script type="text/javascript">

$.getJSON('', function (data) {
console.log("data size is : ");

var data3 = [];

console.log(new Date(d.timestamp).getTime(), d.value);

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


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


chart: {
backgroundColor: '#000000',

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

yAxis: {
title: {
text: 'Value'
gridLineColor: 'grey',
gridLineWidth: 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


Answer Source

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.


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download