You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.8 KiB
81 lines
1.8 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # Dimple.js - concentric ring
|
||
|
|
*
|
||
|
|
* Demo of concentric ring chart. Data stored in .tsv file format
|
||
|
|
*
|
||
|
|
* Version: 1.0
|
||
|
|
* Latest update: August 1, 2015
|
||
|
|
*
|
||
|
|
* ---------------------------------------------------------------------------- */
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
|
||
|
|
// Construct chart
|
||
|
|
var svg = dimple.newSvg("#dimple-ring-concentric", 420, 300);
|
||
|
|
|
||
|
|
|
||
|
|
// Chart setup
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
d3.tsv("assets/demo_data/dimple/demo_data.tsv", function (data) {
|
||
|
|
|
||
|
|
|
||
|
|
// Create chart
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Define chart
|
||
|
|
var myChart = new dimple.chart(svg, data);
|
||
|
|
|
||
|
|
// Set bounds
|
||
|
|
myChart.setBounds(0, 0, "100%", "100%")
|
||
|
|
|
||
|
|
// Set margins
|
||
|
|
myChart.setMargins(5, 5, 90, 5);
|
||
|
|
|
||
|
|
|
||
|
|
// Add axes
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
myChart.addMeasureAxis("p", "Unit Sales");
|
||
|
|
|
||
|
|
|
||
|
|
// Construct layout
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Outer ring
|
||
|
|
var outerRing = myChart.addSeries("Channel", dimple.plot.pie);
|
||
|
|
|
||
|
|
// Inner ring
|
||
|
|
var innerRing = myChart.addSeries("Price Tier", dimple.plot.pie);
|
||
|
|
|
||
|
|
// Negatives are calculated from outside edge, positives from center
|
||
|
|
outerRing.innerRadius = "-30px";
|
||
|
|
innerRing.outerRadius = "-40px";
|
||
|
|
innerRing.innerRadius = "-70px";
|
||
|
|
|
||
|
|
|
||
|
|
// Add legend
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
var myLegend = myChart.addLegend("100%", 0, 0, "100%", "right");
|
||
|
|
|
||
|
|
|
||
|
|
// Add styles
|
||
|
|
// ------------------------------
|
||
|
|
|
||
|
|
// Font size
|
||
|
|
myLegend.fontSize = "12";
|
||
|
|
|
||
|
|
// Font family
|
||
|
|
myLegend.fontFamily = "Roboto";
|
||
|
|
|
||
|
|
|
||
|
|
//
|
||
|
|
// Draw chart
|
||
|
|
//
|
||
|
|
|
||
|
|
// Draw
|
||
|
|
myChart.draw();
|
||
|
|
});
|
||
|
|
});
|