Develop Reference

Multiple axis does not work on Highcharts 4

I have a function that adds another axis and serie to chart dynamically. It used to work well in Highcharts 3. Then i upgraded to Highcharts 4, but it adds axis but does not add serie.
chart.addAxis({ // Secondary yAxis
id: tempId,
title: {
text: tempName
},
lineWidth: 2,
lineColor: serie.color,
opposite: opposition
});
var lbl = getLabelStatus_<?=$id?>(id);
chart.addSeries({
name: tempName,
type: serie.type,
color: serie.color,
yAxis: tempId,
data: serie.data,
dashStyle: serie.options.dashStyle,
dataLabels: {
enabled: lbl,
rotation: serie.options.dataLabels.rotation
}
});
Did they change something about axis in v4? How can i solve this problem?

Try ;
data : serie.options.data,

Formatting axis label in high chart using dynamic values

I am using high chart to plot a graph.In x axis I am plotting integer values.i need to format the x axis label using date time which i have in data array.
this.point.mydate not working inside label formatter.
xAxis: {
tickInterval: 1,
min:1,
max:30,
allowDecimals: false,
title: {
text: 'Date'
},
labels: {
formatter: function () {
return Highcharts.dateFormat('%b-%d', this.point.mydate);
}
}
},

You have used Date in xAxis datatype , it should be datetime as follows.
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return Highcharts.dateFormat('%a %d %b', this.point.mydate);
}
}
}

Highcharts area spline values have incorrect position on y-axis

I have an area spline highchart that seems to incorrectly place data points along the y-axis. I'm using the angular-highcharts directive and delivering the chart options through my service. The data itself is correct, as are the labels, the points are just placed too high along the y-axis. See image and code below:
Service function:
function getReportingChart(quarterlyData, chartType, reportingType) {
// extract top 4 drugs
var top4 = _.sortBy(quarterlyData, 'x2q2').reverse().slice(0, 4);
var dataSeries = [];
var firstDrug = quarterlyData[0];
var seriesNumber = 0;
var quarters = ['Q1 2012', 'Q2 2012', 'Q3 2012', 'Q4 2012', 'Q1 2013', 'Q2 2013', 'Q3 2013', 'Q4 2013', 'Q1 2014', 'Q2 2014'];
_.each(top4, function (drug) {
var name = drug.A;
var dataArray = [];
dataArray.push(drug.x0q1);
dataArray.push(drug.x0q2);
dataArray.push(drug.x0q3);
dataArray.push(drug.x0q4);
dataArray.push(drug.x1q1);
dataArray.push(drug.x1q2);
dataArray.push(drug.x1q3);
dataArray.push(drug.x1q4);
dataArray.push(drug.x2q1);
dataArray.push(drug.x2q2);
var newDataSet = new buildSeries(name, dataArray, seriesNumber);
dataSeries.push(newDataSet);
console.log(newDataSet);
seriesNumber += 1;
});
return {
options: {
chart: {
type: chartType
},
plotOptions: {
series: {
stacking: 'normal'
}
},
},
series: dataSeries,
title: {
text: 'Top 4 Drugs By ' + annotateChartByType(reportingType).titleSuffix
},
credits: {
enabled: false
},
loading: false,
xAxis: {
categories: quarters,
tickmarkPlacement: 'between',
labels: {},
min: 0.5,
max: quarters.length - 1.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: annotateChartByType(reportingType).yAxis.title
},
labels: {
format: annotateChartByType(reportingType).yAxis.unitformat
}
},
size: {}
};
}
Below is the annotateChartByType function:
function annotateChartByType(params){
var defaultOption = {titleSuffix:" Primary Reports", yAxis: {title: "Number of Reports", unitformat: '{value}'}};
switch (params) {
case 'ps-cases':
return defaultOption;
case 'patients':
return {titleSuffix:" Patient Incidence Rate",yAxis: {title: "Incidence Rate", unitformat: '{value:,.2f} %'}};
case 'serious-outcomes':
return {titleSuffix:" Outcome Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
case 'serious-adverse-events':
return {titleSuffix:" Serious AE Rate", yAxis: {title: "Incidence Rate", unitformat: '{value:%.2f} %'}};
default:
return defaultOption;
}
}

This is because you have:
plotOptions: {
series: {
stacking: 'normal'
}
}
This means that the value you are seeing is indeed correct for the blue series, but it is stacked upon three other series, which makes it go higher on the y-axis. If this is unintentional just remove this code.
If it is intentional you can get the total instead of the series value using the total value in a formatter or pointFormat. See this pointFormat example:
tooltip: {
pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}: <b>{point.y}</b> ({point.total})<br/>'
}
See this JSFiddle demonstration. This is the default with the parenthesis added to show the total.

Correctly plot time series in Highcharts/Highstock

