I'm using Highcharts to do a polar graph. When I load the page, some series aren't visible by default. The problem is when I want to show them, they appear above the others...
You can see it here : http://jsfiddle.net/kd2fs3rz/
The variable data is normaly load by Ajax when loading the page.
How can I do to have for exemple series 2 and 3 under serie 4 when I show them ?
You need to explicitly set the zIndex of each series:
var zIdx = 0; // Within the function, but outside of the while loop
chart.addSeries({
id: e.vag_id,
name: e.vag_id,
data: temp,
visible: visible,
zIndex: zIdx++ // Here
});
Updated Fiddle
Related
I have a requirement where I need to change series array completely in the chart,
I have 2 legends in my chart, I wish to load a chart with one disabled legend, that's working fine,
now when the user clicks on the disabled legend corresponding data should be added automatically to the chart,
I tried same with chart.series.addSeries(), but that is giving different issues, as the new data which is to be added is not only after the first legend but it's in between those legends
chart
For eg: chart loads, with just grey legends, orange is hidden or is not added at all, on clicking on the orange colour legend I want to add this data to that chart, Please check the chart in the image
is there any way to replace series array completely.
Something like
chart.update({
series:newSeriesArray
});
I am using the bar chart from highchart.
Thanks in advance.
I have 2 legends in my chart
Do you have a separate legend for each series or do you mean legend item for each series?
Highcharts provide a possibility to set data to particular series - series.setData() method. So when a chart is initialized you can create empty series (series with name, color etc but without data array) with property visible: false, then your series will be hidden and legend item disabled:
{
name: 'Year 2016',
data: [],
visible: false
}
When user clicks legend item plotOptions.series.events.legendItemClick function will be invoked (if defined). In this function, you can set data to this particular series using series.setData() as mentioned above:
plotOptions: {
bar: {
events: {
legendItemClick: function() {
if (!this.data.length) {
this.setData([665, 234, 2344, 123, 23])
}
}
}
}
}
Demo:
https://jsfiddle.net/wchmiel/uLfcknsb/
I could explain better if you can focus on the image attached here:
Can the hover line height be shown only up to the max line height (Please see the image below)
I do not want to show the hover values for first and last week. (I mean on hover of 'week 0', I do not want to show the hover boxes, same as for 'week 7')
Can I set the floor and ceiling for the each series data, Some thing like
series: [{
name: 'CPM',
data: [5,524,4,1,4,1,3,20,3],
color: 'rgb(87, 188, 0)'
//floor: 5,
//ceiling: 524,
},{ ....}
}]
Is there any such floor/min and max/ceil for the each data set.
Such that the other two series data gets visible in the chart. please refer this fiddle
How to show All Data Series Fiddle jsfiddle.net/4vzEt/21/
Could you show jsFiddle what is wrong? It's a little not clear for me.
In tooltip.formatter check this.x and return false when tooltip shouldn't be displayed.
Well, you can set that options, but it won't do anything.
Your image is saying something really different than 2) .. to remove that vertical line, just disable tooltip.crosshairs.
To change order of points, you need to use tooltip.formatter - sort points descending and return formatter string.
References:
tooltip.formatter
tooltip.crosshairs
I'm having an issue with the scrollbar in multiple series line chart where x-axis is date.
Looks like the max length of the scrollbar is determined by the length of the first (older) series.
Although when pressing the 'All' button in range selector I can see all of the series, as the first series ends before the others, as soon as I touch the scrollbar the chart readjusts so that all I can see is the data contained in the first series' length period.
After that, if I want to see the series after the first one has ended, I need to drag the chart or click the 'All' button in range selector again.
I would really appreciate any help you could provide.
Thanks in advance!
jsFiddle: http://jsfiddle.net/8DdP4/2/
Indeed, it's not supported to cover all series. Here you can find workarund.
With demo: http://jsfiddle.net/highcharts/SD4XN/
In short: in callback add series to the navigator on your own:
function (chart) {
chart.addSeries({
data: seriesOptions[2].data,
xAxis: 1,
yAxis: 1
});
}
The scrollbar you refer to is called navigator.
There is a property in navigator called series which is defined as:
series: Object
Options for the navigator series. Available options are the same as
any series, documented at plotOptions and series.
Unless data is explicitly defined on navigator.series, the data is
borrowed from the first series in the chart.
You can see it here.
Im not sure if you can build your navigator from multiple series, i suppose it is posibles. In case it is not build build the navigator with the largest.
I am drawing a spline graph and getting a problem where in graph shows only one point on load of graph.On the other hand if I click on range selector or horizontal scroll of graph , it displays all points of graph correctly.
I tried with different data also and graph displays correctly.
Here is a fiddle to see that
$('#container').highcharts('StockChart', {
chart: {
renderTo: 'container',
defaultSeriesType: 'spline',
zoomType: 'x'
}});
I did try to understand the data pattern and googled to find if there is any issue with highstock but no avail.
Looks like your graph doesn't get the initial range status correctly, as you may notice that 'All' range button is disabled when first load.
Declare a pre-selected option: selected:0 in rangeSelector would help (http://jsfiddle.net/MS63L/)
rangeSelector: {
selected:0,
buttons: [
.... rest part are same as your original code
You can change the integer according to your need: 0 select '5m', 1 select '15m', 2 select 'All'. As this attribute means The index of the button to appear pre-selected.
See also: http://api.highcharts.com/highstock#rangeSelector.selected
Let's say you have a line-graph with the series shown on the picture. When you toggle series on and off with EnhancedLegendRenderer, the serie toggles between hidden and visible. That is how it is supposed to be. The thing is though, that i want the series that remain visible to scale so that the serie with the highest y-value will be on top of the chart, adjusting the values on the y-axis at the same time. The bottom picture shows how it looks when i have toggled the series with the highest values to hidden.
Is there an easy, or an advanced for that matter, way to do this? I have tried to remove the serie totally from the chart, by removing it from the data, and creating a new jqplot. But then it's not visible on the legend anymore either. Also tried different approaches with chart.series[i].show = false; chart.replot(); etc, but with the same results.
There is also an undocumented renderOption that you can use that will do the same:
seriesToggleReplot: { resetAxes: true }
So my legend looks like this:
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions:{
seriesToggleReplot: { resetAxes: true }
},
placement: 'outside'
}
Did not find any real built-in solution for this, so i created my own work-around.
By setting each y-value of the chosen serie from the legend to "0", and then chart.replot(), the chart gets replotted with the remaining series values.
var j = //index of chosen serie.
for(var i = 0;i < chart.series[j].data.length ;i++)
{
chart.series[j].data[i][1] = 0
//1 is the index of the y-value.
}