CODEWITHSUNDEEP
javascriptjqueryhtmljqchart
Sharika K
Sharika K

Reputation: 1

Change display according to an option selected on top of a columnJQchart

I need three radio button fields for displaying yearly , monthly , weekly data on the column chart so that when i select either of the option the display should be accordingly. I found lot of examples in JQchart for different types of displays but couldn't find an example for this. Is there any other option replacing the radio button here? Please help

Upvotes: 0

Views: 65

Answers (1)

Xarus
Xarus

Reputation: 7039

Your best bet would be to have three series of data, once for each. You can easily swap out the series using a listener on the radio buttons.

Essentially:

        <input type="radio" name="data" id="yearly" class="radioSelector" value="yearly">Yearly<br>
        <input type="radio" name="data" id="monthly" class="radioSelector" value="monthly">Monthly<br>
        <input type="radio" name="data" id="daily" class="radioSelector" value="daily">Daily

        <script>
        $('.radioSelector').click(function (event) {

            // Set target ID
            var id = $(event.target).attr('id');

            // get current series
            var series = $('#jqChart').jqChart('option', 'series');

            // check which radio
            switch (id) {
                 case 'yearly':
                     series = yearlydata;
                     break;
                 case 'monthly':
                     series = monthlydata;
                     break;
                 case 'daily':
                     series = dailydata;
                     break;
            }
            // update (redraw) the chart
            $('#jqChart').jqChart('update');
        });
        </script>

Upvotes: 0

Related Questions