Hello, I have a MSLine chart using validated JSON. This works fine using the flash but when I try to render it in javascript it errors.
If I use
myChart.setJSONUrl("ReceiptsMSLine.json");
I get invalid data error
If i use
myChart.setJSONData('MyJson');
I get the error:
Line: 15 Error: Unable to get value of the property 'split': object is null or undefined
Any help would be greatly appreciated.
code is below:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Financial Chart</title>
<script src="../../Charts/FusionCharts_EnterpriseEx/Charts/FusionCharts.js" type="text/javascript"></script>
<script src="../../Charts/FusionCharts_EnterpriseEx/Charts/jquery.min.js" type="text/javascript"></script>
<script src="../../Charts/FusionCharts_EnterpriseEx/Charts/highcharts.js" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="chartContainer">FusionCharts will load here</div>
<script type="text/javascript"><!--
FusionCharts.setCurrentRenderer('javascript');
var myChart = new FusionCharts("../../Charts/FusionCharts_EnterpriseEx/Charts/MSLine.swf", "ChartId", "800", "500", "0", "0");
//myChart.setJSONUrl("ReceiptsMSLine.json");
myChart.setJSONData('{"chart":{ "caption":"Receipts - cumulative", "xaxisname":"Month", "yaxisname":"Receipts £", "showvalues":"0", "numberprefix": "%A3", "bgColor":"ffffff", "showBorder":"0","numVDivLines":"10","reverseLegend":"1"},"categories":[{"category":[{"label":"Apr"},{"label":"May"},{"label":"Jun"},{"label":"Jul"},{"label":"Aug"},{"label":"Sep"},{"label":"Oct"},{"label":"Nov"},{"label":"Dec"},{"label":"Jan"},{"label":"Feb"},{"label":"Mar"}]}],"dataset":[{"seriesname":"Monthly Plan","color": "af292e","data":[{"value":"9378010"},{"value":"71026533"},{"value":"90101266"},{"value":"97825351"},{"value":"103616222"},{"value":"117813441"},{"value":"128052071"},{"value":"136053732"},{"value":"149482740"},{"value":"156552766"},{"value":"162577528"},{"value":"313978555"}]},{"seriesname":"DEL Forecast","color":"00857e","dashed":"1","data":[{"value":""},{"value":""},{"value":""},{"value":""},{"value":""},{"value":""},{"value":""},{"value":""},{"value":"211006263"},{"value":"230506969"},{"value":"247861703"},{"value":"324894030"}]},{"seriesname":"Actual YTD","color":"00857e","data":[{"value":"8305075"},{"value":"69262137"},{"value":"84307885"},{"value":"99994631"},{"value":"119527041"},{"value":"142661942"},{"value":"160449790"},{"value":"180489689"},{"value":"211006263"},{"value":""},{"value":""},{"value":""}]}],"styles":[{"definition":[{"style":[{"name":"CanvasAnim","type":"animation","param":"_xScale","start":"0","duration":"1"}]}],"application":[{"apply":[{"toobject":"Canvas","styles":"CanvasAnim"}]}]}]}');
myChart.render("chartContainer" );
</script>
</div>
</body>
</html>