We Keep Coding

high charts starting new line from each point

I am using high charts to show energy data but i think due to some negative value high caharts starting a new line from each new point and lines not have any connection between them.
here is the picture of my results.
problem Image
you can see in the image there should be only one line.
here's my data for this.
I have 4 series's to show in graph but here i am only providing one because each line have same issue
var data={'vt':[[1588273200000, 0],[1586372400000, 245],[1586286000000, 200],[1586199600000, 7],[1586113200000, 4],[1586026800000, 1],[1585940400000, 4],[1588186800000, 40],[1585854000000, 7],[1588100400000, 30],[1588014000000, 155],[1587927600000, 38],[1587841200000, 57],[1587754800000, 35],[1587668400000, 66],[1587582000000, 68],[1587495600000, 35],[1587409200000, 40],[1587322800000, 62],[1585767600000, 8],[1587236400000, 37],[1587150000000, 44],[1587063600000, 72],[1586977200000, 13],[1586890800000, 5],[1586804400000, 58],[1586718000000, 90],[1586631600000, 41],[1586545200000, 186],[1586458800000, -498]]};
and here's how i initialize the highcharts object.
$('#'+id).highcharts({
title: {
text: titletext
},
time: {
timezone: 'Asia/Karachi'
},
chart: {
zoomType: 'x',
title: 'Meter 1'
},
xAxis: {
labels: {
formatter:function(){
return Highcharts.dateFormat("%b %e", this.value);
}
},
title: {
text: 'Date'
},
showLastLabel: true,
tickmarkPlacement: 'on',
tickPosition: 'inside',
tickWidth: 0,
tickPixelInterval: 60,
lineWidth: 2,
lineColor: 'rgba(255,205,255,0.6)',
minPadding: 0,
gridLineWidth: 0,
offset: 20,
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
endOnTick: true,
},
yAxis: {
gridLineColor: 'black',
gridLineWidth: 0,
title: {
enabled: true,
text: cap
},
labels: {
enabled: true
}
},
tooltip: {
backgroundColor: 'white',
borderColor: 'black',
shadow: true,
style: {
color: 'black',
fontSize: '12px',
padding: '8px'
},
enabled: true,
crosshairs: false,
shared: false,
snap: 30,
},
plotOptions: {
flags: {
shape: 'squarepin'
}
},
series: [
{
name: 'Total kwh',
data: data.vt
},
{
name: 'Day kwh',
data: data.dt
},
{
name: 'Peak kwh',
data: data.pt
},
{
name: 'Off Peak kwh',
data: data.opt
}
],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
y: 30,
navigation: {
enabled: true
},
adjustChartSize: true,
},
exporting: {
filename: titletext+'_'+"<?php echo $_SESSION['username']; ?>"+'_'+todayDate(),
buttons: {
contextButton: {
menuItems: ["viewFullscreen",
"separator",
"downloadJPEG",
"separator",
"downloadXLS",
]
}
}
},
credits: {
enabled: false
}
}
)

You need to provide an external graph value for z-index which will identify its position
Please go through this fiddle link with ur dataset. I have improved ur code.
So you can review it.
https://jsfiddle.net/vishalanand77/f6dnua28/32

You have unsorted data - Highcharts error #15: https://www.highcharts.com/errors/15/
You can sort it in this way:
data.vt.sort(function(a, b) {
return a[0] - b[0];
});
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4993/

Create four chart with same data different rendering(HIGHCHARTS)

Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
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')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data

Combine Highcharts and Intro.JS (or similar)

I have a lot of charts in Highcharts. Now I want to point out some interesting developments in some of these charts. This can be done with Intro.JS, for example.
How can I implement this library or something similar inside my Highcharts? An example of a Highcharts chart here.
chart = new Highcharts.Chart({
exporting: {
enabled: false
},
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 20
},
title: {
text: 'Kortetermijnraming CPB'
},
subtitle: {
text: 'Werkloosheid stijgt tot 6%'
},
xAxis: {
max: Date.UTC(2000,1,0),
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%Y',
year: '%Y'
}
},
yAxis: {
min: 0,
title: {
text: 'Werkloosheid (%)'
},
plotLines: [{
value: 0,
width: 2,
color: '#000000',
zIndex: 5
}, {
label: {
text: 'Werkloosheid',
x: 0,
align: 'right'
},
value: 6,
width: 0.5,
color: '#ffffff',
zIndex: 1
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'<br/>'+
Highcharts.dateFormat('%Y', this.x) +':</b> '+ this.y +'%';
}
},
plotOptions: {
series: {
animation: {
duration: 5000
}
},
spline: {
lineWidth: 3,
states: {
hover: {
lineWidth: 4
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 4,
lineWidth: 1
}
}
}
}
},
legend: {
enabled: false
});
});

