Is it possible to make the labels clickable?

I have an issue where we have charts that some are low in numbers, where others are very high in numbers.

I need the bottom or the counts at the top of each graph clickable.

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

Gavin, I don't know if what you are requesting is feasible.

But what I usually do (especially with pie chart that may have very tiny slices) it's to have an intermediary report which is a plain HTML tabular that displays x-axis (BY) and y-axis (SUM) values with a drill down on the x-axis.
No matter which bar/slice you click, the result is the same so no user frustration because he can't get the proper bar/slice

This way the user can see all the values even if the min/max range is very large and then he can click on the value he wants to drill deeper.

I know that it's another click prior to have the desired drill, but it's an option.

I also use that to give the opportunity to the user to extract the intermediary report (tabular report) either in Excel or PDF.

Sample:

-* Report 1
GRAPH FILE CAR
SUM SEATS
BY COUNTRY
ON GRAPH PCHOLD FORMAT PNG
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET VZERO OFF
ON GRAPH SET HAXIS 770
ON GRAPH SET VAXIS 405
ON GRAPH SET UNITS PIXELS
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET GRAPHSTYLE *
setTemplateFile("/images/tdg/template/IBISouthWestern.txt");
setReportParsingErrors(false);
setSelectionEnableMove(false);
setTransparentBorderColor(getChartBackground(),true);
setTransparentBorderColor(getSeries(0),true);
setTransparentBorderColor(getSeries(1),true);
setTransparentBorderColor(getSeries(2),true);
setTransparentBorderColor(getSeries(3),true);
setTransparentBorderColor(getSeries(4),true);
setTransparentBorderColor(getSeries(5),true);
setTransparentBorderColor(getSeries(6),true);
setTransparentBorderColor(getSeries(7),true);
setTransparentBorderColor(getSeries(8),true);
setTransparentBorderColor(getSeries(9),true);
setTransparentBorderColor(getSeries(10),true);
setPlace(true);
setDepthRadius(0);
setDepthAngle(0);
ENDSTYLE
ON GRAPH SET STYLE *
TYPE=DATA, COLUMN=N2, FOCEXEC=report2, $
ENDSTYLE
END
-RUN

-* Report 2
-DEFAULT &WFFMT = 'HTML'
-SET &RANDOM      = RDUNIF(D5) * RDUNIF(D5) * 10000;

TABLE FILE CAR
SUM SEATS
    COMPUTE PDF_EXPRT/A150 = '<IMG SRC="file:\\localhost\pdf_small.gif" style="border-style: none;" alt="' || 'PDF' || '">'; NOPRINT
    COMPUTE EXL_EXPRT/A150 = '<IMG SRC="file:\\localhost\excel_small.gif" style="border-style: none;" alt="'   || 'Excel' || '">'; NOPRINT
BY COUNTRY

FOOTING BOTTOM
"<PDF_EXPRT <EXL_EXPRT"
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT &WFFMT
ON TABLE SET LINES 40
ON TABLE SET BYDISPLAY ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     UNITS=IN,
     PAGESIZE='Letter',
     LEFTMARGIN=0.250000,
     RIGHTMARGIN=0.250000,
     TOPMARGIN=0.250000,
     BOTTOMMARGIN=0.250000,
     SQUEEZE=ON,
     ORIENTATION=PORTRAIT,
     PAGECOLOR='WHITE',
$
-IF &WFFMT NE 'HTML' THNE GOTO NOFMT;
TYPE=FOOTING,
     LINE=1,
     OBJECT=FIELD,
     ITEM=1,
     JUSTIFY=LEFT,
     FOCEXEC=report2(WFFMT='PDF' RANDOM='&RANDOM'),
     TARGET='_blank',
$
TYPE=FOOTING,
     LINE=1,
     OBJECT=FIELD,
     ITEM=2,
     JUSTIFY=LEFT,
     FOCEXEC=report2(WFFMT='EXL2K' RANDOM='&RANDOM'),
     TARGET='_blank',
$
-NOFMT
TYPE=DATA,
     COLUMN=COUNTRY,
     FOCEXEC=report3(CNTRY=COUNTRY WFFMT='HTML' RANDOM='&RANDOM'),
     TARGET='_blank',
$
ENDSTYLE
END
-RUN

-* Report 3
-DEFAULT &CNTRY = FOC_NONE

TABLE FILE CAR
PRINT SEATS
      RETAIL_COST
