CODEWITHSUNDEEP
dimple.js
Scott Stafford
Scott Stafford

Reputation: 44838

How do I set category values explicitly with dimple.js charts?

I want to draw a chart that always shows M, T, W, Th, F, Sa, Su on the x axis.

I start with:

var x = myChart.addCategoryAxis("x", "Day");
x.addOrderRule(["M", "T", "W", "Th", "F", "Sa", "Su"]);

but that won't force those values to exist; if my data only has "W" and "F", I'll only get two items on the x axis.

However, I want all 7 even if the data has no examples of some values.

Is there a way to achieve this?

I also posted this as an issue, but it's probably more appropriate here on SO: https://github.com/PMSI-AlignAlytics/dimple/issues/103

Upvotes: 1

Views: 340

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

You just need to make sure those values appear in your data. Here's an example:

var xValues = ["M", "T", "W", "Th", "F", "Sa", "Su"];
    svg = dimple.newSvg("#chartContainer", 600, 400),
    data = [
      { "cat": "W", "val": 123456789 },
      { "cat": "F", "val": 234567890 }
    ],
    c = new dimple.chart(svg, data),
    x = c.addCategoryAxis("x", "cat"),
    y = c.addMeasureAxis("y", "val"),
    s = c.addSeries(null, dimple.plot.bar);

// Append a row with no value for each x category you want
xValues.forEach(function (d) {
    data.push({"cat": d})
}, this);

// Set the ordering as you did before
x.addOrderRule(xValues);

c.draw();

http://jsbin.com/hosobo/7/edit?js,output

Upvotes: 1

Related Questions