FusionCharts - Loading external images as Anchors in Line Chart
Created using FusionCharts Suite XT - www.fusioncharts.com
by Vishalika
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/themes/fusioncharts.theme.fint.js"></script>
<!--
Loading external images as Anchors for XY plot chart.
# anchorImageUrl
-->
<div id="chart-container">FusionCharts will render here</div>
CSS
body {
padding: 10px;
}
JavaScript
FusionCharts.ready(function () {
var ratingsChart = new FusionCharts({
type: 'zoomline',
renderAt: 'chart-container',
width: '500',
height: '300',
dataFormat: 'json',
dataSource:{
"chart":
{
"showvalues":"0",
"caption":"Function Space Utilization",
"xaxisname":"Actual Utilization",
"yaxisname":"%",
"pyaxisname":"FS Forecast Utilization",
"syaxisname":"FS Forecast Utilization",
"chartRightMargin":52,
"paletteThemeColor":"5599BB",
"showBorder":"1",
"formatNumber":"0",
"formatnumberscale":"0"
},
"vTrendlines":
[
{
"line":
[
{
"startIndex":"9",
"displayValue":"System Today",
"color":"009933",
"dashed":"1",
"showOnTop":"1"
}
]
}
],
"categories":
[{
"category":
[{
"label":"Sat 01-Mar-2014"
},
{"label":"Sun 02-Mar-2014"},
{"label":"Mon 03-Mar-2014"},
{"label":"Tue 04-Mar-2014"},
{"label":"Wed 05-Mar-2014"},
{"label":"Thu 06-Mar-2014"},
{"label":"Fri 07-Mar-2014"},
{"label":"Sat 08-Mar-2014"},
{"label":"Sun 09-Mar-2014"},
{"label":"Mon 10-Mar-2014"},
{"label":"Tue 11-Mar-2014"},
{"label":"Wed 12-Mar-2014"},
{"label":"Thu 13-Mar-2014"},
{"label":"Fri 14-Mar-2014"},
{"label":"Sat 15-Mar-2014"},
{"label":"Sun 16-Mar-2014"},
{"label":"Mon 17-Mar-2014"},
{"label":"Tue 18-Mar-2014"},
{"label":"Wed 19-Mar-2014"},
{"label":"Thu 20-Mar-2014"},
{"label":"Fri 21-Mar-2014"},
{"label":"Sat 22-Mar-2014"},
{"label":"Sun 23-Mar-2014"},
{"label":"Mon 24-Mar-2014"},
{"label":"Tue 25-Mar-2014"},
{"label":"Wed 26-Mar-2014"},
{"label":"Thu 27-Mar-2014"},
{"label":"Fri 28-Mar-2014"},
{"label":"Sat 29-Mar-2014"},
{"label":"Sun 30-Mar-2014"},
{"label":"Mon...