We Keep Coding

Issue with Highcharts spline not correctly positioned

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 :)

Pass 3 values in highcharts series

I have a scatter chart from Highcharts, in the y axis i put 'Intensity' values,and in the x axis i have datetimes (month,day,year).
chart: {
type: 'scatter',
zoomType: 'xy',
renderTo: 'chartContainer'
},
rangeSelector: {
enabled: true
},
xAxis: {
title: {
enabled: true
},
type: 'datetime',
dateTimeLabelFormats:{
month: '%e. %b %Y',
year: '%b'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Intensity'
},
min: 0,
max: 100
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
events: {
click: function(event) {
showMoreData();
}
}
}
},
series: [{
name: 'Male',
color: 'rgba(144,36,58, .8)',
data: getDataParsed()
}]
These data are loaded from another function getDataParsed(), where I do a ajax GET and get multiple data . The question is how i pass more data (also Intensity and Datetimes) so i can used later in the scatter chart.
function getDataParsed() {
var serie = [];
var i=0;
dolorCollect.forEach(function (dato) {
var arr = dato.FECHA_INICIO.split("/");
var hour = dato.HORA_INICIO.split(":");
serie[i]= [Date.UTC(arr[2],arr[1]-1,arr[0],hour[0],hour[1]),dato.INTENSIDAD_DOLOR];
i++;
});
return serie;
}

To have more data in each data point in series' data you can:
do as Rahul Sharma suggested in his comment - set data point as object with named properties. More info in API - see 3rd way of data format:
An array of objects with named values. The objects are point configuration objects as seen below. If the total number of data points exceeds the series' turboThreshold, this option is not available.
data: [{
x: 1,
y: 2,
name: "Point2",
color: "#00FF00"
}, {
x: 1,
y: 4,
name: "Point1",
color: "#FF00FF"
}]
or set data as array of arrays - as you do now, but with more data in point array. To allow Highcharts proper way to decode your new format set keys.
So same data can be set using code like:
series:[{
data: [
[1, 2, "Point2", "#00FF00"],
[1, 4, "Point1", "#FF00FF"]
],
keys: ['x','y','name','color'],
...

Not able to correctly plot x-axis in HighChart

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.

Highcharts : Single point in x-axis of datetime type shows 00:00:00:0000

I render a chart using highcharts the x-axis is of 'datetime' type . When I have single point in the chart the x-axis label is shown as 00:00:00:0000 instead of ('18 Nov') the given date value.
This seems to happen in highcharts version 3.0.1 where as not in 3.0.7
I did found an issue here https://github.com/highslide-software/highcharts.com/issues/1572
But in case of datetime type for x-axis how can I fix this?
Is there any workaround without upgrading to latest version because that would involve verifying all other charts, which is not possible for now in my case.
Code:
var data1 = Date.UTC(2013, 10, 18);
var a = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: false,
width: 600,
height: 400
},
plotOptions: {
series: {
marker: {
symbol: 'circle'
}
}
},
series: [{
name: 'Total Points Estimated',
data: [[data1,0]]
}],
title: {
text: 'Release Burn-Up report'
},
xAxis: {
type: 'datetime',
gridLineWidth: 1,
gridLineDashStyle: 'shortdot',
title: {
text: 'Date'
},
},
yAxis: {
gridLineDashStyle: 'shortdot',
min: 0,
title: {
text: 'Backlog Effort'
}
}
});
Fiddle link : http://jsfiddle.net/WdDqc/1/

Try to set minRange, for example to one day, otherwise Highcharts won't know what kind of label should be displayed. See docs.

Highchart tick interval

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