Search code examples
d3.jsdata-visualizationdimple.js

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?

Solution

  • 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: