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>&euro; {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!!!


Related Articles