In the below example, the Date value on the X-axis is represented as 'DT(03/01)' instead of just '03/01'. I need the values to remain in date/time format internally to get the correct ordering of the values.
Why is this happening and what can I do about it?

DEFINE FILE GGSALES
Date/HDM=HGETC(8, Date);
Time/HHI=HGETC(8, Time);
END
GRAPH FILE GGSALES
SUM GGSALES.SALES01.DOLLARS
BY Date
BY Time
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 VLINE
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 2
ON GRAPH SET GRAPHSTYLE *
setTemplateFile("/images/tdg/template/IBISouthWestern.txt");
setReportParsingErrors(false);
setSelectionEnableMove(false); 
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);
setDepthRadius(0); 
setUseSeriesShapes(true);
setMarkerSizeDefault(50); 
setTransparentBorderColor(getChartBackground(),true); 
setPlace(true);
ENDSTYLE
END

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

Try this Define instead:

DEFINE FILE GGSALES
Date/YYMD=&YYMD;
Time/HHI=HGETC(8, Time);
END

Fernando

I almost thought that would work (except that anything-but-smartdates apparently don't support an output format that contains just day & month), but unfortunately there's another complication.

I just noticed that date/time based values on the X-axis of a scatter diagram don't actually scale with the value! If I have dates 03/01, 08/01 and 11/01, then the values should be 5 days and 3 days apart respectively, but they're all evenly spaced. Bummer.

(Note: in my original example I had split date/time values in their separate parts, but the issue remains with a single HYMDI dimension)

Out of curiosity; how does this behave in the new graph engine in WF8?

Okay, seriously, don't bother with WebFOCUS graphs for HTML output.
Instead, use Google's client-side Chart API which is a lot less painful to use and gets you better-looking results as well.

Here's some docs:
https://developers.google.com/chart/
https://google-developers.apps...teractive/docs/index

Here's an example of how I used it:

APP APPENDPATH ibisamp

-HTMLFORM BEGIN
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('visualization', '1.0', {'packages':['corechart']});
	google.setOnLoadCallback(drawChart);

	function drawChart() {
		var options = {
			'title'	: '::: title :::',
			'width'	: 800,
			'height': 500
		};

		var chart = new google.visualization.LineChart(document.getElementById('graph1'));
		var data = new google.visualization.DataTable();

		data.addColumn('datetime', 'Date/time');
		data.addColumn('number', 'Dollars');
-HTMLFORM END

SET NODATA = 'null'
SET HOLDLIST = PRINTONLY

-* Generate Javascript data
DEFINE FILE GGSALES
	SEP/A2 = ', ';

	TOD/HYYMDS = HGETC(8, TOD);
	DAT/I8YYMD = DATECVT(HDATE(TOD, 'YYMD'), 'YYMD', 'I8YYMD');
	WD/A3 = LCWORD(3, DOWK(DAT, 'A3'), WD);
	DTStr/A25 = HCNVRT(TOD, '(HdMtYYS)', 25, DTStr);
	ISODT/A30 = WD || SEP | DTStr;
END
TABLE FILE GGSALES
PRINT
	COMPUTE LINESTART/A80 = 'data.addRow([new Date(''' || ISODT || ''')'; AS ''
		SEP AS ''

	DOLLARS	AS ''	

	COMPUTE LINEEND/A3 =  ']);'; AS ''
ON TABLE PCHOLD FORMAT ALPHA
END
-RUN

-HTMLFORM BEGIN
		chart.draw(data, options);
	}
</script>

<div id="graph1"></div>
-HTMLFORM END

-EXIT

Prachtige alternatief! We zoeken nog iemand !

I wonder if this will work in a secure business system, but it is worth to try.

Probably not, no. The license terms for Google Charts require that the application has access to internet; you can't run a local copy (or at least, probably not without significant modifications, which the license doesn't allow).

Google charts isn't the only browser-based charting library out there though; one of the alternatives may fit secure networks better. Our main reason to look at Google's version first is that it has the Google team behind it

Dear Wep5622,

Could you get into more detail how a FOCUS field is passed to the API?

In your example you are using a COMPUTE 'LINESTART' and concatenating. Is this needed? Furthermore LINESTART is not used elsewhere in the script?

The "trick" here is that the TABLE FILE output generates lines of Javascript in place, smack in the middle of a Javascript block in the report output (see the surrounding HTMLFORM blocks).
That's why I used ON TABLE PCHOLD FORMAT DOC to generate ASCII output. It's also why it's required to remove the column aliases (" AS ''"), as the titles those would generate in the output would be invalid in Javascript [1].

The reason you never see a reference to the computed LINESTART column us that only its output is used. The name of the column is irrelevant.

If you remove the column aliases from the example and look at the source of the generated page in the browser, you'll notice how things line up. You'll get Javascript errors and no graph in that case of course


Ad 1: Instead of entirely removing the column titles, it should be possible to create them as a Javascript comment (which may help for self-documenting and debugging). That'd go something like this (untested):

ON TABLE SUBHEAD
"/*"
HEADING
"*/"

Wep5622, I was wondering why you're using format DOC instead of format ALPHA? I use ALPHA to generate JavaScript without any issues.

I'm actually not sure of that myself. Originally I was using ALPHA, but IIRC that was causing trouble if there were to be multiple TABLE FILEs with PCHOLD ALPHA in the same procedure. So I looked for alternatives and DOC worked for me.

Another difference with format DOC is that ALPHA writes all the generated lines on a single line of output. That's valid Javascript (as long as you properly terminate your lines with a semi-colon), but it can make debugging a bit awkward.
Then again, so can the column titles with format DOC...

ALPHA will probably be a bit more efficient to download to the browser. I'd probably prefer that for the final version of the procedure (provided that I don't run into the issue with multiple TABLE FILE's).

I'm currently working on a fex that creates multiple HOLD files and am not having any trouble.

For debugging purposes, when I create JavaScript from a WF TABLE call, I add a new line character, which does separate each field into individual lines:

TABLE FILE ENTRPT_GQ_REPORT
PRINT
COMPUTE NEW_LINE/A1 = HEXBYT(13,'A1'); NOPRINT

COMPUTE reportInfoStart/A50 =
   'var reportInfo = {';
NEW_LINE
COMPUTE riREPORT_KEY/A50 =
    '  "riREPORT_KEY" : ' || FPRINT(REPORT_KEY,'P6','A6') || ',';
NEW_LINE
COMPUTE riTEMPLATE_KEY/A50 =
    '  "riTEMPLATE_KEY" : ' || FPRINT(TEMPLATE_KEY,'P6','A6') || ',';
NEW_LINE
...

Perhaps that's the difference then; I used PCHOLD while you use HOLD? Do you use -INCLUDE or !IBI.FIL to embed them in your HTML? Or are we just mixing up terminology here?

I can see why you'd want to add newlines explicitly in your case. You're generating Javascript objects (grouped key/value pairs), with each property originating from a different field in the table.

In the case of my example I'm generating rows of tuples in array notation (positional values), which I prefer to print as a formatted ASCII table as that nicely indents all the values. The resulting table gets a bit wide due to the padding WF likes to add, but if there's anything weird happening in your results due to a value you didn't expect, it's fairly easy to spot - just follow the relevant column down.

For Google Charts both are possible, the Google DataTable class accepts both array-based and object-based input.

I suppose the conclusion is that both are valid options and have their use-cases and personal preferences.

Wep,

About a year ago, I delved into Google graphics. Here is a small example of a general purpose pie chart fex:

  
-SET &ECHO=ALL;
-* File gen_pie.fex
-DEFAULT &FILEN=car, &BY=BODYTYPE, &VAL=RETAIL_COST, &WIDTH=500, &HEIGHT=300
SET HOLDLIST=PRINTONLY
FILEDEF COLFEX DISK COLFEX.FEX
DEFINE FILE SYSCOLUM
GTYPE/A6 =IF NAME EQ '&BY' THEN 'string' ELSE 'number';
COLNAM/A200='data.addColumn(''' || GTYPE || ''', ''' || NAME ||  ''');';
END
TABLE FILE SYSCOLUM
PRINT COLNAM
IF TBNAME EQ &FILEN
IF NAME EQ &BY OR &VAL
ON TABLE SAVE AS COLFEX
END
-RUN
DEFINE FILE SYSCOLUM
CLEN/A4=LJUST(4, FTOA(LENGTH, '(D4c)', 'A4'), 'A4');
GNAME/A400=IF COLTYPE EQ 'CHAR' THEN NAME ELSE 
           IF NAME EQ '&BY' THEN 'FTOA(MAX.' || NAME || ', ''(D' || CLEN || 'c)'', ''A' || CLEN || ''')'
		                    ELSE 'FTOA(' || NAME || ', ''(D' || CLEN || 'c)'', ''A' || CLEN || ''')';
P/I1=IF NAME EQ '&BY' THEN 1 ELSE IF NAME EQ '&VAL' THEN 2 ELSE 0;
END
TABLE FILE SYSCOLUM
PRINT  CLEN COLTYPE  GNAME 
BY P NOPRINT
BY NAME 
IF TBNAME EQ &FILEN
IF NAME EQ &BY OR &VAL
ON TABLE HOLD FORMAT ALPHA
END
-RUN
-REPEAT #GETFIELDS FOR &I FROM 1 TO 2;
-READ HOLD &NAME.&I.A128 &CLEN.&I.A4. &COLTYPE.&I.A8. &GNAME.&I.A400.
-#GETFIELDS
-RUN
SET HOLDLIST=PRINTONLY
TABLE FILE CAR
BY HIGHEST 1 &BY
ON TABLE SAVE
END
-RUN
-READ SAVE,&MBY
-RUN
-SET &MBY=IF &COLTYPE1 EQ 'CHAR' THEN '''' || &MBY || '''' ELSE &MBY;
FILEDEF PIECAR DISK PIECAR.FEX
TABLE FILE &FILEN
SUM &VAL NOPRINT
COMPUTE LCAR/A59 = '[" ' | (LJUST(&CLEN1, &GNAME1, 'A&CLEN1.EVAL') || '", ') | (&GNAME2 || ']'); NOPRINT
COMPUTE PIECAR/A60 = IF MAX.&BY EQ &MBY THEN LCAR ELSE LCAR || ',';
BY &BY NOPRINT
ON TABLE SAVE AS PIECAR
END
-RUN
-HTMLFORM BEGIN
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
     google.load("visualization", "1", {packages:["corechart"]});
     google.setOnLoadCallback(drawChart);
     function drawChart() {
          var data = new google.visualization.DataTable();
-INCLUDE COLFEX
          data.addRows([
-INCLUDE PIECAR
          ]);
 
          var options = {
               title: '&VAL by &BY'
          };
 
          var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
          chart.draw(data, options);
     }
</script>
</head>
<body>
     <div id="chart_div" style="width: &WIDTH.px; height: &HEIGHT.px;"></div>
</body>
-HTMLFORM END

An example of the calling sequence:

  
EX GEN_PIE FILEN=car, BY=CAR, VAL=SALES, HEIGHT=600, WIDTH=400

All I get is a blank HTML page. What am I missing? The preceding HOLD file generates output as needed.

 -* File googlegraph.fex

-SET &ECHO=ALL

DEFINE FILE AG_MND_CAT_ACC
TELLER /I8 = TELLER + 1;
RESULT/D15= -EXAMPLE-;
KLASNAAM/A25=DECODE -EXAMPLE-;
KLASNUM/A1=DECODE  -EXAMPLE-;
 LINESTART/A80 = '[''' || EDIT(JAARMND) || ''','''| KLASNAAM|| ''']';
 SEP/A2 = IF TELLER EQ 1 THEN ' ' ELSE ',';
END

TABLE FILE AG_MND_CAT_ACC
PRINT
	SEP AS ''
	LINESTART AS ''
WHERE JAARMND GE &&NIEUWJAAR;
WHERE SOORT EQ 'YR';
ON TABLE SAVE AS GOOGLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
  google.load('visualization', '1.0', {packages:['table']});
  google.setOnLoadCallback(drawTable);

  function drawTable() {

  var data = new google.visualization.DataTable();

// Declare columns
  data.addColumn('number', 'JAARMND');
  data.addColumn('string', 'KLASNAAM');

// Add data.
  data.addRows([
  !IBI.FIL.GOOGLE;
  ]);
  var table = new google.visualization.Table(document.getElementById('table_div'));



  table.draw(data, showRowNumber: true});
  }
  </script>


</head>
<body>
  <div id='table_div'></div>
</body>
</html>
-HTMLFORM END 

I will give it a try myself and see what I get
Maybe it is a security issue

Perhaps the generated HTML ("Bekijk bron"/"View source") gives a clue?
If your browser has a javascript console, does it complain about any errors?

Perhaps some of the values used contain a single-quote character, in which case it may help to encapsulate your strings in double-quotes instead of single ones:

LINESTART/A80 = '["' || EDIT(JAARMND) || '",'"| KLASNAAM|| '"]';

Of course, if any value contains a double-quote instead that would break as well. For proper string handling you need to escape such symbols in your strings...

Unfortunately the error handling doesn't give an error neither a clue.

 SET GRAPHENGINE=GRAPH53SET EXCELSERVURL=http://ams-ibi-02:80/ibi_appsSET FOCEXURL='/ibi_apps/WFServlet?IBIF_webapp=/ibi_apps&IBIC_server=EDASERVE&IBIWF_msgviewer=ECHOON&IBIAPP_app= ... 
baseapp&&IBIMR_drill=X,example/example.htm&'DEFINE FILE AG_MND_CAT_ACCTELLER /I8 = TELLER + 1;RESULT/D15= - EXAMPLE - ;KLASNAAM/A25=DECODE - EXAMPLE - ;KLASNUM/A1=DECODE - EXAMPLE -;LINESTART/A80 = '[''' || EDIT(JAARMND) || ''','''| KLASNAAM|| ''']';SEP/A2 = IF TELLER EQ 1 THEN ' ' ELSE ',';ENDTABLE FILE AG_MND_CAT_ACCPRINTSEP AS ''LINESTART AS ''WHERE JAARMND GE 20130101;ON TABLE SAVE AS GOOGLEEND-RUN0 NUMBER OF RECORDS IN TABLE=        1  LINES=      1ALPHANUMERIC RECORD NAMED  GOOGLE0 FIELDNAME                         ALIAS         FORMAT        LENGTHSEP                                             A2              2LINESTART                                       A80            80TOTAL                                                          82-HTMLFORM BEGIN-HTMLFORM ENDWebFOCUS Version 7.7.03 compiled and linked on Mon Jun  6 01:04:45 EDT 2011 (Gen branch7703:126)  

Also, the encapsulating did not do the trick either... I will post a car example.

With this code, again no error nor output...

 -* File googlegraph.fex

-SET &ECHO=ALL

DEFINE FILE CAR
TELLER /I8 = TELLER + 1;
 LINESTART/A80 = '[''' || EDIT(SALES) || ''','''| MODEL|| ''']';
 SEP/A2 = IF TELLER EQ 1 THEN ' ' ELSE ',';
END

TABLE FILE CAR
PRINT
	SEP AS ''
	LINESTART AS ''
ON TABLE SAVE AS GOOGLE
END
-RUN

-HTMLFORM BEGIN
<html>
<head>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  <script type='text/javascript'>
  google.load('visualization', '1.0', {packages:['table']});
  google.setOnLoadCallback(drawTable);

  function drawTable() {

  var data = new google.visualization.DataTable();

// Declare columns
  data.addColumn('number', 'SALES');
  data.addColumn('string', 'MODEL');

// Add data.
  data.addRows([
  !IBI.FIL.GOOGLE;
  ]);
  var table = new google.visualization.Table(document.getElementById('table_div'));



  table.draw(data, showRowNumber: true});
  }
  </script>


</head>
<body>
  <div id='table_div'></div>
</body>
</html>
-HTMLFORM END
 

quote:

table.draw(data, showRowNumber: true});

You have an obvious javascript syntax error in above line. IE complains about that one - only with a yellow warning symbol in the status bar if you haven't undisabled javascript warnings.

[undisabling is a Microsoft invention designed to confuse users]

Besides that, you can't draw graphs of string values. You need numeric values.

The whole business with the TELLER field doesn't seem to work as intended either. Perhaps you should first make sure that your TABLE FILE output is correct before trying to wrap it into a Javascript variable...

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

Sorry Wep, my fexname 'googlegraph' is misleading; here I am trying to start easy making a table. The script I took from the Google example. By any chance do you know where the setting to turn on Java warnings is to be found? As I still have no clue where it goes wrong...

Stephan,
Ask tour IT departement, it is a setting.

I don't understand where the fex name or Java came into the picture.

Your problem is with Javascript in your web-browser. I assume that's IE, which has settings in the advanced section of internet options to not disable script debugging errors and to display a notification.
IE is by far the worst browser to try debugging a javascript problem in, though.

Did you fix the syntax error I pointed you to? I think that line should read:

table.draw(data, { showRowNumber: true});

After that is fixed, you still have an issue with your table output: you put a comma before the first array item (you appear to try to prevent that, but it's not working).
Just look at the output of your table request:

DEFINE FILE CAR
TELLER /I8 = TELLER + 1;
 LINESTART/A80 = '[''' || EDIT(SALES) || ''','''| MODEL|| ''']';
 SEP/A2 = IF TELLER EQ 1 THEN ' ' ELSE ',';
END

TABLE FILE CAR
PRINT
	SEP AS ''
	LINESTART AS ''
-*ON TABLE SAVE AS GOOGLE
END

That first record should not have a preceding comma.

Hi Wep5622 ,

Thanks for sharing ,

I Followed your code and implemented on Car file , It works for me .

 -HTMLFORM BEGIN

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('visualization', '1.0', {'packages':['corechart']});
	google.setOnLoadCallback(drawChart);

	function drawChart() {
		var options = {
			'title'	: 'Google Line Chart',
			'width'	: 700,
			'height': 300
		};

		var chart = new google.visualization.LineChart(document.getElementById('gchart'));
		var data = new google.visualization.DataTable();

		data.addColumn('string', 'Car');
		data.addColumn('number', 'Height');
data.addColumn('number', 'Width');
-HTMLFORM END

SET NODATA = 'null'
SET HOLDLIST = PRINTONLY

-* Generate Javascript data

DEFINE FILE CAR
	COM/A2 = ', ';
END
TABLE FILE CAR
SUM
	COMPUTE LINESTART/A80 = 'data.addRow([''' || CAR || ''''; AS ''
	COM AS ''
		HEIGHT AS ''
COM AS ''
WIDTH AS ''

	COMPUTE LINEEND/A3 =  ']);'; AS ''
BY CAR NOPRINT
ON TABLE PCHOLD FORMAT ALPHA
END
-RUN

-HTMLFORM BEGIN
		chart.draw(data, options);
	}
</script>
<div id="gchart" style="width: 900px; height: 500px"></div>
-HTMLFORM END

-EXIT 

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

Wep5622,

Did you tried filter in your table file ,

I used where statement WHERE CAR EQ 'BMW'; in my above code , it shows below error ,

 Uncaught SyntaxError: Unexpected token <