Snapcharts is a small open source charting library built on top of snap.svg. It is currently a work in progress and should not be used by anyone for anything yet.
You can find the github repository for snapcharts here.
Snapcharts is available under an Apache 2 license.
A bar chart with 2 columns per datapoint.
var options = {
type:'bar',
labels:['jan','feb','mar','apr','may','jun','jul','aug'],
data:[{
values: [0.9, 0.2, 0.4, 0.35, 0.37, 0.50, 0.50,0.50],
color: 'rgba(0,175,255,.5)'
},
{
values: [ 0.10, 0.25, 0.6, 0.7, 0.4, 0.9, 0.7, 0.8],
color: 'rgba(0,255,235,.6)',
}
]
};
var chart = new SnapChart('#bar-chart',options);
A line chart with two data series.
var options = {
type:'line',
labels:['jan','feb','mar','apr','may','jun','jul','aug'],
data:[
{
values: [ 0.90, 0.20, 0.40, 0.35, 0.37, 0.50, 0.50, 0.50],
color: 'rgba(0,175,255,.6)'
},
{
values: [ 0.10, 0.25, 0.6, 0.7, 0.4, 0.9, 0.7, 0.8],
color: 'rgba(0,255,235,.6)'
}
]
};
var chart = new SnapChart('#line-chart',options);
An area chart with overlapping areas.
var options = {
type:'area',
labels:['jan','feb','mar','apr','may','jun','jul','aug'],
data:[
{
values: [0.90,0.20,0.40,0.35,0.37,0.50,0.50,0.50],
color: 'rgba(0,175,255,.3)',
},
{
values: [ 0.10, 0.25, 0.6, 0.7, 0.4, 0.9, 0.7, 0.8],
color: 'rgba(0,255,235,.3)',
}
]
};
var chart = new SnapChart('#area-chart',options);
A pie chart with fill patterns and a legend.
var options = {
type:'pie',
data:[{
name: 'Segment A',
values: [0.1],
color: 'rgba(0,175,255,.6)',
pattern:'triangles'
},
{
name: 'Segment B',
values: [0.2],
color: 'rgba(0,175,255,.4)',
pattern:'stripes'
},
{
name: 'Segment C',
values: [0.255],
color: 'rgba(0,175,255,.2)',
pattern:'dots'
}]
};
var chart = new SnapChart('#pie-chart',options);
var legend = new SnapLegend('#legend',options);