I'm having a problem with Highcharts spline chart, I'm basically drawing a CPU/RAM chart, getting the values from my NAS API.
This is basically the chart.
And as you can see, this value is correct (6).
This one is not, 3 is of course lower than 6, but is displayed higher than 3.
And here you can see the 1 value, that is drawn around 24% (The RAM value).
This is the chart creation:
Highcharts.chart({
title: {
text: 'CPU and RAM'
},
chart: {
renderTo: 'cpu-memory-chart',
type: 'spline',
animation: Highcharts.svg
},
plotOptions: {
series: {
stacking: 'normal',
shadow: false,
groupPadding: 0,
pointPadding: 0.2,
animation: 1000
},
spline: {
marker: {
enabled: false
}
}
},
yAxis: {
title: '%',
max: 100,
min: 0
},
xAxis: {
type: 'datetime',
tickInterval: 1000,
labels: {
/*style: {
color: '#aaa'
}*/
enabled: false
}
},
exporting: {
enabled: false
},
colors: ['#4CAF50', '#1F80ED'],
series: [
{
name: "CPU",
pointInterval: 1000,
pointStart: (new Date()).getTime()
},
{
name: "RAM",
pointInterval: 1000,
pointStart: (new Date()).getTime()
}
]
});
}
And this is how I update points:
(note that data is the result of the API call, and cpuRamSeries is the serie of the chart)
if(points < 10){
points++;
cpuRamSeries[0].addPoint([(new Date()).getTime(), data.cpu]);
cpuRamSeries[1].addPoint([(new Date()).getTime(), data.ram]);
}else{
cpuRamSeries[0].addPoint([(new Date()).getTime(), data.cpu], false, true);
cpuRamSeries[1].addPoint([(new Date()).getTime(), data.ram], false, true);
cpuRamChart.redraw();
}
This is my first try with Highcharts so I don't really know where the problem might be. Any advice is appreciated :)
Related
I have been struggling for hours on this and can't seem to figure anything out, pulling my hair out on this one.
here is my data for the chart
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
colors: ["#FFB64D", "#FF5370"],
series: [{
name: 'series1',
data: [0.3333333333333333, 0.5, 0.6, 0.5714285714285714]
}],
xaxis: {
type: 'datetime',
categories: [1641535200, 1641621600, 1641708000, 1641794400],
},
}
var chart = new ApexCharts(
document.querySelector("#area-chart-1"),
options
);
chart.render();
Here is my chart
I can't seem to figure out why the date won't reflect correctly
I have also tried the following code, I have confirmed with a epoch calculator online that this is indeed the dates I am looking for, one time stamp a day with one value per time stamp.
var options = {
chart: {
height: 350,
type: 'area',
},
dataLabels: {
enabled: false
},
stroke: {
curve: 'smooth'
},
markers: {
size: 2,
},
colors: ["#FFB64D", "#FF5370"],
series: [{
name: 'series1',
data: [[1641513600, 0.3333333333333333], [1641600000, 0.5], [1641686400, 0.6], [1641772800, 0.5714285714285714]]
}],
xaxis: {
type: 'datetime',
},
tooltip: {
x: {
format: 'dd MMM yyyy'
}
},
}
var chart = new ApexCharts(
document.querySelector("#area-chart-1"),
options
);
chart.render();
Always good to check if you're looking for epoch or milliseconds, converted the times to * 1000 and fixed my issue.
I have multiple data coming on each day and I was wondering how to make a graph where I see the days and when I zoom in I should see the time in between the days. I am not able to do so resulting in a graph with days getting duplicated or triplicated as per the number of data points.
Before Zooming:-
After Zoom :-
I would like not to have duplicate Day names rather time in between them.
My Highcharts-ng configuration json object is as follows:-
{
options: {
chart: {
type: 'line',
zoomType: 'xy',
animation: true
},
colors:['#2C91DE','#165A8E'],
plotOptions: {
line:{
marker:{
symbol:'circle'
}
},
series: {
lineWidth: 3,
marker: {
fillColor: 'white',
lineWidth: 1,
lineColor: null,
enabled: true,
radius: 5
}
}
},
tooltip: {
shared: true,
crosshairs: true,
followPointer: true
}
},
title: {
text: ''
},
loading: false,
xAxis: {
type: 'datetime',
title: {
text: 'Date/Time'
},
dataTimeLabelFormats:{
day:'%a',
week:'%a',
},
labels: {
format: '{value:%a}'
}
},
series: [{
pointIntervalUnit: 'hourly'
}],
yAxis: {
title: {
text: ''
}
},
size: {
height: 500
}
}
I am new to highChart and even after following the documentation I am not able to correctly plot the x-axis. It only labels the the first element of the dateAndTimeArray array.Can you please tell me where I am making mistake. Here is my code.
JSON Array
var jsonObj=[ {
name:"Nov-10 18:00",
data:[50],
type:'column'
},
{
name:"Nov-20 20:00",
data:[60],
type:'column'
},
{
name:"Nov-10 22:00",
data:[70],
type:'column'
},
{
name:"Nov-12 20:00",
data:[80],
type:'column'
}]
HighChart related code
dateAndTimeArray = ['Nov-15 18:00', 'Nov-20 20:00', 'Nov-11 22:00', 'Nov-12 20:00'];
var seriesData=jsonObj;
console.log(seriesData);
$('#container').highcharts({
chart: {
zoomType: 'xy',
spacingRight: 10
},
credits: {
enabled: false
},
title: {
text: ''
},
xAxis: {
type: 'datetime',
labels: {
overflow: 'justify'
},
startOnTick: true,
showFirstLabel: true,
endOnTick: true,
showLastLabel: true,
categories: dateAndTimeArray,
tickInterval: 00,
labels: {
formatter: function() {
return this.value.toString().substring(0, 6);
},
rotation: 0.1,
align: 'left',
step: 10,
enabled: true
},
style: {
fontSize: '8px'
}
},
yAxis: {
title: {
text: 'Measurement value'
}
},
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M',
shared: true
},
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')]
]
},
lineWidth: 1,
marker: {
enabled: false
},
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
// threshold: null
}
},
series:jsonObj
});
DEMO
The chart is plotting what you asked it to. You have 4 series of data. Each series has one data point. I think you confusing the series.name and xAxis point. Since each of your series has just one point it is assigned to the first category in your xAxis.categories.
The question then becomes:
Do you want to have a categorical xAxis or a datetime xAxis?
Your data leads itself to categorical but your xAxis.categories don't line up with your series.name entries and your xAxis.categories are not in ascending time order. You also are setting a categorical list of items but telling highcharts that your chart is type: 'datetime'. You need to pick one.
Here is an example using categorical type.
Here is an example using datetime type.
I have an area chart with three series x-axis is 'datetype', when there is only data in each series the labels on x and y axis appears as expected but the plot point is missing. Can't expect a filled area for one data but even the plot point is missing.
'minRange' property is set and so the label is showing the date from the data.
Is this expected or there is a property that needs to be set to see the plot points.
fiddle link here http://jsfiddle.net/bM9j9/6/
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Area chart'
},
xAxis: {
type: 'datetime',
minRange: 864e5
},
yAxis: {
min: 0
//tickInterval: 0.5,
//minRange: 0.5
},
credits: {
enabled: false
},
plotOptions: {
area: {
stacking: 'normal',
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'Open',
data: [
[Date.UTC(2010, 0, 3), 120]
]
}, {
name: 'Closed',
data: [
[Date.UTC(2010, 0, 3), 60]
]
}, {
name: 'Accepted',
data: [
[Date.UTC(2010, 0, 3), 89]
]
}]
});
});
actually the data is rendered, But you cannot see it because the marker radius of the point is 0 in normal sate but it will be visible when your mouse hovers on it.
this is happening because you have disabled marker and have enabled hover for it.
To get the points visible turn them on.
plotOption: {
area:{
marker: {
enabled: true,
-----continue with other properties----
}
}
}
updated your fiddle here: http://jsfiddle.net/bM9j9/7/
Hope this will help you.
I cannot seem to figure out how to set my tick interval correctly.
Need to have an hourly tick on the X axis.
The data is minute based.
Javascript:
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'spline'
},
title: {
text: 'Temperature Today'
},
xAxis: {
type: "datetime",
categories: time,
dateTimeLabelFormats: {
day: '%h'
},
minTickInterval: 24 * 36000000 * 1000,
},
yAxis: {
title: {
text: 'Temperature'
},
minorGridLineWidth: 0,
gridLineWidth: 0,
alternateGridColor: null
},
tooltip: {
formatter: function() {
return ''+
Highcharts.dateFormat('%e. %b %Y, %H:00', this.x) +': '+ this.y;
}
},
plotOptions: {
spline: {
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
marker: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
},
}
},
series: [{
name: 'Asen',
data: temp
}]
,
navigation: {
menuItemStyle: {
fontSize: '6px'
}
}
});
});
});
Data arrays:
temp = [-4.39,-4.39,-4.33,-4.33,-4.33,-4.33,-4.33]
time = [1359910725000,1359910786000,1359910848000,1359910908000,1359910968000,1359911028000,1359911089000,1359911150000]
First of all, remove the 'categories' property on xAxis, this has no meaning on a datetime axis. Note that datetime axes are based on milliseconds, so an interval of one hour is expressed as 3600 * 1000. See API highcharts, tickInterval
use this config for the xAxis.
xAxis: {
type: "datetime",
dateTimeLabelFormats: {
day: '%H'
},
tickInterval: 3600 * 1000
},
See here for a working demo on JS Bin.
You should use tickInterval with value: 3600 * 1000