BY COUNTRY
BY CAR
BY MODEL
WHERE COUNTRY EQ '&CNTRY';
END
-RUN

An alternative that I have created recently is to use a stacked bar chart with the second value being the inverse value (compared to max) of the actual value. In the instance that I required, I only had to show a tooltip for all bars even when zero, but the same idea should be possible for your requirement? Having seen your creativeness with charts, I am sure that you'll be able to work something

Anyway, for what it is worth -

DEFINE FILE GGSALES
  VALUE/D12c = IF ST EQ 'IL' THEN 0 ELSE DOLLARS / 1000;
END

TABLE FILE GGSALES
  SUM VALUE
   BY ST
ON TABLE HOLD AS TEMPHLD1
END
-RUN

TABLE FILE TEMPHLD1
  SUM MAX.VALUE AS MAX_VALUE
  SUM VALUE
      COMPUTE INVERSE_VALUE/D12c = IF ST EQ 'IL' THEN C1 ELSE 0;
   BY ST
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SET ASNAMES ON
ON TABLE HOLD AS TEMPHLD2
END
-RUN

ENGINE INT CACHE SET ON
GRAPH FILE TEMPHLD2
SUM VALUE
    INVERSE_VALUE AS ''
BY ST
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBRSTK1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
*GRAPH_SCRIPT
setFillColor(getSeries(0),new Color(143,182,52));
setFillColor(getSeries(1),new Color(0,18,26,0.1));
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
'mouseOverIndicator':{
'enabled':false,
'color':'yellow',
'marker':{'size':0}
},
'introAnimation':{
'enabled':false,
'duration':1400
},
'riserBevel':'bevel',
series: [{series: 1,
            "tooltip": function(d,s,g){return "VALUE, " + this.getGroupLabel(g)+": 0";}
         }]
*END
ENDSTYLE
END
-RUN

T

@MartinY, thanks, but these are actually drill downs into a grid of detail data, based on which one they clicked on. This is dummy data I'm working with so there are only a few thousand records, but this could be millions. To download a spreadsheet of all data no matter which one they click on would be a very large spreadsheet in which any users could do. That could be bad for our network, the WF server, and the end user.

@Tony A, Interesting point. The only way I could do that successfully is to get each bar data into a hold file separately to get each of their count. Then there would be some math to figure out which needs to be on which. However I could get into a situation where this still exists.

I do have an idea with html5 overlay. I'll post something if I get something working.

In my chart, I have the following:

TYPE=DATA, JAVASCRIPT=processLink(DISPLAY), $

At the bottom of my chart, I did this:

-HTMLFORM BEGIN
<html>
<head>
	<script>
	function processLink(DISPLAY)
	{
		try {
			var url = null;
			if(DISPLAY=='Closed Prior To HOPA/HPA') {
				url = encodeURI('&BASEURL.EVALPMI_Dashboard_Closed_Prior_Count_Grid.fex?IBIRS_action=run');
			}
			if(DISPLAY=='Insufficient Information') {
				url = encodeURI('&BASEURL.EVALPMI_Insufficient_Information_Chart.fex?IBIRS_action=run');
			}
			if(DISPLAY=='Review for PMI Removal') {
				url = encodeURI('&BASEURL.EVALReview_for_PMI_Removal.fex?IBIRS_action=run');
			}

			if(url==null)
				return;

			parent.document.getElementById("drilldownframe").src = url;
			var dash = parent.document.getElementById("product-dashboard");
			if(dash==null)
				parent.hideShowData(2);
			else
				parent.productClick(dash);
		} catch (e) {}
	}
	</script>
</head>
<body>
<div onclick="processLink('Closed Prior To HOPA/HPA');" style="z-index: 99; cursor: pointer; position: absolute; top: 270px; left: 30px; height: 10px; width: 150px; border: 0px solid red;"></div>
<div onclick="processLink('Insufficient Information');" style="z-index: 99; cursor: pointer; position: absolute; top: 285px; left: 140px; height: 10px; width: 150px; border: 0px solid red;"></div>
<div onclick="processLink('Review for PMI Removal');" style="z-index: 99; cursor: pointer; position: absolute; top: 270px; left: 250px; height: 10px; width: 140px; border: 0px solid red;"></div>
</body>
</html>
-HTMLFORM END

This seems to work and allows the end user to click the labels at the bottom of my chart.

Nice method but you have to know where the labels are going to be on your output and, I guess, resizing might be an issue?

