pdf - Why do I get a null reference error when I export Highcharts? -
what error mean? happens when download format in highcharts, pdf, image..has encountered before?
unhandled exception @ line 41, column 33 in http://localhost/scripts/customevents.js 0x800a138f - javascript runtime error: unable property 'on' of undefined or null reference here scripts
<%--add high chart css , js here.--%> <script type="text/javascript" src="scripts/highcharts.js"></script> <script type="text/javascript" src="scripts/exporting.js"></script> <script type="text/javascript" src="scripts/data.js"></script> <script type="text/javascript" src="scripts/customevents.js"></script> <link rel="stylesheet" type="text/css" href="css/iestyle.css"> i tried different ways export point same error..how fix ?
after going basic of code , demo in highcharts, turns out click event 'download' button triggered in customevents.js instead of exporting.js. after removed reference customevents.js, download button worked again. not solution need customevents mouseover, hence, bug highcharts customevents plugin.
<script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/data.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script> <script src="http://blacklabel.github.io/custom_events/customevents.js"></script> <script type="text/javascript"> $(function () { var categoryimgs = { 'banana': '<img src="/images/2.png"><img> ', 'orange': '<img src="/images/8.png"><img> ', 'fruit': '<img src="/images/12.png"><img> ', 'apple': '<img src="/images/4.png"><img> ', 'coconut': '<img src="/images/3.png"><img> ' }; var totals = new array(); var stacktotals = new array(); var = 5, j = 0; //totals = highchartsadapter function reverse() { totals.reverse(); } $('#container').highcharts({ chart: { type: 'column' }, title: { text: 'premium summary' }, xaxis: { categories: ['banana', 'fruit', 'orange', 'apple', 'coconut'], labels: { x: 5, usehtml: true, formatter: function () { var n = totals.shift(); return '<div class="stacktotal">$' + n + '</div><div id="div1" class="mytooltip' + this.value + '">' + categoryimgs[this.value] + '</div>'; }, events: { mouseover: function (e) { var elm = e.currenttarget.children.div1.classname; switch (elm) { case "mytooltipbanana": document.getelementbyid('hoverboard').style.display = "block"; $('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/2.png"><img> <div class="desc">39 year old female non smoker - occupation class 1</div><table>' + '<tr><td><b>jam</b><span id="italics"> (2 week wait)</td><td>$80,000</td><td class="pad">$89</td></tr>' + '<tr><td><b>fruit</b><span id="italics"> (2 week wait)</td><td>-</td><td class="pad">$150</td></tr>' + '<tr><td><b>candy</b></td><td>nil excess</td><td class="pad">$150</td></tr>' + '<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">boxes</span></td><td></td><td class="pad">$200.12</td></tr>' + '<tr bgcolor="#edf7f7"><td style="font-size:14px;"><b>total premium (monthly)</b></td><td></td><td class="pad"><b>$514.55<b></td></tr>' + '</table>'); break; case "mytooltipfruit": document.getelementbyid('hoverboard').style.display = "block"; $('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/8.png"><img> <div class="desc">39 year old female non smoker - occupation class 1</div><table>' + '<tr><td><b>jam</b><span id="italics"> (2 week wait)</td><td>$80,000</td><td class="pad">$400</td></tr>' + '<tr><td><b>fruit</b><span id="italics"> (2 week wait)</td><td>-</td><td class="pad">$186.76</td></tr>' + '<tr><td><b>candy</b></td><td>nil excess</td><td class="pad">$210.23</td></tr>' + '<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">boxes</span></td><td></td><td class="pad">$290</td></tr>' + '<tr bgcolor="#edf7f7"><td style="font-size:14px;"><b>total premium (monthly)</b></td><td></td><td class="pad"><b>$1086.99<b></td></tr>' + '</table>'); break; case "mytooltiporange": document.getelementbyid('hoverboard').style.display = "block"; $('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/12.png"><img> <div class="desc">39 year old female non smoker - occupation class 1</div><table>' + '<tr><td><b>jam</b><span id="italics"> (2 week wait)</td><td>$80,000</td><td class="pad">$258.13</td></tr>' + '<tr><td><b>fruit</b><span id="italics"> (2 week wait)</td><td>-</td><td class="pad">$150</td></tr>' + '<tr><td><b>candy</b></td><td>nil excess</td><td class="pad">$143.50</td></tr>' + '<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">boxes</span></td><td></td><td class="pad">$45.78</td></tr>' + '<tr bgcolor="#edf7f7"><td style="font-size:14px;"><b>total premium (monthly)</b></td><td></td><td class="pad"><b>$597.41<b></td></tr>' + '</table>'); break; case "mytooltipapple": document.getelementbyid('hoverboard').style.display = "block"; $('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/3.png"><img> <div class="desc">39 year old female non smoker - occupation class 1</div><table>' + '<tr><td><b>jam</b><span id="italics"> (2 week wait)</td><td>$80,000</td><td class="pad">$212</td></tr>' + '<tr><td><b>fruit</b><span id="italics"> (2 week wait)</td><td>-</td><td class="pad">$200</td></tr>' + '<tr><td><b>candy</b></td><td>nil excess</td><td class="pad">$219</td></tr>' + '<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">boxes</span></td><td></td><td class="pad">$71</td></tr>' + '<tr bgcolor="#edf7f7"><td style="font-size:14px;"><b>total premium (monthly)</b></td><td></td><td class="pad"><b>$702<b></td></tr>' + '</table>'); break; case "mytooltipcoconut": document.getelementbyid('hoverboard').style.display = "block"; $('#hoverboard').html('<img style="padding-left:7px; padding-bottom: 30px" src="/images/4.png"><img> <div class="desc">39 year old female non smoker - occupation class 1</div><table>' + '<tr><td><b>jam</b><span id="italics"> (2 week wait)</td><td>$80,000</td><td class="pad">$152</td></tr>' + '<tr><td><b>fruit</b><span id="italics"> (2 week wait)</td><td>-</td><td class="pad">$100</td></tr>' + '<tr><td><b>candy</b></td><td>nil excess</td><td class="pad">$143</td></tr>' + '<tr><td colspan="3" class="pad" ><hr /></td></tr><tr><td><span id="policy">boxes</span></td><td></td><td class="pad">$120</td></tr>' + '<tr bgcolor="#edf7f7"><td style="font-size:14px;"><b>total premium (monthly)</b></td><td></td><td class="pad"><b>$515<b></td></tr>' + '</table>'); break; } }, mouseout: function () { document.getelementbyid('hoverboard').style.display = "none"; $('#hoverboard').html(''); } }, } }, linkedto: 0, categories: ['banana', 'fruit', 'orange', 'apple', 'coconut'], yaxis: { min: 0, title: { text: '' }, labels: { formatter: function () { return '$' + this.value; } }, stacklabels: { enabled: true, style: { fontweight: 'bold', color: (highcharts.theme && highcharts.theme.textcolor) || 'black', }, formatter: function () { totals[i++] = this.total; return ''; }, } }, legend: { align: 'right', x: -70, verticalalign: 'top', y: 20, floating: true, backgroundcolor: (highcharts.theme && highcharts.theme.legendbackgroundcolorsolid) || 'white', bordercolor: '#ccc', borderwidth: 1, shadow: false }, tooltip: { formatter: function () { return this.series.name + ', ' + this.x + ', ' +' $'+ this.y + '<br/>'; } }, plotoptions: { column: { stacking: 'normal', borderwidth:0, datalabels: { enabled: true, color: (highcharts.theme && highcharts.theme.datalabelscolor) || 'black', style: { textshadow: '0 0 3px black, 0 0 3px black' }, format: '${y}' } } }, series: [{ name: 'jam', y:'$' + this.value, data: [200.12, 290, 45.78, 71, 120], color: '#b9b6ba', }, { name: 'fruit', data: [150, 186.76, 150, 200, 100], color: '#e5764c' }, { name: 'candy', data: [89,400, null , 212, 152], color: '#9d8365' }, { name: 'boxes', data: [75.43, 210.23, 143.50, 219, 143], color: '#9f7ac3' } ] }); }); </script>
Comments
Post a Comment