Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     (Solved)Mouse over function on the entire js chart
Go
New
Search
Notify
Tools
Reply
  
(Solved)Mouse over function on the entire js chart
 Login/Join
 
Member
posted
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
Expert
posted Hide Post
You should be able to use standard drill functionality.

Check the documentation.


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6252 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
Expert
posted Hide Post
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.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6252 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
Expert
posted Hide Post
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.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6252 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
Expert
posted Hide Post
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.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6252 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
Expert
posted Hide Post
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.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6252 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
Expert
posted Hide Post
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.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6252 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Reply With QuoteReport This Post
Member
posted Hide Post
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
 
Posts: 20 | Registered: April 15, 2019Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     (Solved)Mouse over function on the entire js chart

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.