JavaScript charts | Pie charts
Examples
Basic warm theme
Loading...
Javascript code to produce above chart:
var myData = new Array(['Sector 1', 2], ['Sector 2', 1], ['Sector 3', 3], ['Sector 4', 6], ['Sector 5', 8.5], ['Sector 6', 10]);
var colors = ['#FACC00', '#FB9900', '#FB6600', '#FB4800', '#CB0A0A', '#F8F933'];
var myChart = new JSChart('chartid', 'pie');
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setTitleColor('#857D7D');
myChart.setPieUnitsColor('#9B9B9B');
myChart.setPieValuesColor('#6A0000');
myChart.draw();
If you wish to use an external XML file for data and settings, here are the files you can use for the above example:
var myChart = new JSChart('chartid', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?> <JSChart> <dataset type="pie"> <data unit="Sector 1" value="2"/> <data unit="Sector 2" value="1"/> <data unit="Sector 3" value="3"/> <data unit="Sector 4" value="6"/> <data unit="Sector 5" value="8.5"/> <data unit="Sector 6" value="10"/> </dataset> <colorset> <color value="#FACC00"/> <color value="#FB9900"/> <color value="#FB6600"/> <color value="#FB4800"/> <color value="#CB0A0A"/> <color value="#F8F933"/> </colorset> <optionset> <option set="setTitleColor" value="'#857D7D'"/> <option set="setPieUnitsColor" value="'#9B9B9B'"/> <option set="setPieValuesColor" value="'#6A0000'"/> </optionset> </JSChart>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'pie');
myChart.setDataJSON("data.json");
myChart.draw();
{
"JSChart" : {
"datasets" : [
{
"type" : "pie",
"data" : [
{
"unit" : "Sector 1",
"value" : "2"
},
{
"unit" : "Sector 2",
"value" : "1"
},
{
"unit" : "Sector 3",
"value" : "3"
},
{
"unit" : "Sector 4",
"value" : "6"
},
{
"unit" : "Sector 5",
"value" : "8.5"
},
{
"unit" : "Sector 6",
"value" : "10"
}
]
}
],
"colorset" : [
"#FACC00",
"#FB9900",
"#FB6600",
"#FB4800",
"#CB0A0A",
"#F8F933"
],
"optionset" : [
{
"set" : "setTitleColor",
"value" : "'#857D7D'"
},
{
"set" : "setPieUnitsColor",
"value" : "'#9B9B9B'"
},
{
"set" : "setPieValuesColor",
"value" : "'#6A0000'"
}
]
}
}
Custom rainbow theme
Loading...
Code using only Javascript:
var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
var colors = ['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66', '#00FF99', '#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
var myChart = new JSChart('chartid', 'pie');
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setPiePosition(308, 170);
myChart.setPieRadius(95);
myChart.setPieUnitsFontSize(8);
myChart.setPieUnitsColor('#474747');
myChart.setPieValuesColor('#474747');
myChart.setPieValuesOffset(-10);
myChart.setTitleColor('#fff');
myChart.setSize(616, 321);
myChart.setBackgroundImage('path/background.jpg');
myChart.draw();
Code using Javascript and external XML file:
var myChart = new JSChart('chartid', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?> <JSChart> <dataset type="pie"> <data unit="Jan" value="2"/> <data unit="Feb" value="1"/> <data unit="Mar" value="3"/> <data unit="Apr" value="6"/> <data unit="May" value="8"/> <data unit="Jun" value="10"/> <data unit="Jul" value="9"/> <data unit="Aug" value="8"/> <data unit="Sep" value="5"/> <data unit="Oct" value="6"/> <data unit="Nov" value="2"/> <data unit="Dec" value="4"/> </dataset> <colorset> <color value="#FFCC00"/> <color value="#FFFF00"/> <color value="#CCFF00"/> <color value="#99FF00"/> <color value="#33FF00"/> <color value="#00FF66"/> <color value="#00FF99"/> <color value="#00FFCC"/> <color value="#FF0000"/> <color value="#FF3300"/> <color value="#FF6600"/> <color value="#FF9900"/> </colorset> <optionset> <option set="setPiePosition" value="308, 170"/> <option set="setPieRadius" value="95"/> <option set="setPieUnitsFontSize" value="8"/> <option set="setPieUnitsColor" value="'#474747'"/> <option set="setPieValuesColor" value="'#474747'"/> <option set="setPieValuesOffset" value="-10"/> <option set="setTitleColor" value="'#fff'"/> <option set="setSize" value="616, 321"/> <option set="setBackgroundImage" value="'path/background.jpg'"/> </optionset> </JSChart>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'pie');
myChart.setDataJSON("data.json");
myChart.draw();
{
"JSChart" : {
"datasets" : [
{
"type" : "pie",
"data" : [
{
"unit" : "Jan",
"value" : "2"
},
{
"unit" : "Feb",
"value" : "1"
},
{
"unit" : "Mar",
"value" : "3"
},
{
"unit" : "Apr",
"value" : "6"
},
{
"unit" : "May",
"value" : "8"
},
{
"unit" : "Jun",
"value" : "10"
},
{
"unit" : "Jul",
"value" : "9"
},
{
"unit" : "Aug",
"value" : "8"
},
{
"unit" : "Sep",
"value" : "5"
},
{
"unit" : "Oct",
"value" : "6"
},
{
"unit" : "Nov",
"value" : "2"
},
{
"unit" : "Dec",
"value" : "4"
}
]
}
],
"colorset" : [
"#FFCC00",
"#FFFF00",
"#CCFF00",
"#99FF00",
"#33FF00",
"#00FF66",
"#00FF99",
"#00FFCC",
"#FF0000",
"#FF3300",
"#FF6600",
"#FF9900"
],
"optionset" : [
{
"set" : "setPiePosition",
"value" : "308, 170"
},
{
"set" : "setPieRadius",
"value" : "95"
},
{
"set" : "setPieUnitsFontSize",
"value" : "8"
},
{
"set" : "setPieUnitsColor",
"value" : "'#474747'"
},
{
"set" : "setPieValuesColor",
"value" : "'#474747'"
},
{
"set" : "setPieValuesOffset",
"value" : "-10"
},
{
"set" : "setTitleColor",
"value" : "'#fff'"
},
{
"set" : "setSize",
"value" : "616, 321"
},
{
"set" : "setBackgroundImage",
"value" : "'chart_bg.jpg'"
}
]
}
}
Custom B&W theme
Loading...
Code using only Javascript:
var myData = new Array(['S.1', 20], ['S.2', 70], ['S.3', 30], ['S.4', 60], ['S.5', 80], ['S.6', 10]);
var myChart = new JSChart('chartid', 'pie');
var colors = ['#898A89', '#767776', '#676767', '#434443', '#B0B1B0', '#9E9F9E'];
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setPieUnitsOffset(-30);
myChart.setPieUnitsColor('#fff');
myChart.setPieValuesOffset(10);
myChart.setPieValuesColor('#878787');
myChart.setTitleColor('#7A7A7A');
myChart.draw();
Code using Javascript and external XML file:
var myChart = new JSChart('chartid', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?> <JSChart> <dataset type="pie"> <data unit="S.1" value="20"/> <data unit="S.2" value="70"/> <data unit="S.3" value="30"/> <data unit="S.4" value="60"/> <data unit="S.5" value="80"/> <data unit="S.6" value="10"/> </dataset> <colorset> <color value="#898A89"/> <color value="#767776"/> <color value="#676767"/> <color value="#434443"/> <color value="#B0B1B0"/> <color value="#9E9F9E"/> </colorset> <optionset> <option set="setPieUnitsOffset" value="-30"/> <option set="setPieUnitsColor" value="'#fff'"/> <option set="setPieValuesOffset" value="10"/> <option set="setPieValuesColor" value="'#878787'"/> <option set="setTitleColor" value="'#7A7A7A'"/> </optionset> </JSChart>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'pie');
myChart.setDataJSON("data.json");
myChart.draw();
{
"JSChart" : {
"datasets" : [
{
"type" : "pie",
"data" : [
{
"unit" : "S.1",
"value" : "20"
},
{
"unit" : "S.2",
"value" : "70"
},
{
"unit" : "S.3",
"value" : "30"
},
{
"unit" : "S.4",
"value" : "60"
},
{
"unit" : "S.5",
"value" : "80"
},
{
"unit" : "S.6",
"value" : "10"
}
]
}
],
"colorset" : [
"#898A89",
"#767776",
"#676767",
"#434443",
"#B0B1B0",
"#9E9F9E"
],
"optionset" : [
{
"set" : "setPieUnitsOffset",
"value" : "-30"
},
{
"set" : "setPieUnitsColor",
"value" : "'#fff'"
},
{
"set" : "setPieValuesOffset",
"value" : "10"
},
{
"set" : "setPieValuesColor",
"value" : "'#878787'"
},
{
"set" : "setTitleColor",
"value" : "'#7A7A7A'"
}
]
}
}
For details on public methods see Reference.