What I was suggesting is something like this code produces, where the active link is available for the entire height of both bars (visible and almost invisible) such that clicking any part above the series label would achieve a drillable link for you. Rather than have to resort to an attempt to align div overlays.

The good news is that I hear linkable axis values are coming in 8.2 but I've not loaded that version yet so cannot confirm. If my ageing grey cells permit, I will make a further comment here.

SET ASNAMES = ON
SET HOLDLIST = PRINTONLY
SET DMPRECISION = 2

-DEFAULTH &MAX_VALUE = 0

DEFINE FILE GGSALES
  VALUE/D12c = IF ST EQ 'CA' THEN DOLLARS ELSE DOLLARS / 100;
END

TABLE FILE GGSALES
  SUM VALUE
   BY ST
ON TABLE HOLD AS TEMPHLD1
END
-RUN

TABLE FILE TEMPHLD1
  SUM MAX.VALUE AS MAX_VALUE
  SUM VALUE
      COMPUTE INVERSE_VALUE/D12c = C1 - VALUE;
   BY ST
ON TABLE SET HOLDLIST PRINTONLY
ON TABLE SET ASNAMES ON
ON TABLE HOLD AS TEMPHLD2
END
-RUN
-READFILE TEMPHLD2
-TYPE &MAX_VALUE
-CLOSE TEMPHLD2

ENGINE INT CACHE SET ON
GRAPH FILE TEMPHLD2
SUM VALUE
    INVERSE_VALUE AS ''
BY ST
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBRSTK1
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
type=data, column=VALUE, url='http://www.google.co.uk', target=_blank, $
type=data, column=INVERSE_VALUE, url='http://www.google.co.uk', target=_blank, $
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
*GRAPH_SCRIPT
setFillColor(getSeries(0),new Color(143,182,52));
setFillColor(getSeries(1),new Color(0,18,26,0.1));
setReportParsingErrors(false);
setSelectionEnableMove(false);
setFillColor(getO1Label(),new Color(255,0,0));
setURL(getO1Label(), "http://www.google.com");
*END
*GRAPH_JS
'mouseOverIndicator':{
'enabled':false,
'color':'yellow',
'marker':{'size':0}
},
'introAnimation':{
'enabled':false,
'duration':1400
},
'riserBevel':'bevel',
series: [{series: 0,
            "tooltip": function(d,s,g){return "VALUE, " + this.getGroupLabel(g)+": "+parseInt(d);}
         },
         {series: 1,
            "tooltip": function(d,s,g){var val = parseInt(&MAX_VALUE - d);
                                       return "VALUE, " + this.getGroupLabel(g)+": "+val;}
         }]
*END
ENDSTYLE
END
-RUN

T

quote:

I guess, resizing might be an issue?

Yes, but we have 2 sizes really.. Since we have this in a 3 size fixed width portal, 2 of the 3 sizes make the report the same size. The 1 or 3 is longer so the labels are not in the same location. Since I know the size I did this:

	function onresize() {
		var ClosedPriorToHOPAHPA = document.getElementById('ClosedPriorToHOPAHPA');
		var InsufficientInformation = document.getElementById('InsufficientInformation');
		var ReviewforPMIRemoval = document.getElementById('ReviewforPMIRemoval');

		if(window.innerWidth>500) {
			ClosedPriorToHOPAHPA.style.top = "290px";
			ClosedPriorToHOPAHPA.style.left = "80px";
			InsufficientInformation.style.top = "290px";
			InsufficientInformation.style.left = "265px";
			ReviewforPMIRemoval.style.top = "290px";
			ReviewforPMIRemoval.style.left = "460px";
		}
	}
	</script>
</head>
<body onresize="onresize()">
<div id="ClosedPriorToHOPAHPA" onclick="processLink('Closed Prior To HOPA/HPA');" style="z-index: 99; cursor: pointer; position: absolute; top: 270px; left: 30px; height: 10px; width: 150px; border: 0px solid red;"></div>
<div id="InsufficientInformation" onclick="processLink('Insufficient Information');" style="z-index: 99; cursor: pointer; position: absolute; top: 285px; left: 140px; height: 10px; width: 150px; border: 0px solid red;"></div>
<div id="ReviewforPMIRemoval" onclick="processLink('Review for PMI Removal');" style="z-index: 99; cursor: pointer; position: absolute; top: 270px; left: 250px; height: 10px; width: 140px; border: 0px solid red;"></div>
</body>
</html>
-HTMLFORM END

The smaller size is already part of the style for the div, so I didn't need to set it.