I have large collection of data in the format [1421065200000, 1.72], where the first parameter is time in milliseconds and the second parameter is the value at that specific time. I have data array consisting of such data in large size. Now I want scrollable graph containing plot of such time and value data. Here is my javascript implementation to do so,
var dataArray; //This contains my data array i.e. ([[t1, v1],[t2, v2],...])
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
var chartOption = {
chart: {
type: graphType,
renderTo: 'graph-container',
zoomType: 'x',
useUTC: false
},
title: {
text: 'Data from last 24 hours'
},
credits : {
enabled: false
},
xAxis: {
title: {
text: null
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
allowDecimals: false,
ordinal: false,
min: minDate,
max: maxDate
},
yAxis: {
title: {
text: null
}
},
plotOptions: {
series: {
pointStart: minDate,
pointInterval: 5 * 60 *1000
}
},
series: [{
name: parameterName,
data: dataArray
}],
exporting: {
enabled: false
}
};
parameterChart = new Highcharts.Chart(chartOption);
}
The chart shows incorrect data, the time value on x-axis doesn't match the value at y-axis. What is the most correct and efficient to show such time series. Should I use Highcharts or Highstock. Please guide me through this, with suggestion or maybe with solution.

What I did was, I used HighStock instead of HighCharts (since I needed scrollbar along x-axis for large collection of data). I was passing the date in my local time zone format, whereas the chart was using UTC. So, I disabled the use of UTC (alternative: I could have provided data in UTC and drawn the graph using the same, In my case I needed my local labels). I gave the minimum and maximum range to the x-axis through x-axis min and max configuration. Here is the sample of my code,
//dataArray contains the array of data [[x1, y1], [x2, y2], ...]
//x is Date, y is temperature value (say)
var minDate = dataArray[0][0];
var maxDate = dataArray[dataArray.length - 1][0];
//Disable use of UTC
Highcharts.setOptions({
global: {
useUTC: false
}
});
//Create graph options
var chartOption = {
chart: {
type: graphType, //line, bar, column, etc
renderTo: 'graph-container', //div where my graph will be drawn
zoomType: 'x' //Making x-axis zoomable/scrollable
},
title: {
text: 'Data from last 6 hours'
},
subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
xAxis: {
title: {
text: null
},
type: 'datetime', //For time series, x-axis labels will be time
labels: {
//You can format the label according to your need
format: '{value:%H:%m}'
},
min: minDate,
max: maxDate,
minPadding: 0.05,
maxPadding: 0.05
},
yAxis: {
title: {
text: null
}
},
scrollbar: {
enabled: true
},
series: [{
name: "Temperature", //Name of the series
data: dataArray
}],
exporting: {
enabled: false
},
credits : {
enabled: false
}
};
//Finally create the graph
var myChart = new Highcharts.Chart(chartOption);

Highstock, Dynamically add Points, a definied time span at the beginning

I have the following issue:
I want to dynamically update a hightstock Chart with Points from Ajax Calls. For Example i use setInterval(addPoints,3000); How can i develope the code, that the highstock Charts display an definied time, e.g. 1 Minute, and the Chart beginn to draw from the Left without this "time poping and squeezing? For a testrun i tried to you predifned null points, but the interval is not fix.
var value1="valueNo1";
var value2="valueNo2";
var color1="green";
var color2="red";
$(function () {
$('#container').highcharts('StockChart',{
chart: {
type: 'spline',
zoomtype: 'z'
},
title: {
text: 'Live random data'
},
navigator: {
top: 500
},
legend: {
enabled: true
},
rangeSelector: {
buttons: [{
count: 30,
type: 'second',
text: '30s'
}, {
count: 1,
type: 'minute',
text: '1M'
}, {
count: 2,
type: 'minute',
text: '2M'
}, {
count: 5,
type: 'minute',
text: '5M'
}, {
type: 'all',
text: 'All'
}],
inputEnabled: false,
selected: 1
},
xAxis: {
type: 'datetime'
}
});
});
var chart = $('#container').highcharts();
var ct = (new Date()).getTime();
// addAxis
chart.addAxis({ labels: { format: '{value}' , style: {color: color1 } }, title: { text: value1 , style: {color: color1} } , lineColor: color1, lineWidth: 0, opposite:true } );
chart.addAxis({ labels: { format: '{value}', style: {color: color2 } }, title: { text: value2 , style: {color: color2} } , lineColor: color2, lineWidth: 0 } );
// addSeries
chart.addSeries({ "name": "value1","data": [], yAxis: 2, marker: {enabled:true, radius: 5 }});
// addPoint
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time+64000, null], false);
addPoints = function(){
var current_time = (new Date()).getTime();
chart.series[0].addPoint([current_time, Math.random()*10], false);
chart.redraw();
}
setInterval(addPoints,3000);
Please see jsFiddle demo of the issue :
http://jsfiddle.net/ehonk/FLzRH/1/
Please help

The "popping" is the data being added and the line connecting the last point to the new point and the yAxis re-scaling. To minimize this I would set the yAxis.max to a value that is the maximum possible. Secondly I would look at the animation and see which kind you want to use when it adds a new point.
To handle the "sqeezing" you can set your "viewable" range and your adding of points such that when you add a new point the last point on the left falls out of the viewable area.

You can also call setExtremes to set range on the xAxis.