Hello!

I have a fex that displays one report and two charts in the same file in format HTML. I run the fex and I see all three reports.

I would like to make the two charts HTML5 so that they adjust to the current size of the browser/device. I have found I can use output type JSCHART, but if I make both charts output type JSCHART, I can only see the final chart.

I found the following link that almost describes my issue, but I believe in this case they are seeing empty pie charts.
http://forums.informationbuild...1057331/m/3257045076

My code is posted below.

-*IA_GRAPH_BEGIN
-*Do not delete or modify the comments below
-* I removed the comments here to keep the post neat, but on my server I have not touched the comments.
-*Do not delete or modify the comments above
ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE INVOICE_FACT_STAR
-* Created by Info Assist for Graph
SUM INVOICE_FACT_STAR.INVOICE_FACT.INVOICE_AMOUNT
COMPUTE Variable_Cost/D12.2=( INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_MATERIAL_COST + INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_RESOURCE_COST + INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_OUTSIDE_PROCESSING_COST + INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_MATERIAL_OVERHEAD_COST + INVOICE_FACT_STAR.INVOICE_FACT.VOH_COST ) ; AS 'Standard Cost'
COMPUTE Percentage/D12.2%=( ( INVOICE_FACT_STAR.INVOICE_FACT.INVOICE_AMOUNT - ( INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_MATERIAL_COST + INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_RESOURCE_COST + INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_OUTSIDE_PROCESSING_COST + INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_MATERIAL_OVERHEAD_COST + INVOICE_FACT_STAR.INVOICE_FACT.VOH_COST ) )/INVOICE_FACT_STAR.INVOICE_FACT.INVOICE_AMOUNT ) * 100 ; AS 'Standard Margin %'
BY INVOICE_FACT_STAR.INVOICE_DATE.YEAR
BY INVOICE_FACT_STAR.INVOICE_DATE.MONTH
WHERE (INVOICE_FACT_STAR.PRODUCT_DIM.SERIES EQ &SERIES.(OR(FIND SERIES IN INVOICE_FACT_STAR)).SERIES.) AND (INVOICE_FACT_STAR.PRODUCT_DIM.BRAND EQ '&BRAND') AND (INVOICE_FACT_STAR.REP_DIM.REGIONAL_SALES_MANAGER EQ '®IONAL_SALES_MANAGER') AND (INVOICE_FACT_STAR.REP_DIM.SALESREP EQ '&SALESREP') AND (INVOICE_FACT_STAR.DEALER_DIM.DEALER_OF_RECORD LIKE '&DEALER_OF_RECORD') AND (INVOICE_FACT_STAR.DEALER_DIM.DEALER_OF_RECORD_TYPE EQ '&DEALER_OF_RECORD_TYPE') AND (INVOICE_FACT_STAR.PRODUCT_DIM.PRODUCT_TYPE EQ '&PRODUCT_TYPE') AND (INVOICE_FACT_STAR.PRODUCT_DIM.MASTER_SCHEDULE_CATEGORY EQ '&MASTER_SCHEDULE') AND (INVOICE_FACT_STAR.INVOICE_DIM.CDA_NUMBER LIKE '&CDA_NUMBER');
WHERE INVOICE_FACT_STAR.INVOICE_DATE.CALENDAR_DATE GE '&FROM_DATE' AND INVOICE_FACT_STAR.INVOICE_DATE.CALENDAR_DATE LE '&TO_DATE';
WHERE INVOICE_FACT_STAR.INVOICE_DIM.ORDER_TYPE EQ 'STANDARD';
WHERE INVOICE_FACT_STAR.PRODUCT_DIM.PLANT EQ &PLANT.(OR(FIND PLANT IN INVOICE_FACT_STAR)).PLANT.;
WHERE INVOICE_FACT_STAR.PRODUCT_DIM.PRODUCT_CLASSIFICATION EQ &PRODUCT_CLASSIFICATION.(OR(FIND PRODUCT_CLASSIFICATION IN INVOICE_FACT_STAR)).PRODUCT_CLASSIFICATION.;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT 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 2
ON GRAPH SET LOOKGRAPH VAREA
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=ENCharcoal_theme.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setPieTilt(10);
setPieDepth(70);
setDepthRadius(5);
setDepthAngle(45);
setDisplay(getDataText(2), false);
setColorMode(1);
setFillType(getFrame(),2);
setGradientNumPins(getFrame(),2);
setGradientPinPosition0(getFrame(),0.0);
setGradientPinPosition1(getFrame(),1.0);
setSeriesType(2,0);
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH
-*IA_GRAPH_BEGIN
-*Do not delete or modify the comments below
-* I removed the comments here to keep the post neat, but on my server I have not touched the comments.
-*Do not delete or modify the comments above
ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE INVOICE_FACT_STAR
-* Created by Info Assist for Graph
SUM COMPUTE AVG_ACTUAL_DISCOUNT/D12.2%=( INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_INVOICE_LIST - INVOICE_FACT_STAR.INVOICE_FACT.INVOICE_AMOUNT )/INVOICE_FACT_STAR.INVOICE_FACT.EXTENDED_INVOICE_LIST * 100 ; AS 'Average Actual Discount Given'
BY INVOICE_FACT_STAR.INVOICE_DATE.YEAR
BY INVOICE_FACT_STAR.INVOICE_DATE.MONTH
WHERE (INVOICE_FACT_STAR.PRODUCT_DIM.SERIES EQ &SERIES.(OR(FIND SERIES IN INVOICE_FACT_STAR)).SERIES.) AND (INVOICE_FACT_STAR.PRODUCT_DIM.BRAND EQ '&BRAND') AND (INVOICE_FACT_STAR.REP_DIM.REGIONAL_SALES_MANAGER EQ '®IONAL_SALES_MANAGER') AND (INVOICE_FACT_STAR.REP_DIM.SALESREP EQ '&SALESREP') AND (INVOICE_FACT_STAR.DEALER_DIM.DEALER_OF_RECORD LIKE '&DEALER_OF_RECORD') AND (INVOICE_FACT_STAR.DEALER_DIM.DEALER_OF_RECORD_TYPE EQ '&DEALER_OF_RECORD_TYPE') AND (INVOICE_FACT_STAR.PRODUCT_DIM.PRODUCT_TYPE EQ '&PRODUCT_TYPE') AND (INVOICE_FACT_STAR.PRODUCT_DIM.MASTER_SCHEDULE_CATEGORY EQ '&MASTER_SCHEDULE') AND (INVOICE_FACT_STAR.INVOICE_DIM.CDA_NUMBER LIKE '&CDA_NUMBER');
WHERE INVOICE_FACT_STAR.INVOICE_DATE.CALENDAR_DATE GE '&FROM_DATE' AND INVOICE_FACT_STAR.INVOICE_DATE.CALENDAR_DATE LE '&TO_DATE';
WHERE INVOICE_FACT_STAR.INVOICE_DIM.ORDER_TYPE EQ 'STANDARD';
WHERE INVOICE_FACT_STAR.PRODUCT_DIM.PLANT EQ &PLANT.(OR(FIND PLANT IN INVOICE_FACT_STAR)).PLANT.;
WHERE INVOICE_FACT_STAR.PRODUCT_DIM.PRODUCT_CLASSIFICATION EQ &PRODUCT_CLASSIFICATION.(OR(FIND PRODUCT_CLASSIFICATION IN INVOICE_FACT_STAR)).PRODUCT_CLASSIFICATION.;
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT 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 2
ON GRAPH SET LOOKGRAPH VAREA
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=ENCharcoal_theme.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setPieTilt(10);
setPieDepth(70);
setDepthRadius(5);
setDepthAngle(45);
setFillType(getFrame(),2);
setGradientNumPins(getFrame(),2);
setGradientPinPosition0(getFrame(),0.0);
setGradientPinPosition1(getFrame(),1.0);
setGridStepAuto(getY1MajorGrid(),true);
setScaleMustIncludeZero(getY1Axis(),false);
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH

This message has been edited. Last edited by: <Kathryn Henning>,

Check out this gift...

SET PAGE = NOLEAD
TABLE FILE CAR
SUM DCOST RCOST BY COUNTRY BY CAR BY MODEL
ON TABLE HOLD AS REPORT1 FORMAT HTMTABLE
END
GRAPH FILE CAR
SUM DCOST BY COUNTRY
ON TABLE HOLD AS GRAPH1 FORMAT HTMTABLE
END
GRAPH FILE CAR
SUM RCOST BY COUNTRY
ON TABLE HOLD AS GRAPH2 FORMAT HTMTABLE
END
-RUN
-HTMLFORM BEGIN
!IBI.FIL.REPORT1;
!IBI.FIL.GRAPH1;
!IBI.FIL.GRAPH2;
-HTMLFORM END

Hi Dusty,
In order for multiple HTML5 Charts to appear in the same report, you would have to provide a unique name for each chart:
ON GRAPH PCHOLD AS CHART_1 FORMAT JSCHART

However,
You would also have to remove(or comment out, or set it to OFF)
ON GRAPH SET AUTOFIT ON, which from your question will not accomplish what you are trying to do with having Charts adjust to your browser. Because AUTOFIT ON will fit only the last chart to the size of the container.

The best thing to do is to use either DevStudio or AppStudio and place your HTML5 charts in separate frames. This way if the frame resizes, so will the Chart inside the frame and you will not have to use unique JSCHART name workaround.

Thanks.
Nick.

I haven't forgotten about this issue, I just got a bit sidetracked until now.

I tried Doug's fix but the reports were not responsive. I changed Doug's formats from HTMTABLE to JSCHART and I saw the behavior that Nick Z described.

I will attempt the fix mentioned by Nick, although I plan to use Doug's workaround in another issue.

Thanks everyone for your help!