Highcharts radio button toggle between charts

I'm trying to use radio buttons to toggle the display between two Highchart charts (different data series) using divs. I essentially need the accepted solution here: Mootools Highcharts radio button toggle between charts, working jQuery version ...but I can't work out how to specify the variables for each chart from my existing code. The above solution uses this format:

var chart1 = new Highcharts.Chart({
    chart: {
         renderTo: 'divID-1',
         height: 400,
         ...

var chart2 = new Highcharts.Chart({
    chart: {
         renderTo: 'divID-2',
         height: 400,
         ...

whereas each of my charts are specified in the following format, e.g. Chart 1:

Highcharts.setOptions({
    lang: {
        decimalPoint: '.',
        thousandsSep: ','
    }
});

$.get('data_stackedarea_value.csv', function(csv) {
$('#divID-1').highcharts({

chart: {type: 'area'},
data: {csv: csv},
...

How can I translate these into variables that can be called by the initial toggle function?

window.addEvent('domready', function() {
    document.getElements("[name=toggler]").addEvent('click', function(){
        $$('.toHide').setStyle('top', '-9999em');
        $$('.toHide').setStyle('opacity', '0');
        $("divID-"+this.get('value')).setStyle('top', '0').fade(0,1);
    });

Many thanks

Answers 1

  • Here's an example where I adopted the solution from 23817700 to use the way you are passing variables to the charts.

    I couldn't resist also adapting the toggle code to use jQuery, since it was required already. You can try this is action in this fiddle provided by @RachelGallen: https://jsfiddle.net/ezc7oghm/1/

    <!doctype html>
    <html>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <body>
            <div id="graphwrap" style="height: 410px;">
                <div id="divID-1" class="toHide" style="position:relative;margin-bottom:-400px;"></div>
                <div id="divID-2" class="toHide" style="position:relative;top:-9999em;opacity:0;"></div>
            </div>
    
            <div id="viewSelectWrap">
                <h4>View Select</h4>
                <label><input id="rdb1" type="radio" name="toggler" value="divID-1" style="cursor:pointer;" checked/>1</label>
                <label><input id="rdb2" type="radio" name="toggler" value="divID-2" style="cursor:pointer;" />2</label>
            </div>
    
    <script>
    $(function() {
        $('[name=toggler]').click(function () {
            $('.toHide').css({
                top: '-9999em',
                opacity: 0
            });
            var chartToShow = $(this).val();
            $('#' + chartToShow).css({
                top: 0,
                opacity: 1
            });
        });
    
        $('#divID-1').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
        $('#divID-2').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Time spent on hobbies'
            },
            xAxis: {
                categories: ['Skiing', 'Bicycling', 'Swimming']
            },
            yAxis: {
                title: {
                    text: 'Time spent on hobbies'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
    </script>
    
        </body>
    </html>
    

Related Articles