1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/* ------------------------------------------------------------------------------
*
* # Dimple.js - pie with legend
*
* Demo of pie chart with legend. Data stored in .tsv file format
*
* Version: 1.0
* Latest update: August 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function () {
// Construct chart
var svg = dimple.newSvg("#dimple-pie-legend", 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, 100, 5);
// Add axes
// ------------------------------
myChart.addMeasureAxis("p", "Unit Sales");
// Construct layout
// ------------------------------
// Add pie
myChart.addSeries("Owner", dimple.plot.pie);
// 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();
});
});