highcharts: epoch time not properly connected to Xaxis

When i have inconsistent data coming in (when for example the server that gathers the data is down) highcharts does not plot the X correctly.
It still plots like there is data on the X while there is not.
It should afcouse plot the correct hour when there actually is data.
Here is the fiddle: http://jsfiddle.net/ZVwFK/
Data variable is inconsistant!
Can someone show me how i can correct this error?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline',
margin: [50,130,90,100]
},
title: {
text: 'Weather Today'
},
credits: {
enabled: false
},
subtitle: {
text: 'test'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: [{
title: {
text: 'Temperature C'
},
opposite: false,
minorGridLineWidth: 0
}, {
title: {
text: 'Humidity %'
},
minorGridLineWidth: 0,
opposite: true
}, {
opposite: true,
title: {
text: 'Air Pressure hPa',
minorGridLineWidth: 0,
},
}],
tooltip: {
formatter: function() {
if(this.series.name === 'Temperature')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' C';
}
if(this.series.name === 'Humidity')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' %';
}
if(this.series.name === 'Air Pressure')
{
return ''+ Highcharts.dateFormat('%H:%M',this.x) +': '+ this.y + ' hPa';
}
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
}
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'spline',
/* yAxis: 0, */
shadow: true,
showInLegend: true,
pointInterval: 60 * 1000,
/* pointStart: Date.UTC(2006, 0, 1),*/
dashStyle: 'solid',
marker: {
enabled: false
}
} , {
name: 'Humidity',
data: hum,
yAxis: 1,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'dot',
marker: {
enabled: false
}
}, {
name: 'Air Pressure',
data: bar,
yAxis: 2,
shadow: false,
showInLegend: true,
pointInterval: 60 * 1000,
type: 'line',
dashStyle: 'shortdot',
marker: {
enabled: false
}
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});

There are two ways of specifying time data for Highcharts and I think you are using the wrong way for the problem. It's the second style you should use when having gaps in the data.
A compact array without gaps only containing the values for each time-point
data: [2, 5, 3, 6, 1]
Then you specify the time-point for the first measure together with the interval. eg:
pointStart: Date.UTC(2013,1,12), // start point in milliseconds
pointInterval: 3600 // interval in milliseconds
You cannot have different length between the time-points this way.
A two dimensional array with both time-points and measure
data: [[Date.UTC(2013,1,12), 2],
[Date.UTC(2013,1,12), 5],
[Date.UTC(2013,1,12), 3],
...]
This way of specifying the array can have gaps where there's no data.
See the reference here
and example here.

Highchart crashing with multiple Y axis

My highchart crashes chrome, when i add the 2nd serie.
Cannot see Chrome console to debug.. :(
Does anyone have an idea?
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
margin: [40,10,60,80],
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%H:%M'
},
tickInterval: 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
/* gridLineWidth: 0, */
/* alternateGridColor: null */
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%H:%M', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 3
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 3,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Temperature',
data: temp,
type: 'line',
showInLegend: false,
pointInterval: 60 * 1000,
pointStart: Date.UTC(2006, 0, 1),
marker: {
enabled: false
},
dashStyle: 'solid',
yAxis: 0,
xAxis: 0,
} , {
name: 'Humdity',
data: hum,
yAxis: 1,
xAxis: 0,
showInLegend: false,
type: 'line',
}],
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});

You only have one yAxis, so it breaks because you set the second serie to display into the second one( yes, that's what yAxis: 1 means ).
Remove it or create the second yAxis.
Update:
Use yAxis: 0 the reffer the first and 1 to the second.
Missing , after } on line 36 of jsfiddle.
Store data before.
Demo