issue with different type of axes for storyboard example of dimplejs

Question

I'm trying to create a storyboard very similar to the one in dimpleJS examples. My data looks like below.

[{"Date":"2014-05-05T19:03:23Z","Liters":0.23,"Soda":"Coke","Day":"2014-05-05","Time of Day":"15:03","Day-Time":"2014-05-05 15:03"},{"Date":"2014-05-05T19:37:27Z","Liters":0.35,"Soda":"Coke","Day":"2014-05-05","Time of Day":"15:37","Day-Time":"2014-05-05 15:37"},{"Date":"2014-05-05T20:33:33Z","Liters":0.21,"Soda":"Coke","Day":"2014-05-05","Time of Day":"16:33","Day-Time":"2014-05-05 16:33"},{"Date":"2014-05-05T21:11:37Z","Liters":0.21,"Soda":"Coke","Day":"2014-05-05","Time of Day":"17:11","Day-Time":"2014-05-05 17:11"},{"Date":"2014-05-06T13:55:09Z","Liters":0.22,"Soda":"Coke","Day":"2014-05-06","Time of Day":"9:55","Day-Time":"2014-05-06 9:55"},{"Date":"2014-05-06T14:27:13Z","Liters":0.27,"Soda":"Coke","Day":"2014-05-06","Time of Day":"10:27","Day-Time":"2014-05-06 10:27"},{"Date":"2014-05-06T15:42:21Z","Liters":0.14,"Soda":"Coke","Day":"2014-05-06","Time of Day":"11:42","Day-Time":"2014-05-06 11:42"},{"Date":"2014-05-06T16:16:24Z","Liters":0.24,"Soda":"Coke","Day":"2014-05-06","Time of Day":"12:16","Day-Time":"2014-05-06 12:16"},{"Date":"2014-05-05T19:13:24Z","Liters":0.59,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"15:13","Day-Time":"2014-05-05 15:13"},{"Date":"2014-05-05T20:33:33Z","Liters":0.01,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"16:33","Day-Time":"2014-05-05 16:33"},{"Date":"2014-05-05T21:04:36Z","Liters":0.39,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"17:04","Day-Time":"2014-05-05 17:04"},{"Date":"2014-05-05T21:11:37Z","Liters":0.21,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"17:11","Day-Time":"2014-05-05 17:11"},{"Date":"2014-05-05T21:57:42Z","Liters":0.17,"Soda":"Diet Coke","Day":"2014-05-05","Time of Day":"17:57"},{"Date":"2014-05-06T11:11:53Z","Liters":0.42,"Soda":"Diet Coke"},{"Date":"2014-05-06T12:54:03Z","Liters":0.49,"Soda":"Diet Coke"},{"Date":"2014-05-06T12:55:03Z","Liters":0.48,"Soda":"Diet Coke"},{"Date":"2014-05-06T13:07:04Z","Liters":0.27,"Soda":"Diet Coke"},{"Date":"2014-05-06T13:34:07Z","Liters":0.41,"Soda":"Diet Coke"},{"Date":"2014-05-06T13:55:09Z","Liters":0.19,"Soda":"Diet Coke"},{"Date":"2014-05-06T14:27:13Z","Liters":0.01,"Soda":"Diet Coke"},{"Date":"2014-05-06T15:42:21Z","Liters":0.02,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:01:23Z","Liters":0.45,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:05:23Z","Liters":0.52,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:35:27Z","Liters":0.65,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:49:28Z","Liters":0.4,"Soda":"Diet Coke"},{"Date":"2014-05-06T16:50:29Z","Liters":0.14,"Soda":"Diet Coke"},{"Date":"2014-05-05T18:10:18Z","Liters":0.24,"Soda":"Powerade"},{"Date":"2014-05-05T19:03:23Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-05T19:37:27Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-05T20:39:34Z","Liters":0.39,"Soda":"Powerade"},{"Date":"2014-05-05T21:04:36Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-06T10:32:49Z","Liters":0.18,"Soda":"Powerade"},{"Date":"2014-05-06T11:11:53Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-06T12:54:03Z","Liters":0.01,"Soda":"Powerade"},{"Date":"2014-05-06T14:27:13Z","Liters":0.02,"Soda":"Powerade"},{"Date":"2014-05-06T15:42:21Z","Liters":0.02,"Soda":"Powerade"},{"Date":"2014-05-06T16:01:23Z","Liters":0.03,"Soda":"Powerade"},{"Date":"2014-05-06T16:05:23Z","Liters":0.03,"Soda":"Powerade"},{"Date":"2014-05-06T16:23:25Z","Liters":0.12,"Soda":"Powerade"},{"Date":"2014-05-06T16:50:29Z","Liters":0.01,"Soda":"Powerade"}]

