Focal Point
[CLOSED] Change hover color of bar chart

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

June 20, 2018, 05:02 PM
Johnny Aviles
[CLOSED] Change hover color of bar chart
I have a vertical bar chart I'm working on and I have my color by field to have only 2 options (Picked/To Be Picked).

I've set the series colors to be Series 0 of Yellow and Series 1 of Green.

When I hover over the colors it is a very bright Yellow. I want to change that hover color to a blue color, but I can't figure out how to do that.

I've tried changing the Series All color to blue but I can't seem to figure out how to get the hover color to change.

Thanks.

This message has been edited. Last edited by: FP Mod Chuck,


WebFOCUS 8.1
June 20, 2018, 05:15 PM
Waz
Can you post an example ?


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!

June 20, 2018, 06:52 PM
Tomsweb
When you right click on the particular data point you see the "change color" option. Select that option and a color selection palette should pop up for you to select other color(s) to display.


Tomsweb
WebFOCUS 8.1.05M, 8.2.x
APP Studio, Developer Studio, InfoAssist, Dashboards, charts & reports
Apache Tomcat/8.0.36
June 21, 2018, 10:23 AM
LarissaB
Hey there Johnny,
Are you using a style sheet? If so, there could be a line of code in there that follows something like this;
,
htmlToolTip: { enabled: true, snap: false, sticky: true,
fill: 'rgba(255,255,255,1)',
border:{width: 0, color: 'rgba(150,150,150,0.95)'},
style: {
color: 'rgb(0,0,0)',
font: '8pt TREBUCHET MS',
cursor: 'default',
borderWidth: '0px',
padding: '6px 8px 6px 8px',
'borderRadius': 2}
},

It's the htmlToolTip that drives this behavior and its the fill: 'rgba(xxx,xxx,xxx,x)' that drives the hover color


Version: 8.2.03M, OS/Platform: Windows 7 & 10, Output: Excel, pdf, html
June 22, 2018, 04:14 PM
Johnny Aviles
Here's my sample code I have. Basically It makes it color green for series 0 and color yellow for series 1.

I tried the style sheet as described below but that didn't work.

When I hover over the bar charts it's a bright yellow color that I can't see or find in the code or the gui where to change.

