Toggle between charts

Question

I have 2 radio buttons as follows:

<h4>Graph Type</h4>
<label class="radio"><?= form_radio('graph_type', 'type1', TRUE) ?>Type1</label>
<label class="radio"><?= form_radio('graph_type', 'type2', FALSE) ?>Type2</label>

I have a function as follows to display the graph: If i have the plotOptions then it displays a stacked chart and if i remove the plotOptions then it displays a normal chart.How can do this in the change event of my radio btton?

var testSettings = function(chart){

        var data = {
            chart: {
                type: type,
                renderTo: renderTo,
                height: height,
                width: tabWidth
            },
            title: {
                text: chart.label
            },

            plotOptions: {
                area: {
                    stacking: 'normal',
                    dataLabels: {
                        useHTML: true
                    },
                    pointPadding: 0,
                    groupPadding: 0.12,
                },
                column: {
                    stacking: 'normal',
                }
            },

        return data;

    }

Answer 1

If I choose the radio option as type1 , then data should contain everything as above.But if the radio option is type2, then "data" should not contain the "plotoptions".

Replace, radio inputs with form_radio if you want use codeigniter form helper,

 // Onchange pass selected value $('input[name="graph_type"]').on('change', function() { activateChart($(this).val()); }); var activateChart = function(type) { // here you put your actual chart options object var settings = testSettings({ label: 'this is for test', type: 'line', renderTo: 'hsdiv', height: '500px', tabWidth: '600px' }); switch (type) { case "type1": // no change to options break; case "type2": // delete plotOptions delete settings.plotOptions; // if you want to add somemore options here, you can break; } // after change what's changed console.log(type); console.log(settings); // All set then // chart = new Highcharts.Chart(settings); } var testSettings = function(chart) { // Better to have default, to avoid exception, if arguments not supplied properly var defaults = { type: 'line', renderTo: 'container', height: '300px', tabWidth: '400px', label: 'Chart Label' }; // extend with given arguments var settings = $.extend({}, defaults, chart || {}); var data = { chart: { type: settings.type, renderTo: settings.renderTo, height: settings.height, width: settings.tabWidth }, title: { text: settings.label }, plotOptions: { area: { stacking: 'normal', dataLabels: { useHTML: true }, pointPadding: 0, groupPadding: 0.12, }, column: { stacking: 'normal', } } }; return data; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h4>Graph Type</h4> <label class="radio"><input type="radio" name="graph_type" value="type1"/> Type1</label> <label class="radio"><input type="radio" name="graph_type" value="type2"/>Type2</label>