FusionCharts - Gallery Example - SparkColumn chart in JavaScript
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<!-- A simple example of SparkColumn chart -->
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function() {
var sparkchart = new FusionCharts({
type: 'sparkcolumn',
renderAt: 'chart-container',
width: '450',
height: '370',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue by Month",
"subcaption": "Last year",
"chartTopMargin": "10",
"chartBottomMargin": "10",
"chartRightMargin": "10",
"numberPrefix": "$",
"baseFontColor": "#ff908",
// "canvasbgcolor":"#04476B",
"canvasbgalpha":"0",
"showBorder": "0",
"canvasBorderThickness": "0",
"bgColor": "#04476B",
"plotFillColor": "#0075c2",
"highColor": "#1aaf5d",
"lowColor": "#8e0000",
"showHoverEffect": "1"
},
"dataset": [{
"data": [{
"value": "783000"
},
{
"value": "601000"
},
{
"value": "515000"
},
{
"value": "315900"
},
{
"value": "388000"
},
{
"value": "433000"
},
{
"value": "910000"
},
{
"value": "798000"
},
{
"value": "483300"
},
{
"value": "562000"
},
{
"value": "359400"
},
{
"value": "485000"
}
]
}]
}
})
.render();
});