Simple JavaScript & SVG Chart Demo
Bar Chart
m('#bar-chart').barChart({
height: 400,
width:600,
left:50,
bottom:50,
maxBarVal:140,
minBarVal:0,
xAxis: {
text: 'Year',
plotValue: [1951,1961,1971,1981,1991,2001,2011],
},
yAxis: {
text: 'Population in Crore',
plotValueDifference: 20,
plotValue: [36.11,43.93,54.82,68.33,84.64,102.87,121.07],
},
});
Pie Chart
m('#pie-chart').pieChart({
height: 300,
width: 400,
radius:60,
legendWidth: 160,
legendTitle: 'Popular Social Media',
plotValue:[
{
title: 'Facebook',
number: 1790000000,
bgColor: '#4e71a8',
},
{
title: 'YouTube',
number: 1000000000,
bgColor: '#ca3737',
},
{
title: 'Instagram',
number: 500000000,
bgColor: '#e03666',
},
{
title: 'Twitter',
number: 313000000,
bgColor: '#1cb7eb',
},
{
title: 'Reddit',
number: 234000000,
bgColor: '#ff4500',
},
{
title: 'Vine',
number: 200000000,
bgColor: '#00bf8f',
},
]
});