*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getY1MinorGrid(),false);
setGridCount(getY1MinorGrid(),1);
setDisplay(getO1MajorGrid(),false);
setTextFormatPreset(getDataText(),28);
setFontSizeAbsolute(getDataText(),true);
setAutofit(getDataText(),false);
setPlaceResize(getDataText(),0);
setFontSizeInPoints(getDataText(),15);
setDataTextPosition(4);
setDataTextDisplay(false);
setPieFeelerTextDisplay(1);
setDisplay(getDataText(1), true);
setLegendPosition(1);
setLegendReverse(true);
setFontSizeAbsolute(getLegendText(),true);
setAutofit(getLegendText(),false);
setPlaceResize(getLegendText(),0);
setFontName(getLegendText(),"TIMES NEW ROMAN");
setTextString(getY1Title()," ");
setDisplay(getY1Title(),true);
setTextString(getO1Title()," ");
setDisplay(getO1Title(),true);
setGradientPinPosition1(getSeries(1),1.0);
setFillType(getSeries(1),1);
setGradientNumPins(getSeries(1),3);
setGradientPinPosition0(getSeries(1),0.0);
setGradientPinPosition1(getSeries(1),0.5);
setGradientPinPosition2(getSeries(1),1.0);
setFillColor(getSeries(1), new Color(79,200,50,255));
setFillColor(getSeries(0),new Color(242,218,50));
setTransparentBorderColor(getSeries(0), true);
setTransparentBorderColor(getSeries(1), true);
setPieTilt(0);
setPieDepth(0);
setDepthRadius(0);
setDepthAngle(0);
setGradientPinPosition0(getFrame(),0.0);
setGradientPinLeftColor0(getFrame(),new Color(138,138,138));
setGradientPinRightColor0(getFrame(),new Color(138,138,138));
setGradientPinLeftColor2(getFrame(),new Color(138,138,138));
setGradientPinRightColor2(getFrame(),new Color(138,138,138));
setGradientPinLeftColor1(getFrame(),new Color(67,67,67));
setGradientPinRightColor1(getFrame(),new Color(67,67,67));
setGradientPinPosition2(getFrame(),1.0);
setGradientPinLeftColor1(getFrame(),new Color(23,23,23));
setGradientPinRightColor1(getFrame(),new Color(23,23,23));
setGradientPinLeftColor0(getFrame(),new Color(19,19,19));
setGradientPinRightColor0(getFrame(),new Color(19,19,19));
setGradientPinLeftColor2(getFrame(),new Color(19,19,19));
setGradientPinRightColor2(getFrame(),new Color(19,19,19));
setGradientPinLeftColor1(getFrame(),new Color(97,97,97));
setGradientPinRightColor1(getFrame(),new Color(97,97,97));
setGradientPinPosition1(getFrame(),1.0);
setGradientNumPins(getFrame(),3);
setGradientPinPosition1(getFrame(),0.5);
setGradientPinLeftColor0(getFrame(),new Color(58,58,58));
setGradientPinRightColor0(getFrame(),new Color(58,58,58));
setGradientPinLeftColor2(getFrame(),new Color(58,58,58));
setGradientPinRightColor2(getFrame(),new Color(58,58,58));
setGradientPinLeftColor0(getFrame(),new Color(77,77,77));
setGradientPinRightColor0(getFrame(),new Color(77,77,77));
setGradientPinLeftColor2(getFrame(),new Color(77,77,77));
setGradientPinRightColor2(getFrame(),new Color(77,77,77));
setGradientPinLeftColor0(getFrame(),new Color(107,107,107,191));
setGradientPinRightColor0(getFrame(),new Color(107,107,107,191));
setGradientPinLeftColor2(getFrame(),new Color(107,107,107,191));
setGradientPinRightColor2(getFrame(),new Color(107,107,107,191));
setGradientPinLeftColor1(getFrame(),new Color(22,22,22,191));
setGradientPinRightColor1(getFrame(),new Color(22,22,22,191));
setGradientPinLeftColor1(getFrame(),new Color(22,22,22));
setGradientPinRightColor1(getFrame(),new Color(22,22,22));
setGradientPinLeftColor0(getFrame(),new Color(107,107,107,217));
setGradientPinRightColor0(getFrame(),new Color(107,107,107,217));
setGradientPinLeftColor2(getFrame(),new Color(107,107,107,217));
setGradientPinRightColor2(getFrame(),new Color(107,107,107,217));
setGradientPinLeftColor0(getFrame(),new Color(107,107,107));
setGradientPinRightColor0(getFrame(),new Color(107,107,107));
setGradientPinLeftColor2(getFrame(),new Color(107,107,107));
setGradientPinRightColor2(getFrame(),new Color(107,107,107));
setGradientPinLeftColor0(getFrame(),new Color(110,110,110));
setGradientPinRightColor0(getFrame(),new Color(110,110,110));
setGradientPinLeftColor2(getFrame(),new Color(110,110,110));
setGradientPinRightColor2(getFrame(),new Color(110,110,110));
setFillColor(getChartBackground(),new Color(255,255,255));
setFillType(getChartBackground(),2);
setGradientPinPosition0(getChartBackground(),0.0);
setTransparentBorderColor(getChartBackground(),false);
setGradientDirection(getChartBackground(),4);
setGradientPinPosition2(getChartBackground(),1.0);
setGradientPinLeftColor0(getChartBackground(),new Color(109,109,109));
setGradientPinRightColor0(getChartBackground(),new Color(109,109,109));
setGradientPinLeftColor2(getChartBackground(),new Color(109,109,109));
setGradientPinRightColor2(getChartBackground(),new Color(109,109,109));
setGradientPinLeftColor1(getChartBackground(),new Color(36,36,36));
setGradientPinRightColor1(getChartBackground(),new Color(36,36,36));
setTransparentFillColor(getFrame(),true);
setGradientPinLeftColor0(getChartBackground(),new Color(135,135,135));
setGradientPinRightColor0(getChartBackground(),new Color(135,135,135));
setGradientPinLeftColor2(getChartBackground(),new Color(135,135,135));
setGradientPinRightColor2(getChartBackground(),new Color(135,135,135));
setGradientPinPosition1(getChartBackground(),1.0);
setGradientNumPins(getChartBackground(),3);
setGradientPinPosition1(getChartBackground(),0.5);
setFillColor(getY1Label(),new Color(255,255,255));
setFontStyle(getY1Label(),2);
setFontSizeAbsolute(getY1Label(), true);
setFontSizeInPoints(getY1Label(), 10);
setPlaceResize(getY1Label(), 0);
setFontSizeAbsolute(getO1Label(), true);
setFontSizeInPoints(getO1Label(), 10);
setPlaceResize(getO1Label(), 0);
setFontStyle(getO1Label(),2);
setFillColor(getO1Label(),new Color(255,255,255));
setFontStyle(getLegendText(),2);
setFillColor(getLegendText(),new Color(255,255,255));
setFontSizeInPoints(getLegendText(),10);
setGradientPinLeftColor0(getChartBackground(),new Color(108,108,108));
setGradientPinRightColor0(getChartBackground(),new Color(108,108,108));
setGradientPinLeftColor2(getChartBackground(),new Color(108,108,108));
setGradientPinRightColor2(getChartBackground(),new Color(108,108,108));
setFillType(getFrame(),2);
setShadowDisplay(getFrame(),false);
setGradientDirection(getFrame(),1);
setFillColor(getFrame(),new Color(0,0,0,0));
setTextRotation(getO1Label(),3);


WebFOCUS 8.1
June 22, 2018, 05:51 PM
David Briars
quote:
...When I hover over the bar charts it's a bright yellow color that I can't see or find in the code or the gui where to change...

Can you do a view source in your browser and check for the mouseOverIndicator property?

For example:
...
"mouseOverIndicator": {
 "enabled": true,
 "color": "yellow",
 "marker":{"size": 0}
  },
... 

If so, then perhaps the property is being set in a WebFOCUS StyleSheet?

This message has been edited. Last edited by: David Briars,
June 25, 2018, 01:17 PM
Tony A
If I remember correctly, the default for version 8.1 was the (awful imho Wink) yellow colour but with 8.2 the default has changed to an opacity which is much better (again imho).

David (previous post) has given you code the look for. I don't think that there was a GUI method of changing it so you are stuck with dropping into code.

There is the ability to turn hover effect off, just go to the Format tab and click on the HTML5 "Interactive options" icon. You will see a checkbox to "Enable Hover Over Effect". This will only enable or disable the hover over, it will not change colour of opacity.

If it is not in your actual procedure code then check in the STY file used.

If you tend to need the opacity change effect on hover over then I would suggest that you change it at STY level anyway so that you do not have to change every procedure. Just change 'yellow' to '70%' etc.

Warning don't forget that a new version install will overwrite any changes you make. So make a note of them so that you know what to change when you upgrade versions.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10