dimple.js Show X Axis label, but if "value" is null don't place a circle on chart

Question

Question: How do I show the Date Value on the X Axis, but not show the circle in the chart area if it is null?

So I am playing around with Dimple.js and I have created a PHP function that pulls data from my MySql database, and maps out when certain trucks arrived to a location by hours. So the X Axis is the date and the Y Axis is the military time it arrived. I use the Min date and max date as the begin and end to loop through. I want to show each day between min and max on the x axis, so if no trucks arrived I assign Value = Null for that.

The problem is there are now circles on the bottom of my chart along the 0 section of the y axis for these nulls. I don't know how to check if value is zero don't show the circle, but still show the date on the X Axis. The data is structured as below:

$dataset_progress005[] = array('Date' => $truck_arrive_day,
      'Value' => $truck_arrive_time,
      'Move ID' => $move_inbound_time_id);

with the javascript as this....

<script type="text/javascript"> <!--Example Plot Chart....-->
        var svg = dimple.newSvg("#area_progress_report5", 800, 400);

        var data = <?php echo json_encode($dataset_progress005); ?>;

        var myChart = new dimple.chart(svg, data);
        myChart.setBounds(60, 30, 505, 305)
        var x = myChart.addCategoryAxis("x", "Date");
        //var x = myChart.addTimeAxis("x", "Date");
        //var x = myChart.addMeasureAxis("x", "Date");
        x.addOrderRule("Date");
        myChart.addCategoryAxis("y", "Value");
        myChart.addSeries("Move ID", dimple.plot.bubble);
        myChart.draw();

        x.shapes.selectAll("text").attr("transform",
            function (d) {
              return d3.select(this).attr("transform") + " translate(0, 40) rotate(-90)";
            });

     </script>

Question: How do I show the Date Value on the X Axis, but not show the circle in the chart area if it is null?

Answer 1

Looking at this, dimple doesn't currently support null values quite as it should. If there is a null in your data it will fail the check for a numeric field and treat it as a string field, which means when you use it for a measure axis you will get a distinct count of values rather than an aggregate total. I will fix that in the code base but in the meantime - if you are able to treat nulls as zero in your dataset - you can hide them after drawing:

...
chart.draw();
series.shapes.style("opacity", function (d) {
    return (d.yValue === 0 ? 0 : 0.8);
});

Here's a fiddle to show what I mean: http://jsfiddle.net/GeLng/2/

Edit, I've just noticed you are doing 2 category axes which changes it a bit. You can still remove the bubble and you can treat it as null, you don't need to worry about converting to zero, but I'm not sure of a way to avoid there being a null space on the y axis:

http://jsfiddle.net/GeLng/3/