Created
November 23, 2016 09:05
-
-
Save rayantony/d5fd59323650c395e7e7d91496a2e37a to your computer and use it in GitHub Desktop.
d3 dimples tests
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <div id="chartContainer"> | |
| <script src="/lib/d3.v3.4.8.js"></script> | |
| <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script> | |
| <script type="text/javascript"> | |
| var svg = dimple.newSvg("#chartContainer", 590, 400); | |
| d3.tsv("/data/example_data.tsv", function (data) { | |
| // Fill the SVG background | |
| svg.append("rect") | |
| .attr("x", "8px") | |
| .attr("y", "8px") | |
| .attr("width", "100%") | |
| .attr("height", "100%") | |
| .style("fill", "#2c3e50"); | |
| // Filter for a single SKU and Channel | |
| data = dimple.filterData(data, "SKU", "Theta 18 Pack Standard"); | |
| data = dimple.filterData(data, "Channel", "Hypermarkets"); | |
| // Create and Position a Chart | |
| var myChart = new dimple.chart(svg, data); | |
| myChart.setBounds(60, 30, 500, 300); | |
| var x = myChart.addCategoryAxis("x", "Month") | |
| myChart.addMeasureAxis("y", "Unit Sales"); | |
| // Order the x axis by date | |
| x.addOrderRule("Date"); | |
| // Min price will be green, middle price yellow and max red | |
| myChart.addColorAxis("Price", ["green", "yellow", "red"]); | |
| // Add a thick line with markers | |
| var lines = myChart.addSeries(null, dimple.plot.line); | |
| lines.lineWeight = 5; | |
| lines.lineMarkers = true; | |
| // Draw the chart | |
| myChart.draw(); | |
| }); | |
| </script> | |
| </div> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment