Update Chart Using based on Dropdown list

Question

I am trying to render charts based on selecting specific date criteria. I would like the charts to render different data set when i select an option (e.g. monthly) from drop down list.

Currently, the script below is not executing the above expected output (its showing no data when I select daily/monthly from the selection list). Am I missing something in my code below? Please advice.

This is my code:

var dataDaily = [
    ['CVR', 'TALK'],
    [90, 353]
];

var dataWeekly = [
    ['CVR', 'TALK'],
    [225, 893]
];

var dataMonthly = [
    ['CVR', 'TALK'],
    [1602, 4934]  
];

$(function () {
    
    // Initial chart
    var chart = c3.generate({
        data: {
            rows: dataDaily,
            type: 'pie'
        }
    });
    
    // Redraw chart depending on which option is selected
    $("#DataType").change(function (evt) {
        var timeSelection = $("#DataType").val();
        var chart = c3.generate({
            data: {
                rows: timeSelection,
                type: 'pie' 
            }
        });
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<select id="DataType">
  <option value="dataDaily">Daily</option>
  <option value="dataWeekly">Weekly</option>
  <option value="dataMonthly">Monthly</option>
</select>
<div id="chart"></div>

You can also see a demo of the code (and the issue) on this JSFiddle: http://jsfiddle.net/km97cdL3/

score 4 · Accepted Answer · edited May 23 '17 at 12:13

The problem is in this line:

var timeSelection = $("#DataType").val();

The value of the dropdown is a string ("dataDaily", "dataWeekly", or "dataMonthly"), and not the array variable specified by that literal string (dataDaily, dataWeekly, or dataMonthly).

A quick solution would be to evaluate (using eval()) the value of the select, that way you'll "transform" the string into the array of the same name:

var timeSelection = eval( $("#DataType").val() );

So the final code would look like:

var dataDaily = [
    ['CVR', 'TALK'],
    [90, 353]
];

var dataWeekly = [
    ['CVR', 'TALK'],
    [225, 893]
];

var dataMonthly = [
    ['CVR', 'TALK'],
    [1602, 4934]  
];

$(function () {
    
    // Initial chart
    var chart = c3.generate({
        data: {
            rows: dataDaily,
            type: 'pie'
        }
    });
    
    // Redraw chart depending on which option is selected
    $("#DataType").change(function (evt) {
        var timeSelection = eval( $("#DataType").val() );
        var chart = c3.generate({
            data: {
                rows: timeSelection,
                type: 'pie' 
            }
        });
    });
    
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">

<select id="DataType">
  <option value="dataDaily">Daily</option>
  <option value="dataWeekly">Weekly</option>
  <option value="dataMonthly">Monthly</option>
</select>
<div id="chart"></div>

You can also see it working correctly on this JSFiddle: http://jsfiddle.net/km97cdL3/1/

Note: Before start using eval(), you should be aware of its risks if not used properly. Check this question and the comments for more details.

Update Chart Using based on Dropdown list

1 Answers1