score:2
Accepted answer
Problem with your code was you was binding function
on #change
button which was loading later in your code hence resulting not attaching listener on button.
I have reviewed your code and have two solutions for you
First just take your script of functions in end of file and you are sorted.
...//your code snippet of end only
<script src="./js/highcharts/highcharts.js">
<script src="./js/highcharts/modules/exporting.js">
<script>
$(function () {
$('#chart1').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Project: Dikke fiets'
},
subtitle: {
text: 'Begrote bedragen versus gebruikte bedragen'
},
xAxis: {
categories: [
'Materiaal',
'Personeel',
'Onderhoud',
'dik'
]
},
yAxis: {
min: 0,
title: {
text: 'Bedrag in euro\'s'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>€ {point.y:.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Begroot',
data: [49.90, 71.50, 106.40, 129.20]
}, {
name: 'Gebruikt',
data: [83.60, 78.80, 98.50, 93.40]
}]
});
});
// nieuw gedeelte
var options = {
chart: {
renderTo: 'chart1',
defaultSeriesType: 'spline'
},
series: []
};
$("#change").click(function(){
if ($("#list").val() == "A")
{
options.series = [{
name: 'Dik',
data: [49.90, 71.50, 106.40, 129.20]
}, {
name: 'Dun',
data: [83.60, 78.80, 98.50, 93.40]
}]
//$.get('/dough/includes/live-chart.php?mode=month'
}
else
{
options.series = [{name: 'B', data: [3,2,1,2,3]}]
//$.get('/dough/includes/live-chart.php?mode=newmode'
}
var chart = new Highcharts.Chart(options);
});
// nieuw gedeelte
var options = {
chart: {
renderTo: 'chart1',
defaultSeriesType: 'spline',
type: 'column'
},
series: []
};
$("#change").click(function () {
if ($("#list").val() == "A") {
options.series = [{
name: 'Begroot',
data: [49.90, 61.50, 106.40, 129.20]
}, {
name: 'Gebruikt',
data: [83.60, 78.80, 98.50, 93.40]
}]
} else {
options.series = [{
name: 'Begroot',
data: [19.90, 61.50, 26.40, 29.20]
}, {
name: 'Gebruikt',
data: [13.60, 28.80, 38.50, 53.40]
}]
}
var chart = new Highcharts.Chart(options);
});
</script>
</body>
</html>
Second Thing you can do, just enclose your function under document ready as given below:
$(document).ready(function(){
$("#change").click(function () {
if ($("#list").val() == "A") {
options.series = [{
name: 'Begroot',
data: [49.90, 61.50, 106.40, 129.20]
}, {
name: 'Gebruikt',
data: [83.60, 78.80, 98.50, 93.40]
}]
} else {
options.series = [{
name: 'Begroot',
data: [19.90, 61.50, 26.40, 29.20]
}, {
name: 'Gebruikt',
data: [13.60, 28.80, 38.50, 53.40]
}]
}
var chart = new Highcharts.Chart(options);
});
});
I hope this will solve your problem.
Happy Coding!!!
Source: stackoverflow.com
Related Query
- highchart refresh wont work on my website
- I had follow someone code samples and try apply to my HighChart program but I can't get it work at all
- highchart dateTimeLabelFormats don't work
- How to get Highchart Gauge to work in Sencha Touch 2
- Highchart custom label doesn't seem to work with data:image/png;base64
- Highchart with Range selector for SQL Data in html website
- Highchart Drill Down do not work for different chart types on same page
- tickInterval doesn't work properly in Highchart and Highstock.
- Highmaps: Change periods to commas when setOptions wont work
- React Highstock Won't Work But Highchart works
- Highchart plugin does not work
- How refresh title highchart
- Strange character in the Highstock source code
- Why does my Highchart look different when I transfer my code from Jsfiddle to my server?
- Highchart annotation click event doesn't work
- I'm trying to use HighChart map and solid guage they both work for my data independetly but I get get lot of errors on I put them on a file
- Datalables alignment doesnt work in Highchart Timeline
- Column based Highchart drilldown series assign color code to each column
- Converted PHP code that built an array to JS and now highcharts doesn't work - what did I do wrong?
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- linecap property in highchart doesn't work
- Using an editable table with HighChart and having the chart refresh with change
- why foreach doesn't work inside my highchart and when i splet the array it works?
- Highchart React not rendering heat map after refresh its throwing error
- Highchart Stock gui does not work in Angular 8
- Highchart dates do not work for some data series
- Error: Data source must be a URL for refresh | console error | javascript | Highcharts
- Highchart in js does not work in Vue.js
- annotation in highchart doesn't work as expected
- highchart stacked bar plotting data doesn't work by javascript
More Query from same tag
- give highchart correct parametr from directive angularjs
- HIghchart show current month data with week interval
- Chart not render correctly when maximizing / restoring window or dragging resize bar (SmartGWT)
- Django chartit loading jquery and highcharts js
- Highcharts x axis custom scaling
- Highcharts custom data for map in React TypeScript?
- How to set xAxis minimum and maximum values on Highstock?
- Title below Pie charts
- How to set intervals for multiple y-axis in Highcharts?
- Simplifying if else statements
- Internationalization in highcharts?
- Highchart axis 2 decimal places
- Highcharts - HTML tooltip & datalabels render issue
- Highcharts column w/ overlapping goal
- Uncaught Error: [$injector:modulerr] using Angular JS and highcharts-ng
- highcharts - show by month
- Highstock padding/margin with range selector
- HighCharts: Custom button next to legend inside chart area
- Escape c# class property from JSON serialization (to remove quotes)
- Displaying hours and minutes on x-axis with Highcharts
- Highchart not displaying in cakephp
- Can I with highcharts column stacking on hover not highlighting the whole serie
- Highchart - position x-axis label bottom to next label
- How to change the background series colour of Highcharts Radar chart
- How to get multiple lines in highcharts?
- Jquery, highchart: render plot on button click, roll backs
- How to remove decimal values on x-axis of bar chart : Highcharts
- How to change UTC timestamp on the Highstock charts?
- Center a chart inside of bootstrap's carousel
- Highchart Axis with only min and max series value