[SHARING] Using Google High charts using webFOCUS

Hi Friends,

I was working on a POC with my colleague to implement google charts with webFOCUS. The Reason I chose that is because of look and feel on how chart is drawn on step by step basis. Just try it running once. It looks awesome. And Please Provide your inputs/suggestions if it can be useful for you. Below are the code for data creation file(chart_data.fex) and highchart_test.fex:

-* File chart_data.fex
 
TABLE FILE CAR
SUM  SALES		DEALER_COST
BY COUNTRY
-*WHERE FLG EQ 1
ON TABLE PCHOLD FORMAT XML
END
-******************************************************
-* File highchart_test.fex
-HTMLFORM BEGIN
 
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
Google Chart POC
    </title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
var grphChoice_rr =1;
 
 
  function reDraw_rr()
  {
 
   if(grphChoice_rr==0)
  {
     grphChoice_rr=1;
  }
  else if(grphChoice_rr==1)
  {
   grphChoice_rr=0;
  }
 drawChart();
}
 
 
  function drawChart()
  {
 
 if ( grphChoice_rr==1 )
 { $("#area_chart_google1_rr").hide();
  $("#chart_title1_rr").hide();
  $("#area_chart_google2_rr").hide();
  $("#area_chart_google_rr").show();
  $("#chart_title_rr").show();
    $("#columnchart_rr").show();
  $("#pie_rr").hide();
    $("#P2_rr").hide();
  $("#P1_rr").hide();
 
       var amp="&";
          var data_rr = new google.visualization.DataTable();
          data_rr.addColumn('string', 'Header');
          data_rr.addColumn('number', 'Sales');
          data_rr.addColumn('number', 'Dealer Cost');
   data_hld_rr = data_rr.clone();
 
       $.ajax({
           type: "GET",
           url:"http://SERVERNAME/ibi_apps/WFServlet?IBIAPP_app=dev_psingh"+amp+"IBIF_ex=chart_data.fex"+amp+"IBIC_server=EDASERVE"+amp+"ID=2",
           dataType: "xml",
		                success: function(xml) {
                    var $xml = $(xml);
                 $xml.find('table tr').each(function(k, category2) {
                var arr = new Array();
                   $(category2).find('td').each(function(l, category3) {
                      if( l==1){
                                    arr[1] =parseFloat($(category3).text());
                      }
           else if( l==0){
              arr[0] =($(category3).text().substring(0,4)+'/'+$(category3).text().substring(4,6)+'/'+$(category3).text().substring(6,8)).toString();
           }
         else if( l==2){
              arr[2] =parseFloat($(category3).text());
        }
      else if( l==3){
 
        }
 
         });
 
          data_rr.addRows([
            arr
          ]);
      });
 
          var chart_rr = new google.visualization.ColumnChart(document.getElementById('area_chart_google_rr'));
        var options =
        {
         width: 400,
          height: 330,
            vAxis: {
   title: "$ Values",
   format:"$",
   titleTextStyle: {
   color: "Black",
    fontName: '"Arial"',
    fontSize: "15"
    }
    },
            hAxis: {title: "Country",titleTextStyle: {color: "Black", fontName: '"Arial"', fontSize: "15"},slantedText:true,slantedTextAngle:30},
      colors:['#72A0C1','#DEB887','#AF002A','#E92217','#356648'],
   tooltip: {textStyle: {color: "Black", fontName: '"Arial"', fontSize: "12"}},
            animation:{duration: 1000,easing: 'out'},
      legend:{alignment:'center'},
      isStacked:true
          };
for(i = 0; i < data_rr.getNumberOfRows[); i++){
(function(i){
        setTimeout(function(){
            var arr = new Array();
arr[0]= data_rr.getValue(i,0);
arr[1]= data_rr.getValue(i,1);
arr[2]= data_rr.getValue(i,2);
data_hld_rr.addRow(arr);
chart_rr.draw(data_hld_rr, options);
        }, 1000 * i);
 
}(i))
}
}
 
    });
 
 }
 else if (grphChoice_rr==0 )
 {
  $("#chart_title_rr").hide();
  $("#area_chart_google_rr").hide();
  $("#area_chart_google1_rr").show();
  $("#area_chart_google2_rr").show();
  $("#chart_title1_rr").show();
  $("#columnchart_rr").hide();
  $("#pie_rr").show();
  $("#P2_rr").show();
  $("#P1_rr").show();
 
    var amp="&";
          var data_rr = new google.visualization.DataTable();
    var data1_rr = new google.visualization.DataTable();
          data_rr.addColumn('string', 'Header');
          data_rr.addColumn('number', 'Value');
          data1_rr.addColumn('string', 'Header');
          data1_rr.addColumn('number', 'Value');
 
data_hld_rr = data_rr.clone();
data1_hld_rr = data1_rr.clone();
       $.ajax({
           type: "GET",
           url:"http://SERVERNAME/ibi_apps/WFServlet?IBIAPP_app=dev_psingh"+amp+"IBIF_ex=chart_data.fex"+amp+"IBIC_server=EDASERVE"+amp+"ID=2",
           dataType: "xml",
 
             success: function(xml) {
                    var $xml = $(xml);
                 $xml.find('table tr').each(function(k, category2) {
                var arr = new Array();
       var arr1 = new Array();
                   $(category2).find('td').each(function(l, category3) {
                      if( l==1){
                                    arr[1] =parseFloat($(category3).text());
 
                      }
           else if( l==0){
              arr[0] =($(category3).text()).toString();
                    arr1[0] =($(category3).text()).toString();
           }
           else if( l==2){
              arr1[1] =parseFloat($(category3).text());           }
 
         });
 
          data_rr.addRows([
            arr
          ]);
    data1_rr.addRows([
            arr1
          ]);
      });
 
          var chart_rr = new google.visualization.PieChart(document.getElementById('area_chart_google1_rr'));
           var options =
        {
            width: 200,
            height: 200,
            titleTextStyle:  {color: "Black", fontName: '"Arial"', fontSize: "15"},
            tooltip: {textStyle: {color: "Black", fontName: '"Arial"', fontSize: "12"}},
      is3D:true,
legend:{alignment:'center',position:'bottom'},
   slices: {0: {color: '#72A0C1'}, 1: {color: '#DEB887'}}
 
          };
for(i = 0; i < data_rr.getNumberOfRows[); i++){
(function(i){
        setTimeout(function(){
            var arr = new Array();
arr[0]= data_rr.getValue(i,0);
arr[1]= data_rr.getValue(i,1);
data_hld_rr.addRow(arr);
chart_rr.draw(data_hld_rr, options);
        }, 1000 * i);
 
}(i))
}
 
 
      var chart1_rr = new google.visualization.PieChart(document.getElementById('area_chart_google2_rr'));
           var options1 =
        {
            width: 200,
            height: 200,
            titleTextStyle:  {color: "Black", fontName: '"Arial"', fontSize: "15"},
            tooltip: {textStyle: {color: "Black", fontName: '"Arial"', fontSize: "12"}},
legend:{alignment:'center',position:'bottom'},
      is3D:true,
      slices: {0: {color: '#72A0C1'}, 1: {color: '#DEB887'}}
 
          };
for(i = 0; i < data1_rr.getNumberOfRows[); i++){
(function(i){
        setTimeout(function(){
            var arr = new Array();
arr[0]= data1_rr.getValue(i,0);
arr[1]= data1_rr.getValue(i,1);
data1_hld_rr.addRow(arr);
chart1_rr.draw(data1_hld_rr, options1);
        }, 1000 * i);
 
}(i))
}
}
 
 
    });
 
 
 }
 
  }
    </script>
  </head>
  <body>
 <div id="columnchart_rr" style="font-weight:italics;position:absolute;left:200px;top:380px;height:360px;width:470px;;border:1px solid;border-radius:10px;">
    <div id="area_chart_google_rr" class="area-chart" style="font-weight:italics;position:absolute;left:0px;top:20px;height:350px;width:440px;"></div>
 </div>
