This is a demo of a Waterfall chart where both the data and the labels are being retrieved from CSV data with the CSV reader. The CSV data is embedded in the page.
<script src="RGraph.svg.common.core.js"></script> <script src="RGraph.svg.common.csv.js"></script> <script src="RGraph.svg.bar.js"></script>Put this where you want the chart to show up:
<div id="klkl" style="display: none"> 8,4,7,-6,-5,-3,14 Fred,Rich,Gary,Luis,Olga,Pete,Keanu </div> <div style="width: 750px; height: 300px" id="chart-container"></div> [No canvas support] </div>This is the code that generates the chart:
<script>
//new RGraph.CSV('/sample.csv', function (csv)
new RGraph.CSV('id:klkl', function (csv)
{
/**
* Fetch the first row of the CSV file starting at the second column
*/
var data = csv.getRow(0);
/**
* Fetch the first column which becomes the labels
*/
var labels = csv.getRow(1);
new RGraph.SVG.Waterfall({
id: 'chart-container',
data: data,
options: {
colors: ['Gradient(blue:#66a)', 'Gradient(red:#a66)', 'Gradient(#0f0:#6a6)'],
xaxisLabels: labels,
backgroundGridVlines: false,
backgroundGridBorder: false,
yaxis: false,
xaxis: false,
total: false
}
}).draw();
});
</script>