An SVG Line chart showing revenue over time
This goes in the documents header:
<script src="../libraries/RGraph.svg.common.core.js" ></script>
<script src="../libraries/RGraph.svg.line.js" ></script>
Put this where you want the chart to show up:
<div style="width: 950px; height: 250px" id="chart-container"></div>
This is the code that generates the chart:
<script>
data = [500,600,800,720,900,1100];
line = new RGraph.SVG.Line({
id: 'chart-container',
data: data,
options: {
colors: ['#00AD4B'],
linewidth: 5,
backgroundGrid: false,
xaxisLabels: ['Febuary','March','April','May','June','July'],
backgroundGridColor: '#999',
hmargin: 50,
tickmarksStyle: 'circle',
tickmarksSize: 8,
textSize: 18,
marginLeft: 75
}
}).draw();
label = RGraph.SVG.numberFormat({
num: line.data[0][line.data[0].length - 1],
thousand: ','
});
// Add the label above the last point
RGraph.SVG.text({
object: line,
x: line.coords[line.coords.length - 1].x,
y: line.coords[line.coords.length - 1].y - 25,
text: label,
valign: 'bottom',
halign: 'center',
size: 20,
bold: true
});
</script>