How To Use Series.stack = False In Dimple.js To Suppress Aggregation; Different Symbols For Each Series

I am trying to suppress aggregation of data for given months using dimple.js' s3.stacked = false toggle, but it won't do so. How to do aggregation suppression properly in dimple.js

Solution 1:

You were close to the answer, you do need to specify the profit in the first parameter of addSeries but that parameter can take an array and only the last element of the array defines colour, so you can include your label there:

s3 = chart.addSeries(["Profit", "Profit in each unit"], dimple.plot.bubble, [x,y3]);

The stacked property is about positioning of the elements rather than aggregation of the dataset, so won't help you here.

Dimple doesn't support other shapes with its provided plot methods, however you could make your own and provide it to the second parameter of addSeries. To do a complete series plotter you should take a copy of the bubble plot source (https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/plot/bubble.js) and modify it to draw whatever you like. However this can get tricky.

If you don't care about certain features (e.g. tooltips, animation, repeated draws etc), you can cut them out and it reduces the code to something very minimal. Here's the most basic plotter for drawing a star:

var myCustomPlotter = {
        stacked: false,
        grouped: false,
        supportedAxes: ["x", "y"],
        draw: function (chart, series, duration) {
            chart._group
                .selectAll(".my-series")
                .data(series._positionData)
                .enter()
                .append("path")
                // Path Generated at http://www.smiffysplace.com/stars.html
                .attr("d", "M 0 10 L 11.756 16.180 L 9.511 3.090 L 19.021 -6.180 L 5.878 -8.090 L 0 -20 L -5.878 -8.090 L -19.021 -6.180 L -9.511 3.090 L -11.756 16.180 L 0 10")
                .attr("transform", function (d) { 
                return "translate(" +
                    dimple._helpers.cx(d, chart, series) + "," + 
                    dimple._helpers.cy(d, chart, series) + ")"; 
                }) 
                .style("fill", "yellow")
                .style("stroke", "orange");
        }
    };

http://jsbin.com/mafegu/6/edit?js,output