I have requirement where in need to switch between different charts using options from drop down or radio button. The chart i click must overwrite previous chart and show different chart with same data.
I have simulated similar kind of code but finding it difficult to overwrite with previous.
Here is the jsfiddle reference in my comments:
Any help appreciated.
Thanks,
Sohan
You can also use update() function, which allows to update type of serie, so data will be the same, but line can be replaced with column or other types.
http://api.highcharts.com/highcharts#Series.update()
EDIT:
$.each(chart.series,function(i,serie){
serie.update({
type:'column'
});
});
Couple of series:
http://jsfiddle.net/GGvmM
Related
normally when you create a chart that has a legend, when you click on the category of the legend, the graphic emphasizes the filter in which you clicked. I would like to know how to do this without having to click.
ie for example in my case if I click on "data1" the graph looks like this.
How can I achieve this without clicking to execute the trigger in a certain category?
Two options:
1) Use the API functionality -->
http://c3js.org/reference.html#gauge-width (API documentation starts just below this anchor)
In this case, use hide anytime after your chart is set-up
chart.hide ('data1');
http://jsfiddle.net/wn3vzn0k/1900/
2) Direct in the configuration
data: {
...
hide: ['data1'],
}
but it seems buggy e.g. I still see a blue bar in this example -->
http://jsfiddle.net/wn3vzn0k/1899/
I currently have a chart which I place in my page by calling
function myChart(aParameter) {
// here is some code which queries data based on aParameter
// and sets a variable later used for series: [...] in the chart below
$("#mychartid").highcharts({...})
}
This function is then called when a choice on some radio buttons is done:
$('#productselect input[type=radio]').change(function(){
myChart($(this).val())
})
It works fine, but is not effective: the complete redrawing of the chart moves the page and I need to scroll back on the chart.
When searching for a solution, I found a good question and answers which gives some details on how to correctly update a chart (which I hope will fix my issue). It suggests to first create a chart (chart = new Highcharts.Chart(chartOptions)) and then use incantations of chart.series[0].setData(data,true); to update the data.
The point I am missing is how to initially position such a chart on my page (using jQuery), similar to my $("#mychartid").highcharts({...}) above?
You can still create the chart exactly as you are, except that you assign it to a variable. So
$("#mychartid").highcharts(chartOptions);
var chart = $("#mychartid").highcharts();
Then you can perform whatever actions you want on chart, including the
chart.series[0].setData(data,true);
Example:
http://jsfiddle.net/3d3fuhbb/111/
** UPDATED to correct code **
After line chart renders completely; I want to modify the legends of the chart. This is because I get generic names like value1, value2 etc as response from the server.
I have tried to change the legend by changing the title of the series dynamically but it has not worked so far.
I could find a way by modifying the Ext JS library as mentioned here.
http://standalone.iteye.com/blog/1074517
But i need to do it within the ambit of my code only.
Got answer of my question.
Series of the chart provides listeners events; which supports multiple methods. afterrender method can be used to modify the title of the series.
listeners: {
'afterrender': function() {
this.setTitle('yourTitle');
}
}
In above method you can set any custom value for your title.
I'm using Highstock on a project and want to allow for dynamically adding more data to the beginning or end of a series by changing the rangeInputs.
The problem is that out of the box, HighStock doesn't seem to validate rangeInput inputs that are beyond the chart's current max/min.
Here's a link to one of their jsfiddles: jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/xaxis/events-setextremes/
In this example, I would want to type "2011-05-11" into the "To" field and fire an event to go get data. However, typing "2011-05-11" doesn't ever fire the "setExtremes" event or do anything.
Any ideas?
EDIT
Based on the answer I marked as accepted, I created a Highcharts plugin that overwrites the current functionality. https://github.com/d-nation/highstock-beyond-extremes.
Yes, Highstock checks if input date is beyond extremes, and overwrites to min/max value of data. Possible solution is to add two null points and the end and beginning of data, for example:
data: [ [timestamp0, null] , [timestamp1, x] .... [timestampN, xN], [timestampN+1, xN] ]
Live example: http://jsfiddle.net/MCLXV/
Another solution is to edit sources to prevent that.
Setting xAxis.ordinal = false does the trick. See documentation: http://api.highcharts.com/highstock/xAxis.ordinal
Taken from this answer: Highstock - Set extremes beyond the data range
I need to be able to hide a Highcharts series from a button rather than the legend (the reason is that I need to toggle multiple groups from one button: Hiding _groups_ of series in Highcharts and jQuery: how to get acceptable performance? and for the reasons given in that post, I cannot use $(chart.series).each() with jQuery.
None of the following expressions have any effect (my chart object is named chart):
Chart.series.get(1).hide();
chart.series.get(1).hide();
$(chart.series[1]).hide();
$(chart.series["1"]).hide();
$(chart.series[1]).hide();
$(chart.series)["1"].hide();
$(chart.series)[1].hide();
Can someone please tell me how I can make a chart series hide if I know its index? Thanks.
This should work:
chart.series[index].hide()
Full example on jsfiddle
(UDP URL from Simen Echholt comment)