Focal Point
(Solved)Mouse over function on the entire js chart

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/4217093296

January 21, 2020, 03:56 PM
rkiran1
(Solved)Mouse over function on the entire js chart
Is there a way for a jschart chart to have mouse over to drill down to another report. Presently I use gauge and I have drill down on click of needle, But i need a way to hover over any part of jschart and should drill down to another report.

Thank you.
 ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 0
ON GRAPH SET LOOKGRAPH GAUGE1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
gaugeProperties: {
   startAngle: 135,  
   endAngle: 45,      
   secondaryNeedlesAsMarkers: false,  
   groupLabel: {
      visible: false,
      font: '10pt Sans-Serif',
      color: 'black'
   },
   totalLabel: {
      visible: false,
      font: '10pt Sans-Serif',
      color: 'black',
      numberFormat: 'auto',
   },
   fill: {
      color: 'transparent'   
   },

   needleBase: {
      size: 10,  
      color: 'red',
      border: {
         width: 3,
         color: 'green',
         dash: '1 1'  
      }
   },
   axisWidth: '22%', 
   axisTickLength: '30%', 
   outerBorder: {
      width: '5%', 
      fill: {
         color: '#1f77b4'
      },
      border: {
         width: 0,
         color: 'transparent',
         dash: ''

      }
   }
},
title: {
	text: 'Test',
	visible: true,
	align: 'center',
	font: 'Bold 12pt Trebuchet MS',
	color: 'black',
	tooltip: 'Test',
},
   groupLabel: {
tooltip: 'Test',
   },
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH 

This message has been edited. Last edited by: rkiran1,


Version 8.2.03
Output : HTML, Excel & PDF
January 21, 2020, 04:59 PM
Waz
You should be able to use standard drill functionality.

Check the documentation.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

January 22, 2020, 01:49 PM
rkiran1
Hi Waz,

I couldn't find any drill down function on the entire chart. Is there a sample you could share.

Kiran


Version 8.2.03
Output : HTML, Excel & PDF
January 22, 2020, 02:11 PM
Waz
Add in to the stylesheet this code.

TYPE=DATA, COLUMN=SALES, FOCEXEC={your focexec( + parms)}, $

And you can click on the needle.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

January 23, 2020, 10:09 AM
rkiran1
quote:
TYPE=DATA, COLUMN=SALES, FOCEXEC={your focexec( + parms)}, $

And you can click on the needle.


Hi Waz,
Thank you for the quick response. I have not framed the question properly initially. I am able to drill down on the needle as you suggested but I need to drill down not only on the needle. I need a drill down anywhere on the chart, as the end users are not aware of the drill down present on the needle.

Thanks


Version 8.2.03
Output : HTML, Excel & PDF
January 23, 2020, 02:12 PM
Waz
I'm not sure if you can do this with standard drill functionality. Depend on what TYPEs the chart supports in the stylesheet.

But here is something that I came up with awhile back.

The charting engine support events. The difficult part is adding them in as WebFOCUS does not (as far as I am aware) support them.

-HTMLFORM BEGIN
<script>
function myClickEvent(chtObj) {
alert('time to do something, click on ' + chtObj.chartObjName);
}
</script>
-HTMLFORM END


ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 0
ON GRAPH SET LOOKGRAPH GAUGE1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
gaugeProperties: {
   startAngle: 135,  
   endAngle: 45,      
   secondaryNeedlesAsMarkers: false,  
   groupLabel: {
      visible: false,
      font: '10pt Sans-Serif',
      color: 'black'
   },
   totalLabel: {
      visible: false,
      font: '10pt Sans-Serif',
      color: 'black',
      numberFormat: 'auto',
   },
   fill: {
      color: 'transparent'   
   },

   needleBase: {
      size: 10,  
      color: 'red',
      border: {
         width: 3,
         color: 'green',
         dash: '1 1'  
      }
   },
   axisWidth: '22%', 
   axisTickLength: '30%', 
   outerBorder: {
      width: '5%', 
      fill: {
         color: '#1f77b4'
      },
      border: {
         width: 0,
         color: 'transparent',
         dash: ''

      }
   }
},
title: {
	text: 'Test',
	visible: true,
	align: 'center',
	font: 'Bold 12pt Trebuchet MS',
	color: 'black',
	tooltip: 'Test',
},
   groupLabel: {
tooltip: 'Test',
   },
*END
*GRAPH_JS
});
chart.registerEvent(myClickEvent, 'click', 'chart');
chart.set({
*END
ENDSTYLE
END
-RUN


Please see this post for more information.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

January 23, 2020, 04:16 PM
rkiran1
Thank you this will work for me.

Thank you again for the example and for sharing the post.


Version 8.2.03
Output : HTML, Excel & PDF
January 23, 2020, 04:30 PM
Waz
Please update the title of the thread by editing your first post and adding [SOLVED] to the title


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

January 28, 2020, 01:10 PM
rkiran1
quote:
-HTMLFORM BEGIN
<script>
function myClickEvent(chtObj) {
alert('time to do something, click on ' + chtObj.chartObjName);
}

-HTMLFORM END


ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 0
ON GRAPH SET LOOKGRAPH GAUGE1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
gaugeProperties: {
startAngle: 135,
endAngle: 45,
secondaryNeedlesAsMarkers: false,
groupLabel: {
visible: false,
font: '10pt Sans-Serif',
color: 'black'
},
totalLabel: {
visible: false,
font: '10pt Sans-Serif',
color: 'black',
numberFormat: 'auto',
},
fill: {
color: 'transparent'
},

needleBase: {
size: 10,
color: 'red',
border: {
width: 3,
color: 'green',
dash: '1 1'
}
},
axisWidth: '22%',
axisTickLength: '30%',
outerBorder: {
width: '5%',
fill: {
color: '#1f77b4'
},
border: {
width: 0,
color: 'transparent',
dash: ''

}
}
},
title: {
text: 'Test',
visible: true,
align: 'center',
font: 'Bold 12pt Trebuchet MS',
color: 'black',
tooltip: 'Test',
},
groupLabel: {
tooltip: 'Test',
},
*END
*GRAPH_JS
});
chart.registerEvent(myClickEvent, 'click', 'chart');
chart.set({
*END
ENDSTYLE
END
-RUN


I am running into few more issues. How do I pass WF variables to JS, I have few variables which i need to pass through the url.


Version 8.2.03
Output : HTML, Excel & PDF
January 28, 2020, 01:56 PM
Waz
Where are the variables coming from ?

If they are available at run time, then, you can create js variables in the HTMLFORM BEGIN and END, these can then be referenced.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

January 28, 2020, 04:03 PM
rkiran1
Thank you. I will give it a shot.

Question:
For the registerEvent() how can I find out all the possible object's. Example: chart,annotation,background,yaxis.title

registerEvent(callback, event, object, userInfo, series, group,misc);

I am presently referring your previous post.

Thanks,
KR

This message has been edited. Last edited by: rkiran1,


Version 8.2.03
Output : HTML, Excel & PDF
January 28, 2020, 04:14 PM
Waz
Did you check the link I posted earlier ?

I worked most of this out from www.threedgraphics.com

The emphasis is Worked Out, as there is very little info on this.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

January 29, 2020, 09:17 AM
rkiran1
Yes, I did look into the link. i was able to pass variables and create drill down.

Thank you Waz


Version 8.2.03
Output : HTML, Excel & PDF