StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>EDIT: </p> <p>This is no longer required since version 2. You can now use <a href="http://github.com/PMSI-AlignAlytics/dimple/releases/tag/2.0.0" rel="noreferrer">composite axes</a>.</p> <p>ORIGINAL:</p> <p>I see the problem here, the issue isn't with multiple axes, it is with trying to draw multiple measures against a single axis which Dimple doesn't really support yet. I'm afraid the best I can do for now is a bit of a data hack:</p> <pre><code><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's 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's 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's a useful tip anyway! y1.tickFormat = ",d"; </script> </div> </code></pre> <p>This is currently a bit of a limitation but I've just had an idea for a really good implementation I can do to add proper support for composite axes like this. Hopefully that will be possible in the not too distant future.</p> <p>Good luck</p> <p>John</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload