Overide High Chart options

General discussions

Moderators: Bob Cergol, Data Access, Cintac

Overide High Chart options

Postby cavillafuerte » Tue Jun 05, 2012 5:45 pm

I am wanting to override some of the high chart options by using custom javascript in the rules tab but not having luck. Example, I have a report named 'Class' and by default the chart that is created will also use 'Class' as the title of the chart. When I insert the following custom javascript I expect the name of the chart to change but it remains as the name of the report. Is this by default and can't be changed?

Highcharts.setOptions({

title:{
text: 'Class - Spring'
},

});

I know I can change the chart title by changing the name of the report but using the rules tab to use my own javascript and manipulate the high charts is a huge plus for me. There are other times where my custom javascript doesn't override the current chart so just wondering if there are certain things that cannot be overridden?
cavillafuerte
 
Posts: 32
Joined: Fri Dec 02, 2011 8:43 pm

Re: Overide High Chart options

Postby admin » Wed Jun 06, 2012 1:44 pm

If you look at the html source of the report, you may see that the title Dynamic AI sets is written after the js section that your js is in. In this case, you'd need to defer your script to after page load is complete.

Let me know if that is the case, and I will try to find a working solution for you.

Best regards

Bo
User avatar
admin
Certified Dynamic AI Professional
 
Posts: 177
Joined: Thu Jan 01, 1970 1:00 am
Location: Copenhagen, Denmark

Re: Overide High Chart options

Postby cavillafuerte » Wed Jun 06, 2012 3:56 pm

Thanks for the info Bo. I have looked at the source for the report and my custom js is actually written after the DAI js options. I have copied the code showing this. In my custom js I am trying to change the title of the chart and disable datalabels. Neither is working.


</DIV></TD></TR><!-- DIV AROUNDTABLE END--><!-- CLOSE TABBLE A CLOSE TABLE B--></TABLE></TD></TR></TABLE></SPAN><!-- CCSPAN A --><SPAN CLASS='CCSPAN'><!-- SPAN 2 --><TABLE><TR ID='MAINGraphArea'><TD valign=top align='Center'><div id="container1" style='height: 400px; margin: 10 auto;'></div><script language=javascript>var chart1; $(document).ready(function() { chart1 = new Highcharts.Chart({ chart: { renderTo:'container1', spacingBottom: 10, defaultSeriesType: 'bar'}, credits: {enabled: false}, title: {text: 'Class', style: {font: 'bold 16px Verdana, Helvetica, sans-serif'}},subtitle: {text: ''},legend: {itemStyle: {fontSize: '10px'}},xAxis: { categories: ['Adria Rault' ],labels: {align:'right', style: {font: 'normal 9px Verdana, sans-serif'}}},yAxis: { title: { text: null },labels: { style: {font: 'normal 9px Verdana, sans-serif'}, formatter: function() {return Highcharts.numberFormat(this.value, 0, null, ',');}}},tooltip: { formatter: function() { return this.series.name +' <b>'+Highcharts.numberFormat(this.y, 0, null, ',') +'</b><br/>'+ this.x+'<br/>';}},plotOptions: { area: {pointStart: 0, marker: { enabled: false, symbol: 'circle', radius: 2, states: { hover: { enabled: true }}}}, line: {dataLabels: {enabled: true},enableMouseTracking: true}, spline: {dataLabels: {enabled: true}, enableMouseTracking: true}, pie: {allowPointSelect: true, cursor:'pointer', dataLabels: { enabled: true, formatter: function() { if (this.percentage > 5) return Highcharts.numberFormat(this.percentage, 0, null, ',')+'%'; }, color: 'black', style: {font: '10px Trebuchet MS, Verdana, sans-serif'}}},series: {groupPadding: 0,}},series: [{name: 'Spring Average AVG', data: [{name: 'Adria Rault', y:3} ],dataLabels: {enabled: true,color: '#FFFFFF',align:'right',x: -30, formatter: function() {return Highcharts.numberFormat(this.y, 0, null, ',');},style: {font: 'normal 9px Verdana, sans-serif'}}}, {name: 'PSSD Spring Average AVG', data: [{name: 'Adria Rault', y:4} ],dataLabels: {enabled: true,color: '#FFFFFF',align:'right',x: -30, formatter: function() {return Highcharts.numberFormat(this.y, 0, null, ',');},style: {font: 'normal 9px Verdana, sans-serif'}}}] }); });</script></TD></TR></TABLE></SPAN><!-- SPAN 2 --></FIELDSET></DIV><!-- FIELDSET DIV--><BR CLEAR=LEFT><TABLE width='100%' style='margin-top:10px;border-top:1px solid gainsboro;'><TR CLASS=DAIFOOTERLINE ID='MAINDynamicAIArea'><TD width='20%' valign=middle CLASS='DAIFOOT'>Dynamic AI &#153;</TD><TD align=center width='60%' valign=middle CLASS='REPFOOT'>END OF PAGE - GENERATED 08:47 at 2012-06-06 by DAI Administrator<BR>(1568 v12) 2011 Equality Data \ Spring \ Class</TD><TD align=right width='20%' valign=bottom style='text-align:right;padding-right:10px;'><img src='./images/daihome2.gif'></TD></TR></TABLE><script language=javascript>try{var frameset = parent.document.getElementById('DAS');frameset.rows = '*,0,0';} catch(e) {}</script></BODY><SCRIPT language=Javascript>try{if(parent.document.getElementById('DAS')==null) { var baset=document.getElementsByTagName('base');baset[1].target='_self';}} catch(e) {}</SCRIPT><SCRIPT language=Javascript>var rootsrcdoc=0;</SCRIPT><SCRIPT LANGUAGE='JavaScript'>Highcharts.setOptions({


