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>
You can download above example if you login using your JumpeyeComponents account here.
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>
You can download above example if you login using your JumpeyeComponents account here.
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>
You can download above example if you login using your JumpeyeComponents account here.
For details on public methods see Reference.