Update chart based on dropdown selection - javascript

Question

I need to update the chart based on dropdown change. i dont know how to do in javascript or jquery.

i have created fiddle to explain my situation

this is the html

<select id="chartType">
<option>bar chart</option>
<option>area chart</option>
<option>line chart</option>
<option>spline chart</option>
</select>

<div id="chart"></div>

JS

var chart = c3.generate({
    data: {
        rows: [
            ['data4', 'data2', 'data3'],
            [90, 120, 300],
            [40, 160, 240],
            [50, 200, 290],
            [120, 160, 230],
            [80, 130, 300],
            [90, 220, 320]
        ],
        type: 'bar'
    }
});

this is my customisation , trying

var currentChart = 0;
var charts = [{
    type: 'line',
    data: 'data4'
}, {
    type: 'area',
    data: 'data2'
}, {
    type: 'spline',
    data: 'data3'
}];

$(function () {
    $("#chartType").change(function (evt) {
        var chartSelection = $("#chartType").val();
        $('#chart').hide().filter(charts + chartSelection).show();
    });
});

in detail explanation

i am working on c3.js charts

in c3, it has 4 kinds of charts

bar chart
area chart
spline chart
line chart

whenever user changes the dropdown or select the other charts i need to update the chart.

C3 library link

http://c3js.org/samples/chart_combination.html

Any help is appreciated

Faheem · Accepted Answer · 2014-11-08 22:09:29Z

1

Fiddle

When working with dropdowns you should give each option a value attribute, this is the value that .val() will later return for us and the same we'll use to specify the chart type we want.

<select id="chartType">
  <option value="bar">bar chart</option>
  <option value="area">area chart</option>
  <option value="line">line chart</option>
  <option value="spline">spline chart</option>
</select>

With our EventListener we then listen for a selection in the dropdown and when something is selected we regenerate the chart in that type.

$("#chartType").change(function (evt) {
    var chartSelection = $("#chartType").val();
    var chart = c3.generate({
        data: {
            rows: data,
            type: chartSelection
        }
    });
});

edited Nov 8, 2014 at 22:09

answered Nov 8, 2014 at 21:12

Faheem

665 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rakesh Over a year ago

@ Faheem - please help me on this if you can: stackoverflow.com/questions/26827273/…

Collectives™ on Stack Overflow

Update chart based on dropdown selection - javascript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related