Saprk charts with axis
Created using FusionCharts Suite XT - www.fusioncharts.com
HTML
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.widgets.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Configuring number of major and minor tick marks in a Horizontal Linear Gauge showing Server CPU Utilization using attributes: # majorTMNumber - To add number of ticks needed in major tickmarks # minorTMNumber - To add number of ticks needed in minor tickmarks # adjustTM - Automatically adjust the number of major ticks and their values to a best feasible value if set to 1 Note : Attribute majorTMNumber intensionally set to 9 so as to show how adjustTM automatically adjust it to 10. Deviation from theme # valueFontSize # valueFontBold -->
<div id="chart-container-spark">FusionCharts will render here</div>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var myChart = new FusionCharts({
"type": "sparkcolumn",
"width": "400",
"height": "100",
"renderAt": 'chart-container-spark',
"dataFormat": "json",
"dataSource": {
"chart": {
//"caption": "Revenue by Month",
// "subcaption": "Last year",
"chartTopMargin": "10",
"chartBottomMargin": "10",
"chartRightMargin": "10",
"numberPrefix": "$",
"showBorder": "0",
"canvasBorderThickness": "0",
"bgColor": "#ffffff",
"plotFillColor": "#0075c2",
"highColor": "#1aaf5d",
"lowColor": "#8e0000",
"showHoverEffect": "1",
"chartBottomMargin": "20"
},
"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();
var cpuGauge = new FusionCharts({
type: 'hlineargauge',
renderAt: 'chart-container',
id: 'cpu-linear-gauge',
width: '400',
height: '70',
dataFormat: 'json',
dataSource: {
"chart": {
...