(Solved)Mouse over function on the entire js chart

January 21, 2020, 03:56 PM

rkiran1

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,

January 21, 2020, 04:59 PM

Waz

You should be able to use standard drill functionality.

Check the documentation.

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

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.

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

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.

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.

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

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.

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.

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,

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.

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

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

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

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

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

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