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)
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 want to edit Highchart Yaxis values on double clicking series point using popup with textbox same like attached snapshot URL, on pressing ok or enter button chart must be redraw with changed values.
Any help would be appreciated.
https://onedrive.live.com/redir?resid=EE658CD68AB0C97A!2696&authkey=!ALdbY9xxPI2oxYY&v=3&ithint=photo%2cpng
Look at this example for using a popup on click:
http://www.highcharts.com/demo/line-ajax
See the answer here for another way, using jQuery dialog:
Highcharts: tooltip Click instead of hover
You can capture the result of the update, and send it to the point.update() method, reference here:
http://api.highcharts.com/highcharts#Point.update
If you have more specific questions, get an example going and ask away.
I'm trying to select rows dynamically on a datagrid using the grid.selection.setSeleted() and grid.selection.getSeleted() methods.
I can select rows that are currently undrawn (i.e you must use the horizontal scroll bar to see them). But when I try to get the row contents using grid.selection.getSeleted(), the array returns nulls instead of the row data.
Is there any way to get the selected row data even if it is not currently drawn? Although it's slower can I force dojo to draw the entire grid, even if some of it is not displayed?
Have al look : http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html#working-with-selections
It's a good example how to use getSelected()
and this is a Post from the dojo Forum. It discribes an error that's maybe familiar to yours.
http://dojo-toolkit.33424.n3.nabble.com/dojox-grid-DataGrid-selection-getSelected-odd-behaivour-td3941395.html
Regards
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
I'm trying to figure out if highcharts can do the following:
Render a standard horizontal bar chart that contains separate table data beneath it (imagine a bar chart with an html-like table beneath it.)
The user would be able to export the entire svg using the exporting.js file that highcharts provides.
This might seem vague, I'm trying to think through this though. I'm not familiar with highcharts at all, but have looked thoroughly at the documentation. It is my understanding that something like this wouldn't be possible using highcharts, as it's text capabilities / options aren't that flexible to represent a data table.
Any possible insight would be great, thanks to everyone!
D.
If you check the HighCharts forum you can see a hack to get that.
It is not very clean but it does wonders. If your datatable if very large you may want to think about only showing portions of the data at a time (using zoom in chart).
Stumbled on this years later looking for something related, but I also found this JSFiddle, which might be closer to what has been requested instead of the broken link above.
Highcharts.drawTable = function () {
// SVG fun
};
window.chart = Highcharts.chart('container', {
...chartConfig
});
It literally draws the table in SVG, using the series data. Not saying this is ideal, but it does, however, work for image export, whereas the showTable option doesn't.
Highcharts.chart('container', {
...chartConfig,
exporting: {
showTable: true
}
});
The third and probably best compromise is to use the subtitle HTML text to insert your table.
Highcharts.chart('container', {
...chartConfig,
subtitle: {
title: '<div>Anything goes</div>',
useHTML: true
}
});
Dynamically setting this for the chart at export (allowing you to keep whatever subtitle you want to display on the webpage) involves calling the setTitle method:
chart.setTitle({text: "New Title"});