I've category and time axes. The problem is that the bubbles do not show up at the correct y(time) axis. My code looks like below and it also shows too many 0 values although there is no 0 value in dataset.

        var series, charts, lastDate = null, sodas = dimple.getUniqueValues(data, "Soda");

        charts = [new dimple.chart(svg, null)],
        charts.push(myChart);

        charts.forEach(function (chart, i) {
            var x, y, z;
            chart.setBounds(this.attributes.left, this.attributes.top, this.attributes.width - 225, this.attributes.height - 225);
            x = chart.addCategoryAxis("x", "Soda");
            x.overrideMax = 3;
            x.hidden = (i === 0);
            y = chart.addTimeAxis("y", "Day-Time", "%Y-%m-%d %H:%M", "%d-%m %H:%M");
            // y.overrideMax = "17:00";
            y.hidden = (i === 0);
            z = chart.addMeasureAxis("z", "Liters");
            z.overrideMax = 1;
            // Ensure the same colors for every owner in both charts
            // differing by opacity
            sodas.forEach(function (soda, k) {
                chart.assignColor(
                    soda,
                    charts[0].defaultColors[k].fill,
                    "white",
                    (i === 0 ? 0.3 : 1));
            }, this);
        }, this);
        charts[1].addLegend(850, 100, 60, 300, "Right");

        charts[1].setStoryboard("Time of Day", function (d) {
            // Use the last date variable to manage the previous tick's data
            if (lastDate !== null) {
                // Pull the previous data
                var lastData = dimple.filterData(data, "Time of Day", lastDate);
                // Add a series to the background chart to display old position
                var lastSeries = charts[0].addSeries("Soda", dimple.plot.bubble);
                // Average suits these measures better
                lastSeries.aggregate = dimple.aggregateMethod.avg;
                // Give each series its own data at different periods
                lastSeries.data = lastData;
                // Draw the background chart
                charts[0].draw();
                // Class all shapes as .historic
                lastSeries.shapes.attr("class", "historic");
                // Reduce all opacity and remove once opacity drops below 5%
                d3.selectAll(".historic").each(function () {
                    var shape = d3.select(this),
                        opacity = shape.style("opacity") - 0.02;
                    // shape.style("opacity", opacity);
                    if (opacity < 0.1) {
                        shape.remove();
                    } else {
                        shape.style("opacity", opacity);
                    }
                });
            }
            lastDate = d;
        });

        series = charts[1].addSeries("Soda", dimple.plot.bubble)
        series.aggregate = dimple.aggregateMethod.avg;
        // Draw the main chart
        charts[1].draw();

Here is the screenshot.

Answer 1

Thanks for adding the fiddles. If you remove the x.hidden = (i === 0); and y.hidden = (i === 0); lines (so that the back chart's axes are displayed) you can see the issue. Unlike measure axes where you can fix the max and min to make sure that the charts are identically proportioned, category axes will only draw for the elements in the data, so a frame with a single category will only draw a single point in the centre of the axis. Also the ordering will change by default.

To get your case working you need to fix ordering for the x axis.

x.addOrderRule(["Coke", "Diet Coke", "Powerade"]);

Define a max and min value for the y axis:

y.overrideMin = d3.time.format("%Y-%m-%d").parse("2014-05-05");
y.overrideMax = d3.time.format("%Y-%m-%d").parse("2014-05-07");

And stick some dummy rows in for any missing categories.

lastData = lastData.concat([
    {
        "Date": "2014-05-06T00:00:00Z",
        "Liters": 0,
        "Soda": "Coke"
    },
    {
        "Date": "2014-05-06T00:00:00Z",
        "Liters": 0,
        "Soda": "Diet Coke"
    },
    {
        "Date": "2014-05-06T00:00:00Z",
        "Liters": 0,
        "Soda": "Powerade"
    }
]);

This results in this output: http://jsfiddle.net/4qBqJ/9/