[CLOSED] Styling Data Points for a Chart in Editor

November 05, 2019, 11:18 AM

AMC2

For a bar chart in the editor, how do you style the different data points on an axis series where they are different colors? For example, if I have three risers on an axis, how would I style each one differently. This below gets me all one color for the axis for all 3 data point risers:

setFillColor(getSeries(0),new Color(0,43,73));

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

November 05, 2019, 11:43 AM

BabakNYC

Say you have 3 series. Each is associated with a number starting with 0.

  
setFillColor(getSeries(0),new Color(255,0,0));
setTransparentBorderColor(getSeries(0), true);
setFillColor(getSeries(1),new Color(255,128,0));
setTransparentBorderColor(getSeries(1), true);
setFillColor(getSeries(2),new Color(128,64,0));
setTransparentBorderColor(getSeries(2), true);

November 05, 2019, 12:09 PM

Hallway

Are you saying that you only have one series, and want the colors to change by the different groups?

Look at ColorMode

By using setColorMode(2); this will color by group. Example below:

 
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

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 ibisamp/car
-* Created by Info Assist for Graph
SUM CAR.BODY.DEALER_COST
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setCurveFitEquationDisplay(false); 
setPlace(true); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/endeflt.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setTransparentBorderColor(getSeries(*), true);
setColorMode(2);
*GRAPH_JS_FINAL
"riserBevel": "none"

*END
ENDSTYLE
END

-RUN

November 05, 2019, 12:14 PM

Hallway

quote:
For a bar chart in the editor

Referencing my answer above, in the GUI editor, right click on the first bar and in the menu, go to Color Mode and select By Group.

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

November 05, 2019, 12:56 PM

AMC2

Thanks for both of your replies. Yes, I have one series and want the colors to change by the different groups. So if I use setColorMode(2), what tells it to color this group a certain color and so forth?

November 06, 2019, 04:31 PM

AMC2

How do you remove the gridlines in the code from a bar chart?

November 06, 2019, 04:38 PM

BabakNYC

  
setDisplay(getY1MajorGrid(),false);
setDisplay(getO1MajorGrid(),false);

November 06, 2019, 04:39 PM

Hallway

quote:
Originally posted by AMC2:
How do you remove the gridlines in the code from a bar chart?

 
setDisplay(getO1MajorGrid(),false);
setDisplay(getY1MajorGrid(),false);

November 06, 2019, 04:45 PM

Hallway

quote:
Originally posted by AMC2:
Thanks for both of your replies. Yes, I have one series and want the colors to change by the different groups. So if I use setColorMode(2), what tells it to color this group a certain color and so forth?

 
setFillColor(getSeries(0),new Color(255,128,0));
setFillColor(getSeries(1),new Color(0,128,0));

and so on for the amount of groups that you have

November 06, 2019, 04:53 PM

AMC2

Thanks for that. Also, how do you remove the outlying containers for each bar on the chart?

November 06, 2019, 05:53 PM

Hallway

quote:
Originally posted by AMC2:
Thanks for that. Also, how do you remove the outlying containers for each bar on the chart?

What do you mean by outlying container?

November 06, 2019, 06:05 PM

AMC2

There are like a main gridline surrounding each of my bars on the bar chart. I removed the other smaller gridlines with the commands you posted earliear, but this major like gridline container is surrounding each bar. Does that make sense?

November 06, 2019, 07:07 PM

Hallway

try this for each group

 
setTransparentBorderColor(getSeries(0), true);

November 07, 2019, 10:14 AM

AMC2

Hallway - That did not work...it still has the outlying container around each bar. Any other ideas?

November 07, 2019, 11:22 AM

Hallway

quote:
Originally posted by AMC2:
Hallway - That did not work...it still has the outlying container around each bar. Any other ideas?

Can you post your code using the car file so I can run it on my end and see what you are seeing?

November 07, 2019, 11:31 AM

AMC2

Here is the actual code.

  

DEFINE FILE gen_use_datasources/sv_shipments
 CURR_USER/A100V=UPPER ( REPLACE ( '&IBIMR_user' , 'hills\' , '' ) ) ;
 CLAIM_FILED_BIN_1/I14=FLOOR ( SV_SHIPMENTS.SV_SHIPMENTS.CLAIM_FILED/10 ) * 10 ;
END
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_ARVERSION=1;
SET ARVERSION=&WF_ARVERSION

-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE gen_use_datasources/sv_shipments
-* Created by Info Assist for Graph
SUM SV_SHIPMENTS.SV_SHIPMENTS.CLAIM_FILED
BY SV_SHIPMENTS.SV_SHIPMENTS.CLAIM_STATUS
BY CLAIM_FILED_BIN_1 NOPRINT
WHERE SV_SHIPMENTS.SV_SHIPMENTS.PRIMARY_RECORD EQ 'Y';
WHERE SV_SHIPMENTS.SV_SHIPMENTS.CLAIM_STATUS EQ 'FILED' OR 'RESOLVED' OR 'NEW';
WHERE SV_SHIPMENTS.SV_SHIPMENTS.LOGIN_ID EQ CURR_USER;
-INCLUDE IBFS:/WFC/Repository/Financials/Common_Content/filters_include.fex
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);

*END
-*-INCLUDE IBFS:/WFC/Repository/Sunset/Common_Content/sunset_stylesheet.sty
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=DATA, COLUMN=N1, BUCKET=row, $
TYPE=DATA, COLUMN=N2, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
*GRAPH_SCRIPT

setDisplay(getY1MajorGrid(),false);
setDisplay(getO1MajorGrid(),false);
setTransparentBorderColor(getSeries(0), true);

setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getY1Title(),true);
setTextString(getY1Title(),"Claims");
setTextFormatPreset(getY1Label(),0);
setDisplay(getO1Title(),true);
setTextString(getO1Title(),"");
-*added for individual styling
setFillColor(getSeries(0),new Color(209, 95, 39));
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"blaProperties": {
    "orientation": "horizontal"
},
"yaxis": {
    "title": {
        "text": "Claims"
    }
},
"agnosticSettings": {
    "chartTypeFullName": "Bar_Histogram_Horizontal"
}

*END
ENDSTYLE
END

-RUN

November 07, 2019, 04:12 PM

AMC2

Any more thoughts on this?

Also, how do you format the X or Y axes as a dollar format in the code?

November 07, 2019, 04:24 PM

Hallway

I cannot run that as I do not have that master. Can you replicate the chart using the CAR file?

November 07, 2019, 04:31 PM

Hallway

I did just have a thought though. Try removing the default bevel.

  
"riserBevel": "none",

November 07, 2019, 04:42 PM

AMC2

Is that line of code is for removing the outlying lines around the bars? Also, where specifically does it go? Does it go in the "GRAPH_JS_FINAL" section?

November 07, 2019, 06:46 PM

Hallway

quote:
Originally posted by AMC2:
Is that line of code is for removing the outlying lines around the bars? Also, where specifically does it go? Does it go in the "GRAPH_JS_FINAL" section?

I still don't know what you mean by "outlying lines around the bars." The code that you posted I cannot run since I don't have that metadata. If you could replicate your chart using the CAR file, I would maybe understand better. I simply suggested removing the riserBevel because it gives a darker gradient appearance on the edges.

Yes, that will go in the "GRAPH_JS_FINAL" section. Anything that is in JSON format ( "property":"value" ) will go in that section.

In InfoAssist, go to: Series (tab) > Style > Effect > Riser Style > None.