title: {
text: 'Class - Spring'
},
plotOptions: {
series: {
dataLabels: {
enabled: false
}
}
},


});</SCRIPT><SCRIPT Language=Javascript>var udfrm;var GdaysOfWeek;var Gmonths;var drC=true;var bbr=3;var ufrmID='RADM99298346610021';//DAI_DRI
var ddri=-1; var ddre=0;var expall=0;var combmode=0;var PlistFiller=0;var targ2='';var targ='';var drC=true;</SCRIPT><SCRIPT LANGUAGE=JAVASCRIPT SRC='./images/fnc6_4_25.js'></SCRIPT> <SCRIPT language=Javascript>initObjfi();initfi();</SCRIPT><DIV CLASS=DROPTA onmouseleave="this.style.display='none';try{document.getElementById('AIChart1').style.visibility='visible';} catch(e) {};" style='display:none;text-align:left;position:absolute;' ID=CLd></DIV><SCRIPT LANGUAGE=JAVASCRIPT>var frOp=0;var CldPickedUp = false;function ddx(ac) {RADM99298346610021.document.location.href='dnmc.asp?D_=39313536385F32312626307C5E217B546561636865724E616D657D214164726961205261756C74'+ac;}var bbr=2;var lidd=document.all.CLd;var plistTF=false;var BL47=0;var ListL=0;function chkt1(t) {if(t.value=='Click on Total column headers and combine with + - / * ().') {t.value='';t.style.color='black';t.style.fontStyle='normal';}}function chkt2(t) {if(t.value=='Click on Totals and Sub-totals and combine with + - / * ().') {t.value='';t.style.color='black';t.style.fontStyle='normal';}}var sp2;try{parent.DASTOOLB.document}catch(e){RADM99298346610021.location.href='default.asp?FRW=DROPD';sp2=1;}function drpfi(idt, i, deci, atr, ob) {try{document.getElementById('DROPTAB').style.display='none'} catch(e) {};if (sp2 == 1) {if (!CldPickedUp) {document.getElementById('CLd').innerHTML=RADM99298346610021.document.getElementById('CLd').innerHTML;CldPickedUp=true;}} else {if (!CldPickedUp) {document.getElementById('CLd').innerHTML=parent.DASTOOLB.document.getElementById('CLd').innerHTML;CldPickedUp=true;}}document.getElementById('dd25a').style.display='none';document.getElementById('dd26a').style.display='none';document.getElementById('dd27a').style.display='none';document.getElementById('dd28a').style.display='none';document.getElementById('dd29a').style.display='none';obid=ob;obidt=idt;var extral;if (fiIsOp) {return;}var ci=ogg.cellIndex+ogg.colSpan-1;var tmpwhcc='1_'+idt+i;if (tmpwhcc!=whcc) {lidd.style.display='none';} setdrpdwn(atr);whcc='1_'+idt+i;lidd.style.left=rtLeb(ob)+2;lidd.style.top=rtTob(ob)+ob.offsetHeight-1;if(lidd.style.display=='none') {try{document.getElementById('AIChart1').style.visibility='hidden';} catch(e) {};lidd.style.display='';lilev='3D'+deci;} else {lilev='';lidd.style.display='none';try{document.getElementById('AIChart1').style.visibility='visible';} catch(e) {};}}function drpfiHid() {if (whccl=='') {return};var deco='264348'+whccl.slice(0,whccl.indexOf('_'));ddx(deco);try{document.all.DAIUNDO.style.display='';} catch(e) {};whccl='';event.cancelBubble=true;return false;}var asb;var oldtarg = document.BB.target;var gro;var dro;var COLLA=false;var LIGG=false;function nem(act){document.BB.target='RADM99298346610021'; if(document.all.DROUT.className=='MOLNEWCHECKED'){dro=1;}else{dro=0;};if (act=='PDF' && LIGG==true) {act=act+'L';} if (act=='PDF') {if (COLLA==false) {act=act+'E';}} if(document.all.GRPEA.className=='MOLNEWCHECKED'){gro=1;}else{gro=0;};document.BB.AM_.value=act+dro+gro; document.BB.submit();document.BB.AM_.value='';document.BB.target=oldtarg;}function selnext() { document.BB.target='_self';document.body.focus();document.BB.CON_.value='';document.BB.submit();document.BB.DAIGO.disabled=true;document.BB.DAIAI.disabled=true;return false;} </SCRIPT></HTML>
cavillafuerte
 
Posts: 32
Joined: Fri Dec 02, 2011 8:43 pm

Re: Overide High Chart options

Postby admin » Thu Jun 07, 2012 11:00 am

To change the title:
you can enter the following js:
Code: Select all
$(document).ready(function(){
        chart1.setTitle({text: "New Title"});
});

Highcharts already uses jquery, so this is all you need. My example with your chart (copied from this post is here: http://jsfiddle.net/BoAndersen/MDFjq/3/

I am not sure I know which labels you want to remove, but if you look at the source in jsfiddle (link above) you may be able to see which parameters to change and then put the relevant extra line of code in your js section.

Let me know if I can be of help.
Best regards
Bo
User avatar
admin
Certified Dynamic AI Professional
 
Posts: 177
Joined: Thu Jan 01, 1970 1:00 am
Location: Copenhagen, Denmark


Return to General discussions

cron