CODEWITHSUNDEEP
d3.jsdata-visualizationdimple.js
Luis Cruz
Luis Cruz

Reputation: 403

How can I add columns as categories in a bar chart using Dimple.js?

I want to plot a bar chart using dimple.js in which I want to plot the portion of users in different categories. Each category is a column in my dataset.

My data looks like this:

Table with sample data

I would like to have a chart in which I had a bar for each platform and each column Q14_*.

I understand that platform should be a series:

myChart.addSeries("Platform", dimple.plot.area);

However, I don't know how to do add the bars for each column. How can I do it?

Upvotes: 0

Views: 106

Answers (1)

Tom
Tom

Reputation: 1273

I tried doing the same thing a while ago and decided to reconstruct the data. But I'm not sure if this is the best solution possible. Anyway, this is my solution:

  1. Reconstruct the data to have the following columns:

    • platform (values: Android, Apple)
    • portion (values: the numerical proportion)
    • quarter (values: Q14_1, Q14_2 ....)

  2. Use proportional axis for the platform column to show the proportion: addPctAxis,

  3. Use the quarter as a category axis for X.

  4. Use the portion column as the series.

Then the code should look like:

myChart.addCategoryAxis("x", "quarter");
myChart.addPctAxis("y", "platform");
myChart.addSeries("portion", dimple.plot.bar);

Also, there several examples using addPctAxis you can learn from which are pretty similar to what you are asking. You might want to have a look:

Upvotes: 1

Related Questions