score:1
the first problem is reading out the error generated by your code. when you select a option from the dropdown your code generates the error:
uncaught referenceerror: chartbench is not defined
this is because chartbench
is created within the ready(function() { ... })
scope, and can't be access from the outside on('change', function() { ... })
. you may want to take a look at javascript variable scope.
to solve this you can define the chartbench
variable at the top level to make sure it is accessible, like this:
var chartbench;
$(document).ready(function () {
chartbench = new highcharts.chart({
....
you could alternatively also move your change listener declaration within the ready(function() { ... })
scope.
regarding the updating of data, your code still has issues. you are using chartbench.series[0].setdata
as if it can update all your data at the same time. this is not the case. this function sets the data of a single series, so you will have to loop through your series and update them individually. correct use of setdata
to update a single column would look something like this:
chartbench.series[0].setdata([210, 200, 220, 230]);
this updates the first series in your chart to use those specific values instead of those it had previously. this updated jsfiddle gives a example updating a single column with dropdown. it is up to you to utilize this functionality for all series, if desired.
score:3
demo to update data for all series (not only the first series).
code:
var chartbench
$(document).ready(function () {
chartbench = new highcharts.chart({
chart: {
renderto: 'containeryo',
type: 'column'
},
title: {
text: ''
},
credits: {
enabled: false
},
legend: {},
plotoptions: {
series: {
shadow: false,
borderwidth: 0
}
},
xaxis: {
linecolor: '#999',
linewidth: 1,
tickcolor: '#666',
ticklength: 3,
categories: ['2011', '2012', '2013', '2014'],
title: {
text: 'years'
}
},
yaxis: {
linecolor: '#999',
linewidth: 1,
tickcolor: '#666',
tickwidth: 1,
ticklength: 3,
gridlinecolor: '#ddd',
labels: {
format: '$ {value}'
},
title: {
text: ''
}
},
series: [{
"name": "yours",
"data": [110, 100, 120, 130]
}, {
"name": "another",
"data": [100, 90, 110, 120]
}, {
"name": "another b",
"data": [90, 80, 100, 110]
}, {
"name": "another c",
"data": [80, 70, 90, 100]
}]
});
});
var option_a_data = [{
"name": "option-a (1)",
"data": [10, 20, 30, 40]
}, {
"name": "option-a (2)",
"data": [50, 60, 70, 80]
}, {
"name": "option-a (3)",
"data": [90, 100, 110, 120]
}, {
"name": "option-a (4)",
"data": [130, 140, 150, 160]
}];
var option_b_data = [{
"name": "option-b (1)",
"data": [110, 100, 90, 80]
}, {
"name": "option-b (2)",
"data": [110, 100, 90, 80]
}, {
"name": "option-b (3)",
"data": [110, 100, 90, 80]
}, {
"name": "option-b (4)",
"data": [110, 100, 90, 80]
}];
$("#list").on('change', function () {
//alert('f')
var selval = $("#list").val();
if (selval == "a")
{
//chartbench.series[0].setdata([110, 100, 120, 130]);
for(i=0; i<chartbench.series.length; i++)
{
//alert(i);
//chartbench.series[i].setdata(my_data[i].data);
chartbench.series[i].update({
name: option_a_data[i].name,
data:option_a_data[i].data
});
}
chartbench.redraw();
}
else if (selval == "b")
{
for(i=0; i<chartbench.series.length; i++)
{
//alert(i);
//chartbench.series[i].setdata(my_data[i].data);
chartbench.series[i].update({
name: option_b_data[i].name,
data:option_b_data[i].data
});
}
chartbench.redraw(); // redraw only after add all series
}
else
{
}
});
Source: stackoverflow.com
Related Query
- Highcharts - update column graph with setData() not working
- Highcharts graph does not update with firebase
- HIGHCHARTS Treemap update is not working with animation
- The continuous update highcharts with more data plotting the continuity is not visible so we need that continuity in the centre of the graph
- Highcharts setData not working with php,json on button click
- Can I with highcharts column stacking on hover not highlighting the whole serie
- Highcharts not displaying series data for graph with multiple Y-axes
- c# WPF Webbrowser with Highchart, Javascript from external source not working "An error has occurred in the script on this page"
- HighCharts pointPlacement option not working in a single column chart
- Highcharts buttons with different menuitems not working
- HIghcharts column graph with more than 50 data points
- Highcharts - verticalAlign on dataLabels not working on line graph
- Update chart with HighchartsReact is not working when a timer is used in React
- Angular5 - Responsive Highcharts with configuration is not working
- highcharts - Not able to switch between bar to column or vice versa graph type in drilldown
- Highcharts - Small column not clickable when covered with a (sp)line serie
- Data and tooltip not working for graph using highcharts
- Stacked Column Highchart with Angular6 is not working
- Highcharts setData on pie chart not working
- highcharts datetime data not working on column type, but working on line
- rCharts and highcharts with shiny plot does not update correctly
- Stacked column not lining up with highcharts
- Highcharts Column Graph with background color?
- jQuery Highcharts not working with JSF 2.0
- Highcharts Column w/ drilldown not working in Rails 4
- Highcharts - Column labels with different widths are not aligned
- Highcharts upgrade to 8.1.2 not working with Angular 8
- Highcharts - setData() not updating Column Graph Correctly - stumped
- HighCharts angular not working with dynamic data from Angular service
- Angular 9 Highcharts - when using series of type pie with type gauge the innerSize of pie is not working
More Query from same tag
- How to implement the KDJ indicator calculation in highcharts
- Add line to 3d column chart in Highcharts
- Knockout.js calling method outside of view model
- Bind Highchart to variable, all within a div?
- Master - Detail Char in Sencha ExtJS 4.0
- How can I make a chart through JSONfile from highchats? please help me
- Dynamic pointStart in HighCharts ( RoR)
- Graph sliding strangely with negativeColor activated
- need help to optimize php iteration
- UIWebView download it's image content
- Highcharts : Stacked barchart on hover change the opacity
- Center tooltip for highcharts area chart
- Show Highcharts series.name outside of chart margin
- Highcharts will not render if element in series data is empty
- Unable to trigger a click event on series data | Highchart
- HighCharts doesnt get data from Flask endpoint
- React-Native HighCharts Boost Module Usage
- How can I achieve this type of marker in highcharts?
- Change marker width and height in scatter chart
- Highcharts: how to maintain the same order of category labels when bar chart changes to column chart
- How to pass date range filter to line chart using highcharts?
- Remove UTC date from Highcharts tooltip
- html button not firing event to the required graph container firing to different graph in Highchart JS
- Update data of existing Highstock graph using only JavaScript
- How to hide/show a column in a basic column graph of highcharts?
- Highcharts, get the percentage in relation of a total numeric value
- In Highchart, how to change all the legend symbols height in a multiple axes chart?
- How to add HighCharts bundle to BundleConfig? MVC 3
- How can I add links in a Highcharts tooltip that will open on mobile's browser?
- highcharts - Solid Gauge with plot lines