Author: | maxday |
---|---|
Views Total: | 1,490 views |
Official Page: | Go to website |
Last Update: | February 27, 2015 |
License: | MIT |
Preview:

Description:
MDMPC is a small JavaScript library used to generate a multiple pie chart using JavaScript and SVG.
How to use it:
Load the MDMPC JavaScript library at the bottom of the web page.
<script src="MDMPC.js"></script>
Create a SVG element for the pie chart.
<svg id="MDMultiplePieChart" width="12cm" height="12cm" viewBox="0 0 1000 1000"> <rect width="1000" height="1000" style="fill:rgb(255,255,255)"> </svg>
Prepare your data following the structure like this:
var data = { category: [{ label: "2012 Summer Olympics medals (20 first countries)", value: "1", color: "#84888E", alpha: "20", category: [ { label: "America", color: "#1ABC9C", category: [{ label: "United States", category: [{ label: "Gold", value: "46", }, { label: "Silver", value: "29", }, { label: "Bronze", value: "29", }] }, { label: "Cuba", category: [{ label: "Gold", value: "5", }, { label: "Silver", value: "3", }, { label: "Bronze", value: "7", }] }, { label: "Jamaica", category: [{ label: "Gold", value: "4", }, { label: "Silver", value: "4", }, { label: "Bronze", value: "4", }] }] }, { label: "Europe", color: "#3498DB", category: [{ label: "Great Britain", category: [{ label: "Gold", value: "29", }, { label: "Silver", value: "17", }, { label: "Bronze", value: "19", }] }, { label: "Russia", category: [{ label: "Gold", value: "24", }, { label: "Silver", value: "25", }, { label: "Bronze", value: "32", }] }, { label: "Germany", category: [{ label: "Gold", value: "11", }, { label: "Silver", value: "19", }, { label: "Bronze", value: "14", }] }, { label: "France", category: [{ label: "Gold", value: "11", }, { label: "Silver", value: "11", }, { label: "Bronze", value: "12", }] }, { label: "Italy", category: [{ label: "Gold", value: "8", }, { label: "Silver", value: "9", }, { label: "Bronze", value: "11", }] }, { label: "Hungary", category: [{ label: "Gold", value: "8", }, { label: "Silver", value: "4", }, { label: "Bronze", value: "6", }] }, { label: "Netherlands ", category: [{ label: "Gold", value: "6", }, { label: "Silver", value: "6", }, { label: "Bronze", value: "8", }] }, { label: "Ukraine", category: [{ label: "Gold", value: "6", }, { label: "Silver", value: "5", }, { label: "Bronze", value: "9", }] }, { label: "Czech Republic", category: [{ label: "Gold", value: "4", }, { label: "Silver", value: "3", }, { label: "Bronze", value: "3", }] }] }, { label: "Asia", color: "#9B59B6", category: [{ label: "China", category: [{ label: "Gold", value: "38", }, { label: "Silver", value: "27", }, { label: "Bronze", value: "19", }] }, { label: "South Korea", category: [{ label: "Gold", value: "13", }, { label: "Silver", value: "8", }, { label: "Bronze", value: "7", }] }, { label: "Kazakhstan", category: [{ label: "Gold", value: "7", }, { label: "Silver", value: "1", }, { label: "Bronze", value: "5", }] }, { label: "Iran", category: [{ label: "Gold", value: "4", }, { label: "Silver", value: "5", }, { label: "Bronze", value: "3", }] }, { label: "Japan", category: [{ label: "Gold", value: "7", }, { label: "Silver", value: "14", }, { label: "Bronze", value: "17", }] }, { label: "North Korea", category: [{ label: "Gold", value: "4", }, { label: "Silver", value: "0", }, { label: "Bronze", value: "2", }] }] }, { label: "Oceania", color: "#F1C40F", category: [{ label: "Australia", category: [{ label: "Gold", value: "7", }, { label: "Silver", value: "16", }, { label: "Bronze", value: "12", }] }, { label: "New Zealand", category: [{ label: "Gold", value: "6", }, { label: "Silver", value: "2", }, { label: "Bronze", value: "5", }] }] } ] }] };