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.