<div id="pie_rr" style="font-weight:italics;position:absolute;left:200px;top:380px;height:360px;width:470px;border:1px solid;border-radius:10px;display:none">
 <div id="area_chart_google1_rr" class="area-chart" style="font-weight:italics;position:absolute;left:0px;top:50px;display:none;"></div>
 <div id="area_chart_google2_rr" class="area-chart" style="font-weight:italics;position:absolute;left:180px;top:50px;display:none"></div>
  <P id="P1_rr" style="font-weight:bold;font-family:'Arial';position:absolute;left:65px;top:40px;">Sales</P>
  <P id="P2_rr" style="font-weight:bold;font-family:'Arial';position:absolute;left:250px;top:40px;">Dealer Cost</P>
 
</div>
 <IMG id="chgGrph_rr" src="/approot/dev_psingh/graph_redraw.png" onClick="reDraw_rr[)" style="font-weight:italics;position:absolute;left:600px;top:390px;witdth:25px;height:25px;">
 <P id="chart_title_rr" style="font-weight:bold;font-family:'Arial';position:absolute;left:340px;top:390px;">Car Sales details</P>
  <P id="chart_title1_rr" style="font-weight:bold;font-family:'Arial';position:absolute;left:350px;top:700px;height:35px;width:150px;">Car Sales details </P>
  </body>
