CODEWITHSUNDEEP
javascriptd3.jsdimple.js
Tinu
Tinu

Reputation: 117

Update grouped barchart with new values

I try to extend the example from dimple.js bars_vertical_grouped . I would like to choose with radio-buttons between the values of 'Unit Sales' (as is in the example) and 'Sales Value' (my extension).

As I am very new to d3 and dimple, I can't figure out how to update the y-values, when clicked on the radios. As far as I understand, there are three things to change:

I try to update the chart 'on click':

function updateChart(){    // on click
    var what = this.value; // value of radio-button
    var newValues = null;  // have to be aggregated and scaled              
    svg.selectAll("rect")
        .data(data)
        .transition().duration(400)
        .attr('y', function(d) { d[what]; })                 // ?
        .attr('height', function(d) { y._scale(d[what]); }); // ?
};

Edit: A now working-example is here.

Any help is appreciated!

Upvotes: 1

Views: 245

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

Here you go, I've taken your example and modified it. Dimple can deal with this on its own, there's no need to modify the shapes in d3. Try using the code below in your example:

<script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 600, 450);

    d3.tsv("/data/example_data.tsv", function (data) {

        // Some constants
        var marginLeft = 65;
        marginTop = 60;
        width = 510;
        height = 330;

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(marginLeft, marginTop, width, height)
        myChart.addCategoryAxis("x", ["Price Tier", "Channel"]);

        var y = myChart.addMeasureAxis('y', 'Unit Sales'); // should/will be updated
        myChart.addSeries("Channel", dimple.plot.bar);
        myChart.addLegend(marginLeft, marginTop-25, width, 25, "right");
        myChart.draw();

        // on click update
        d3.selectAll("input").on("click", updateChart);

        function updateChart(){
            var what = this.value;
            // Change the measure on the y axis
            y.measure = what;
            // Redraw the chart with a 1 second transition
            myChart.draw(1000);
        };
    });
</script>

I hope this helps

John

Upvotes: 1

Related Questions