Диаграмма обновления, основанная на выпадающем меню - javascript

Question

Мне нужно обновить график, основанный на изменении выпадающего списка. Я не знаю, как это сделать в javascript или jquery.

я создал скрипку, чтобы объяснить мое положение

http://jsfiddle.net/sELst/25/

это 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' 
    } 
}); 

это моя настройка, пытаясь

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(); 
    }); 
}); 

подробно объяснения

Я работаю на c3.js графиках

в c3, он имеет 4 вида диаграмм

1. бар диаграммы
2. область диаграммы
3. сплайн-диаграмма
4. графике

всякий раз, когда пользователь изменяет выпадающее меню или выбрать другие диаграммы мне нужно обновить таблицу.

библиотека C3 ссылка

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

Любой помощь приветствуется

Answer 1

Fiddle

При работе с выпадающими вы должны дать каждому параметру; атрибут значения, это значение что .val() позже вернется для нас, и то же самое мы будем использовать для s укажите тип диаграммы, который мы хотим.

<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> 

С нашей EventListener мы тогда прислушайтесь к выбору в раскрывающемся списке и при выборе то, что мы регенерировать диаграмму в этом типе.

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