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,
Related
Working with tooltips in Highcharts I can see that not all type of series are included in the same tooltip. In the definition of my Highcharts object the property of tooltip look like:
tooltip: {
positioner : function (boxWidth, boxHeight, point) {
return {
x : point.plotX - 100,
y : point.plotY
};
},
shared : true
}
And how I am setting the tooltip property for each series is:
public getDefaultTooltip() {
return {
pointFormat : '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y} </b><br/>'
};
}
After read the documentation of tooltip I can see that shared property is not valid for series of type 'scatter', what is exactly the type of series that is not working for me. So, is there some workaround in order to make available all the data in the same shared tooltip?
in the example bellow I want to show all the series data in the same tooltip but the scatter serie is using a different popover. http://jsfiddle.net/rolandomartinezg/a6c4c4tv/1/
The ScatterSeries is defined in highcharts with noSharedTooltip = true. I think this is because the scatter series show both the x and y in their tooltips.
var ScatterSeries = extendClass(Series, {
type: 'scatter',
sorted: false,
requireSorting: false,
noSharedTooltip: true,
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
takeOrdinalPosition: false, // #2342
kdDimensions: 2,
kdComparer: 'distR',
drawGraph: function () {
if (this.options.lineWidth) {
Series.prototype.drawGraph.call(this);
}
}
});
To get around this, you can use a line series instead of the scatter series with the lineWidth = 0. You also need to turn off the hover state for the series to avoid the line showing up on hover.
, {
type: 'line',
name: 'Average',
lineWidth: 0,
states: {
hover: {
enabled: false
}
},
data: [3, 2.67, 3, 6.33, 3.33],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}
http://jsfiddle.net/a6c4c4tv/2/
I not only want my legend to contain series' names, I also want it to contain name of my other items like my plotline. Here is my code:
plotLines: [
{
color: 'red',
dashStyle: 'shortdash',
value: response.AverageTime,
width: 2,
label: {
text: response.PlotLineName,
x: +10,
y: +30,
rotation: 360,
color: 'red'
}
}
]
So I want my plotline's name which is "Average Velocity Deviation" looks like in the legend box like below. How can I achieve that?
You can create an empty series which mimics the characteristics of the plot line (color, dash style...). You can then optionally use the legendItemClick event to "link it up" to the plot line.
For example, you predefine these variables for ID and plot line options:
plotLineId = 'myPlotLine'; // To identify for removal
// Plot line options for adding
plotLineOptions = {
color: '#FF0000',
id: plotLineId,
width: 2,
value: 5.5,
dashStyle: 'shortdash'
};
Your axis plotline:
xAxis: {
plotLines: [ plotLineOptions ]
}
Your mimic series:
series: [
// ...
{
// Series that mimics the plot line
color: '#FF0000',
name: 'My plotline',
dashStyle: 'shortdash',
marker: {
enabled: false
},
events: {
// Event for showing/hiding plot line
legendItemClick: function(e) {
if(this.visible) {
this.chart.xAxis[0].removePlotLine(plotLineId);
}
else {
this.chart.xAxis[0].addPlotLine(plotLineOptions);
}
}
}
}
]
See this JSFiddle demonstration of how it works (or this minimal example, without events).
Just as an alternative, if you're going to go so far as to make a fake series that mimics all of the aspects of your plot line...
You can just use that series as your plotLine, and skip all of the extra work of tying everything together...
like:
{
name: 'Plot Line',
color: 'red',
type:'line',
dashStyle: 'shortdash',
lineWidth: 2,
data: [[minXvalue, plotLineValue], {x:maxXvalue, y:plotLineValue, dataLabels: { enabled: true }}]
}
Example:
http://jsfiddle.net/jlbriggs/3d3fuhbb/74/
I have implemented the following project. There are two lines on the chart.
However, I want to change position of x axis to move 0 at the center.
seriesDefaults: {
type: "scatterLine",
},
series: [{
name: "Path1",
data: stats,
markers: {
visible: false,
color: 'red'
}
}, {
name: "Path2",
data: stats2,
markers: {
visible: false
}
}],
http://jsfiddle.net/3yhbyy2g/13/
I need to customize x axis and reverse the datasource to display as follows:
Here is the solution:
All I did is to add the following lines of code:
min:-5000,
axisCrossingValue: [-5000, 0],
http://jsfiddle.net/3yhbyy2g/19/
Can you please take a look at This Demo and let me know how I can get rid of the Series 1" index!
and have actual index for the two columns or if not possible simply remove it from the chart?
I also didn't get the way that YAxis is adding Ticks to chart! Is there any way to specify the number of Ticks and Max, Min Values?
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
categories: ['Green', 'Pink']
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: 500
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
}]
});
});
You can remove the legend by adding this object to the container (right after series)
legend: {
enabled: false
}
You can set the tick interval on the yAxis like so:
yAxis: {
tickInterval: 25
}
It's all documented here: http://api.highcharts.com/highcharts
I encourage you to read it and experiment with the examples in-line.
It looks like that column grafs don't support legend. If you want remove it just write under initialize
$(function () {
$('#container').highcharts({
....
....
....
});
$('.highcharts-legend').remove();
});
It should work. :)
I have a situation where I need to predict a trend in a time series, and I have to display confidence intervals. Is there a way to plot two sets of y-values in Highcharts as linked, and shade the area between the two? Something like this:
http://www.psychosomaticmedicine.org/content/74/4/377/F2.large.jpg
I have five time series: the prediction, two time series that bound the narrower confidence interval, and two more time series that bound the wider confidence interval.
The new Beta has that feature:
see jsFiddle
You can read more about the upcoming features in this post.
Highcharts does not natively support range charts (as of version 2.2.5), but there is a workaround. You can stack two area series on top of each other, with the foremost series having a background color matching that of the chart background.
And here is example javascript (that results in this chart):
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'area'
},
title: {
text: 'Range chart emulation'
},
xAxis: {
},
yAxis: {
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
},
lineWidth: 0,
stacking: 'normal'
}
},
series: [{
// this series defines the height of the range
name: 'Range',
data: [1,2,3,5,7,8,9,6,4,7,5,3,4,7,6,5,6,7,5,4,2]
}, {
// this series defines the bottom values
name: 'Dummy',
data: [0,1,2,3,3.5,7,8.5,5,2.5,5.5,3,2,3,5.5,4,3,4,5.5,4,3.5,1.5],
enableMouseTracking: false,
showInLegend: false,
fillColor: 'rgba(255, 255, 255, 0)'
}]
});
});