Multiseries in dimplejs

Question

I deal with multi-line diagrams in dimpleys and get a little stuck on multi-axis logic.

With the following data:

var data = [ {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4}, {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3}, {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5}, {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1}, {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4} ] 

I am trying to get a chart showing, by months, my income and my profit on the same y axis and my units on the secondary y axis.

In the code below, I managed to display 3 series. But the Profit series is not really on the same axis as revenue, and it all seems more like a hack than the right solution.

 var chart = new dimple.chart(svg, data); chart.setBounds(60,20,680,330); var x = chart.addCategoryAxis("x", "Month"); var y1 = chart.addMeasureAxis("y", "Revenue"); chart.addSeries("null", dimple.plot.line, [x,y1]); var y2 = chart.addMeasureAxis("y", "Units"); chart.addSeries("null", dimple.plot.bar, [x,y2]); var y3 = chart.addMeasureAxis("y", "Profit"); chart.addSeries("null", dimple.plot.line, [x,y3]); 

I guess my logic may be wrong in how to play with the series correctly. Any help would be great.

Thanks a lot, Xavier

Full code:

 var svg = dimple.newSvg("body", 800, 400); var data = [ {"Month":"01/2013", "Revenue":2000, "Profit":2000, "Units":4}, {"Month":"02/2013", "Revenue":3201, "Profit":2000, "Units":3}, {"Month":"03/2013", "Revenue":1940, "Profit":14000, "Units":5}, {"Month":"04/2013", "Revenue":2500, "Profit":3200, "Units":1}, {"Month":"05/2013", "Revenue":800, "Profit":1200, "Units":4} ] var chart = new dimple.chart(svg, data); chart.setBounds(60,20,680,330); var x = chart.addCategoryAxis("x", "Month"); var y1 = chart.addMeasureAxis("y", "Revenue"); chart.addSeries("null", dimple.plot.line, [x,y1]); var y2 = chart.addMeasureAxis("y", "Units"); chart.addSeries("null", dimple.plot.bar, [x,y2]); var y3 = chart.addMeasureAxis("y", "Profit"); chart.addSeries("null", dimple.plot.line, [x,y3]); x.dateParseFormat = "%m/%Y"; x.addOrderRule("Date"); chart.draw(); 

Answer 1

EDIT:

This is no longer required since version 2. Now you can use multiple axes .

ORIGINAL:

I see the problem here, the problem is not in several axes, but in an attempt to take several measures against one axis, which Dimple does not yet support. I'm afraid that the best I can do now is to hack the data a bit:

 <div id="chartContainer"> <script src="http://d3js.org/d3.v3.min.js"></script> <script src="/dist/dimple.v1.min.js"></script> <script type="text/javascript"> var svg = dimple.newSvg("#chartContainer", 800, 400); // Data hack required to get revenue and profit on the same axis, units are // arbitrarily allocated to revenue but the values will be summed by date var data = [ {"Month":"01/2013", "Metric":"Revenue", "Revenue/Profit":2000, "Units":4}, {"Month":"02/2013", "Metric":"Revenue", "Revenue/Profit":3201, "Units":3}, {"Month":"03/2013", "Metric":"Revenue", "Revenue/Profit":1940, "Units":5}, {"Month":"04/2013", "Metric":"Revenue", "Revenue/Profit":2500, "Units":1}, {"Month":"05/2013", "Metric":"Revenue", "Revenue/Profit":800, "Units":4}, {"Month":"01/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0}, {"Month":"02/2013", "Metric":"Profit", "Revenue/Profit":2000, "Units":0}, {"Month":"03/2013", "Metric":"Profit", "Revenue/Profit":14000, "Units":0}, {"Month":"04/2013", "Metric":"Profit", "Revenue/Profit":3200, "Units":0}, {"Month":"05/2013", "Metric":"Profit", "Revenue/Profit":1200, "Units":0} ]; var chart = new dimple.chart(svg, data); chart.setBounds(60,20,680,330); // Add your x axis - nothing unusual here var x = chart.addCategoryAxis("x", "Month"); // First y axis is the combination axis for revenue and profit var y1 = chart.addMeasureAxis("y", "Revenue/Profit"); // Second is the units only var y2 = chart.addMeasureAxis("y", "Units"); // Plot the bars first - the order of series determines their dom position // from back to front, this means bars are at the back. It important // to note that the string here "Unit Sales" is NOT in the data. Any string // not in the data is just used to apply a label which can be used for colouring // as it is here and will also appear in tool tips var bars = chart.addSeries("Unit Sales", dimple.plot.bar, [x,y2]); // Use a simple line by metric for the other measures var lines = chart.addSeries("Metric", dimple.plot.line, [x,y1]); // Do a bit of styling to make it look nicer lines.lineMarkers = true; bars.barGap = 0.5; // Colour the bars manually so they don't overwhelm the lines chart.assignColor("Unit Sales", "black", "black", 0.15); x.dateParseFormat = "%m/%Y"; x.addOrderRule("Date"); // Here how you add a legend for just one series. Excluding the last parameter // will include every series or an array of series can be passed to select more than // one chart.addLegend(60, 5, 680, 10, "right", lines); chart.draw(); // Once Draw is called, this just changes the number format in the tooltips which for these particular // numbers is a little too heavily rounded. I assume your real data isn't like this // so you probably won't want this line, but it a useful tip anyway! y1.tickFormat = ",d"; </script> </div> 

This is currently a little limited, but I got the idea of ​​a really good implementation that I can do to add proper support for composite axes like this. I hope this will be possible in the near future.

Good luck.

John