</html>
 
-HTMLFORM END
 
 
-*********************************************************

You would need to change url:"http://SERVERNAME/ibi_apps/WFServlet?IBIAPP_app=dev_psingh to your folder names and server to run it and see the result.

Thanks,
Pravin Singh

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

WebFOCUS 7703
Windows, All Outputs
pravinsinghwebfocus.blogspot.com

Posts: 51 | Location: WebFOCUS 7.7.03 | Registered: June 19, 2014

Wep5622

Virtuoso

posted

Hide Post

Please put your code between [code][/code]-tags.

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

Enigma006

Master

posted

Hide Post

webfocus 8 provides animations and other features and there is no need of this much customized code.
but high charts etc look more sophisticated though..

8.1.05
HTML,PDF,EXL2K, Active, All

Posts: 484 | Registered: February 03, 2009

Ignored post by Enigma006 posted

Show Post

Tony A

Expert

posted

Hide Post

Pravin,

Praiseworthy, but David Briars posted something using Highcahrts in 2012 that you might want to look at - link

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

Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004

Ignored post by Tony A posted

Show Post

Francis Mariani

Expert

posted

Hide Post

Highcharts are so much better.

Francis

Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server

Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005

Ignored post by Francis Mariani posted

Show Post

Pravin.Singh

Gold member

posted

Hide Post

Thanks for all your comments/suggestions. I am yet to explore Version 8 in WebFOCUS. I thought it might be more useful if we are more concerned about look and feel in the report.

Thanks,
Pravin

WebFOCUS 7703
Windows, All Outputs
pravinsinghwebfocus.blogspot.com

Posts: 51 | Location: WebFOCUS 7.7.03 | Registered: June 19, 2014

Ignored post by Pravin.Singh posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

It seems to me that you're just using the (free) Google Visualization API and that Highcharts is a different product (not by Google and not free).

There are several examples of using Google Visualizations on this forum, including one by me.

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

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

globalwm

Gold member

posted

Hide Post

Highcharts FAQS state that universities can use Highcharts software for free under a non-commercial license. Follow the links below for more information on Highcharts or its licensing.

Home: http://www.highcharts.com/
Documentation: http://www.highcharts.com/ref
FAQS: http://shop.highsoft.com/faq

We like using Highcharts - it is a pure HTML5/JavaScript library of intuitive and interactive charts.

