Update dimple.js chart when select a new option

Question

<select  id="cs" name="cs" >
    <option value = "HIV+TB" >HIV+TB</option>
    <option value = "TB">TB</option>
</select>
<button id="btn">Click Me</button>

<div id="chartContainer">
<script type="text/javascript">
    var dropdown = d3.select("#cs")
    var cs2 = dropdown.node().options[dropdown.node().selectedIndex].value;
    d3.csv("test.csv", function (data) {
    var svg = dimple.newSvg("#chartContainer", 590, 600);
    var myChart = new dimple.chart(svg, data1990);
    myChart.setBounds(105, 25, 475, 465)
    myChart.showGridlines = true;
    myChart.addCategoryAxis("x", ["measure","sex","year"]);
    myChart.addCategoryAxis("y", "age_name");
    var z = myChart.addMeasureAxis("z", "rt_mean");
    var s = myChart.addSeries("sex", dimple.plot.bubble);
    s.aggregate = dimple.aggregateMethod.max;
    myChart.addLegend(240, 10, 330, 20, "right");
    myChart.draw();
    d3.select("#btn").on("click", function() {
            myChart.data = data.filter(function(d) { return d.cause_short == cs2; });
            myChart.draw(1000);
            });
    });
</script>                       

The problem is the code want to add a new chart in addition to the exist one. How can I update the chart after clicking the new option.

Answer 1

Here's an example to redraw the chart with random numbers whenever the button is clicked. Hopefully this will give you enough to work your example:

var svg = dimple.newSvg("#chartContainer", 590, 400);
var data = [
    { Animal: "Cats", Value: (Math.random() * 1000000) },
    { Animal: "Dogs", Value: (Math.random() * 1000000) },
    { Animal: "Mice", Value: (Math.random() * 1000000) }
];

var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 305)
var x = myChart.addCategoryAxis("x", "Animal"); 
x.addOrderRule(["Cats", "Dogs", "Mice"]);
myChart.addMeasureAxis("y", "Value");
myChart.addSeries(null, dimple.plot.bar);
myChart.draw();

d3.select("#btn").on("click", function() {
    myChart.data = [
        { Animal: "Cats", Value: (Math.random() * 1000000) },
        { Animal: "Dogs", Value: (Math.random() * 1000000) },
        { Animal: "Mice", Value: (Math.random() * 1000000) }
    ];
    myChart.draw(1000);
});

And a working example here:

http://jsfiddle.net/nf57j/