I'm using highcharts to create comparisons of various product features on my website. One of my primary charts has 45 series, one for each product in a particular category. On the front page of my site the chart loads with all series visible by default. However, when viewing the page of any particular product page (any of the 45 products that are visible on the chart), I would like for only that specific product's series to be visible be default, and the rest hidden.
Now, I know I can use "visible: false" to hide series, however this still seems like it would require me to have a separate highcharts chart for each of the 45 products, which seems like a waste of space / time since the only difference between those 45 charts would be the hidden/visible series. Does anyone have any idea how (and if it is possible at all) to make the visibility settings of a chart's series dependant on the page where the chart is loading?
So basically to demonstrate what I mean more clearly, suppose I have a chart with two series:
name: 'Product 1',
data: [X, Y, Z],
}, {
name: 'Product 2',
data: X, Y, Z],
Now, if we are on the product page of "Product 1", I would like for the chart to read:
name: 'Product 1',
data: [X, Y, Z],
}, {
name: 'Product 2',
data: X, Y, Z],
Visible: false
And if we are on the page of "Product 2", it should of course read:
name: 'Product 1',
data: [X, Y, Z],
Visible: false
}, {
name: 'Product 2',
data: X, Y, Z],
Only automatically of course, without me having to create a separate chart for each. I'm using Wordpress to manage my website, if that makes a difference.
Thanks!
Series visibility can be toggled dynamically using API.
toggle - http://api.highcharts.com/highcharts#Series.setVisible
show - http://api.highcharts.com/highcharts#Series.show
hide - http://api.highcharts.com/highcharts#Series.hide
Side note: Series' option is named visible, not Visible - names in JavaSCript are case-sensitive.
Related
I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis.
with this part of code in the code below
chart: {
spacingTop: 0,
paddingTop: 0,
zoomType: 'x',
},
I am getting the following charts:
https://jsfiddle.net/62jq6zsd/
But I am not getting the right result.
Putting your code into a fiddle, I can see that nothing is plotted:
http://jsfiddle.net/jlbriggs/3d3fuhbb/225/
Looking at your data, the reason is apparent. You have your data set up as;
{
x: 1483358580000,
y: 1
}
But the columnrange series type requires the data elements of low and high, with an optional/inferred x value.
In addition, you have points with null values for x, which does not work for Highcharts - there must always be an x value, whether set or inferred.
It's also unnecessary - use of null points to break a line series is needed because lines are meant to be continuous; the columnrange type already has the breaks built in.
And finally, you have your x and y mixed up - since you are inverting the chart, the axes swap places - x is the vertical axis, and y is the horizontal.
If your values are time, as in the 1483358580000 above, you need to specify two timestamps - one for the start, and one for the end of each bar segment.
Example from the Highcharts demo:
data: [
[-9.7, 9.4],
[-8.7, 6.5],
[-3.5, 9.4],
[-1.4, 19.9],
[0.0, 22.6],
[2.9, 29.5],
[9.2, 30.7],
[7.3, 26.5],
[4.4, 18.0],
[-3.1, 11.4],
[-5.2, 10.4],
[-13.5, 9.8]
]
(in this example, the x value is determined by the order of the data points, and does not need to be set explicitly. In your case, you will need to specify the x value, since you want them all on the same line)
Demo Fiddle:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/columnrange/
{{ EDIT }}
Using your chart as a base, here is an updated version.
Code (data based on yours, edited for demonstration)
xAxis: {
categories: ['', 'Woring time'],
title: {
text: null
},
gridLineWidth: 0
},
yAxis: {
type: 'datetime'
},
series: [{
data: [
[1,1483337940000,1483337950000],
[1,1483337970000,1483337990000],
[1,1483338000000,1483338010000],
[1,1483338030000,1483338070000]
]
}]
Fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/
{{ Edit again for comments }}
To reduce space between the series, you have a variety of options
1) reduce the height of your chart
2) increase the width of your bar
1/2) do both!
3) work with your axis min/max and minPadding/maxPadding settings, if you want one side of the series and not the other.
Option one, in a fiddle:
http://jsfiddle.net/jlbriggs/qdza1032/1/
Option three:
http://jsfiddle.net/jlbriggs/qdza1032/2/
I'm able to create in Excel a chart where...
The data is in a different date frequency based on the x axis
Two different chart types - line over bars
So for example, I can have a bar chart on the primary x-axis / y-axis that is aggregated by year. Then another series as a line that changes on a daily basis. What allows the line to show up as a daily time series (raw values) is the option to turn on the secondary x-axis. With this on, the two time series can work off a different date frequency.
Is this possible in highcharts? I've only been able to find examples of where it's possible to enable the secondary y-axis but both time series is in the same date frequency
Yes. The method to add a second x axis is exactly the same as it is to add a secondary y axis - you just make the changes to the xAxis properties instead of the yAxis properties, and specify the xAxis for you series instead of specifying the yAxis.
Example:
xAxis: [{
}, {
opposite: true
}]
And:
series: [{
data: [...data...]
}, {
xAxis: 1,
type: 'line',
data: [...data...]
}]
Fiddle example:
http://jsfiddle.net/jlbriggs/ko7ton0w/
I have a Highcharts instance [1] with 4 series. Two of the series are index/ratio series and two are raw value series. What I would like to do is display the raw value series points on one of the index series without converting the raw value series to 'flags'. The reason for this is that I want all my point values to be in one tooltip.
With respect to the attached jsfiddle I would like the center buy and sell points to appear on the 'Price Change' series and for the current tooltip behavior in the example to be unchanged. I want one tooltip with four values and for the buy/sell values to be their raw values instead of the 'y' value of where they are displayed.
Is that something that is doable with Highcharts/Highstock?
[1]: http://jsfiddle.net/eZL8e/
Dave
You can easily manipulate what you want to display in tooltip using pointFormat for each series. Then you can change fromat for point from [timestamp, value] to {x: timestamp, y: value, myProperty: exValue}. Simple example: http://jsfiddle.net/eZL8e/5/
For buys:
tooltip: {
pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: <b>{point.raw}</b><br/>'
},
data: [
{x: 1374555600000, raw: 21.13, y: 75},
{x: 1374642000000, raw: 20.5753, y: 85},
{x: 1374728400000, raw: 20.9367, y: 63}
]
Note: There is only one limitation for that solution, you need to disable dataGrouping, since grouped point's doesn't have custom properties like raw.
i need to create red and green area along with line series.
http://esbolsa.com/blog/wp-content/uploads/2012/12/Commodity-Channel-Index-Fortaleza.png
i am using following code, which works fine for showing red(below -100).how can i specify another threshold(+100)?
chart.addSeries({
name: name + "_series",
id: name + "_series",
type: 'area',
data: cciData,
yAxis: name + '_axis',
showInLegend: false,
color: '#2f7ed8',
negativeColor:'red',
threshold:-100
},false);
The only way I have seen to do this is to create 2 series that are identical except for the thresholds and negativeColor.
Unfortunately in Highcharts you can set only single threshold, but you can use additional serie i.e with green areas.
Simplifying my story, consider 2 series where I link their yAxes. In other words on the second yAxis there is a property linkedTo: 0
So the first yAxis is the master, hence sets extremes for both series.
However sometimes the second series has high values which are too high to be plotted in the visible area and so they get cropped.
To make matters worse, when the yAxes are linked to each other, the legend doesn't play ball: clicking on the master series name in the legend will hide both series. Clicking on the secondary series name will hide none.
Check out this JSFiddle - values on the right are cropped, legend functionality is broken.
What am I missing? How can I get both series to scale together and be all visible? How do I get the legend to work as expected? (click on series name should toggle it)
Thanks!
EDIT: As it turns out, if I remove yAxis.id (JSFiddle here) the chart and legend work as expected. However linking series to yAxis based on position in the array (I think?) instead of by some ID (string) sounds less than ideal.
Ideas?
Why you are trying assigning second series to axis which is just copy of proper one? I advice to set both series to master yAxis, and second yAxis use just as extra info on the right side of a chart.
Otherwise I don't understand the purpose of linking second axis to get THE SAME extremes as master yAxis, and then expecting to scale that yAxis according to series you have attached to that yAxis.
Something like this I think is better approach, see: http://jsfiddle.net/zYpcm/15/
series: [{
name: 'master',
data: self.masterData,
yAxis: 'master'
}, {
name: 'secondary',
data: self.secondaryData,
//yAxis: 'secondary'
}],
yAxis: [{
id: 'master'
}, {
id: 'secondary',
opposite: true,
linkedTo: 0
}]