8.0.02M, Oracle 11.2 (AIX), Windows 2008R2, HTML, PDF, Excel

Posts: 72 | Registered: November 12, 2012

Ignored post by globalwm posted

Show Post

dhagen

Virtuoso

posted

Hide Post

I'll have to check my notes, but there is a feature in WF where if you add a XSL name to your URL, and WF will automatically apply it to the request output if the request returns XML. My example was for high charts - as I have a customer that uses them. The result - in my case - was the fully bound JSON object that high charts is expecting to render the graph. This way you can build the HTML without it having to be embedded in a fex. Also, all you have to do is extend the JSON object to get the fancy customizations. This allows you to have one XSL for each graph type. I can be dynamic enough that the data drives the object.

The use of this extends beyond high charts to any JS object that can be initialized with a JSON object.

I'll clean up my notes to just the basics and post an example when I have more time if anyone is interested.

"There is no limit to what you can achieve ... if you don’t care who gets the credit." Roger Abbott

Posts: 1102 | Location: Toronto, Ontario | Registered: May 26, 2004

Ignored post by dhagen posted

Show Post

Gaurav

Gold member

posted

Hide Post

quote:
Originally posted by dhagen:
I'll have to check my notes, but there is a feature in WF where if you add a XSL name to your URL, and WF will automatically apply it to the request output if the request returns XML. My example was for high charts - as I have a customer that uses them. The result - in my case - was the fully bound JSON object that high charts is expecting to render the graph. This way you can build the HTML without it having to be embedded in a fex. Also, all you have to do is extend the JSON object to get the fancy customizations. This allows you to have one XSL for each graph type. I can be dynamic enough that the data drives the object.

The use of this extends beyond high charts to any JS object that can be initialized with a JSON object.

I'll clean up my notes to just the basics and post an example when I have more time if anyone is interested.

Can you provide me an example. Please.

WebFOCUS 8.1.05
Windows, All Outputs

Posts: 58 | Registered: November 19, 2014

Ignored post by Gaurav posted

Show Post

Doug

Expert

posted

Hide Post

OK, what am I missing here? I get the following error when running the code as posted on 11/19 at 5:24:

The XML page cannot be displayed 
Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later. 


--------------------------------------------------------------------------------

Only one top level element is allowed in an XML document. Error processing resource 'http://biwftest.kgp.local:8080/ibi_app...

<html xmlns="http://www.w3.org/1999/xhtml">
-^

Color coded with links...

In FOCUS Since 1983 ~ from FOCUS to WebFOCUS.
Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206

Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005

Ignored post by Doug posted

Show Post

Doug

Expert

posted

Hide Post

Wep5622

I get a "This site can’t be reached" from your link:

quote:
There are several examples of using Google Visualizations on this forum, including one by me.

Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005

Ignored post by Doug posted

Show Post

Chaudhary

Platinum Member

posted

Hide Post

Using Google charts By Wep5622

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

WF Production :- WF:8.0.0.4, 8.1.05 App-studio/Developer Studio(8.1.x) ,
8.2.0.1M , 8.2.0.2 (App-Studio8.2.x),
InfoAssist/+, InfoDiscovery
Output format:-AHTML, PDF, Excel, HTML
Platform:-Windows 7, 8,10

Posts: 186 | Location: Infobuild India | Registered: August 28, 2015

Ignored post by Chaudhary posted

Show Post

Wep5622

Virtuoso

posted

Hide Post

Oh, that's annoying! The forum software broke the local link by prefixing it with a http protocol identifier. I just tried editing that away, but it put it right back in. That's just silly.

I updated it to an absolute link, that works. Or use Chaudhary's link above

WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :

Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010

Ignored post by Wep5622 posted

Show Post

Please Wait. Your request is being processed...

Read-Only Topic

Focal Point

Focal Point Forums

WebFOCUS/FOCUS Forum on Focal Point

[SHARING] Using Google High charts using webFOCUS

Focal Point | Privacy Statement | Terms of Service