User:JSeddon~foundationwiki/chart: Difference between revisions
Content deleted Content added
Seddon (WMF) (talk | contribs) Created page with "<html> <head></head> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <div id="pieChart"></div> <script> var pie = new d3pie("pieChart", { "header": { "title":..." |
Seddon (WMF) (talk | contribs) Blanked the page Tag: Blanking |
||
| Line 1: | Line 1: | ||
<html> |
|||
<head></head> |
|||
<body> |
|||
<script src="https://d3js.org/d3.v4.min.js"></script> |
|||
<div id="pieChart"></div> |
|||
<script> |
|||
var pie = new d3pie("pieChart", { |
|||
"header": { |
|||
"title": { |
|||
"text": "Test", |
|||
"fontSize": 22, |
|||
"font": "verdana" |
|||
}, |
|||
"subtitle": { |
|||
"text": "Test", |
|||
"color": "#999999", |
|||
"fontSize": 10, |
|||
"font": "verdana" |
|||
}, |
|||
"titleSubtitlePadding": 12 |
|||
}, |
|||
"footer": { |
|||
"text": "Test", |
|||
"color": "#999999", |
|||
"fontSize": 11, |
|||
"font": "open sans", |
|||
"location": "bottom-center" |
|||
}, |
|||
"size": { |
|||
"canvasHeight": 400, |
|||
"canvasWidth": 590, |
|||
"pieOuterRadius": "88%" |
|||
}, |
|||
"data": { |
|||
"content": [ |
|||
{ |
|||
"label": "Test", |
|||
"value": 8, |
|||
"color": "#7e3838" |
|||
}, |
|||
{ |
|||
"label": "Test", |
|||
"value": 5, |
|||
"color": "#7e6538" |
|||
}, |
|||
{ |
|||
"label": "Test", |
|||
"value": 2, |
|||
"color": "#7c7e38" |
|||
}, |
|||
{ |
|||
"label": "Test", |
|||
"value": 3, |
|||
"color": "#587e38" |
|||
}, |
|||
{ |
|||
"label": "Test", |
|||
"value": 2, |
|||
"color": "#387e45" |
|||
}, |
|||
{ |
|||
"label": "Test", |
|||
"value": 1, |
|||
"color": "#387e6a" |
|||
}, |
|||
{ |
|||
"label": "Test", |
|||
"value": 3, |
|||
"color": "#386a7e" |
|||
} |
|||
] |
|||
}, |
|||
"labels": { |
|||
"outer": { |
|||
"pieDistance": 32 |
|||
}, |
|||
"inner": { |
|||
"format": "value" |
|||
}, |
|||
"mainLabel": { |
|||
"font": "verdana" |
|||
}, |
|||
"percentage": { |
|||
"color": "#e1e1e1", |
|||
"font": "verdana", |
|||
"decimalPlaces": 0 |
|||
}, |
|||
"value": { |
|||
"color": "#e1e1e1", |
|||
"font": "verdana" |
|||
}, |
|||
"lines": { |
|||
"enabled": true, |
|||
"color": "#cccccc" |
|||
}, |
|||
"truncation": { |
|||
"enabled": true |
|||
} |
|||
}, |
|||
"effects": { |
|||
"pullOutSegmentOnClick": { |
|||
"effect": "linear", |
|||
"speed": 400, |
|||
"size": 8 |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
</body> |
|||
</html> |
|||