IBI- WebFOCUS-Using Google High charts in webFOCUS

Have you worked on creating graphical reports in WebFOCUS? Do you want to use google high charts in your WebFOCUS reports? The reason I like WebFOCUS over other reporting tool is it's adaptability and flexibility to integrate with other codes. You can write HTML, javascript, XML, Unix and lot more codes into your webFOCUS procedure.

 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. 
Below are the code for data creation file(chart_data.fex) and highchart_test.fex:

 Fex File for Data
-* File chart_data.fex

TABLE FILE CAR
SUM  SALES DEALER_COST
BY COUNTRY
-*WHERE FLG EQ 1
ON TABLE PCHOLD FORMAT XML
END
-******************************************************

 Fex file for highchart

 -* 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 as given:

 Clicking on top-right button will open different graph integrated in the same fex file:

 I know there are many great features for graphs in WebFOCUS version 8 but I still feel that this great feature of WebFOCUS is worth sharing. Please share your feedback as it inspire to share more. 

Comments

Post a Comment

Popular posts from this blog

IBI WebFOCUS - Functions available and syntax to use

Using Functions Functions operate on one or more arguments and return a single value. The returned value can be stored in a field, assigned to a Dialogue Manager variable, used in a calculation or other processing, or used in a selection or validation test. Functions provide a convenient way to perform certain calculations and manipulations. There are two types of functions: Internal functions. Built into the WebFOCUS language, requiring no extra work to access or use. The following reporting and Maintain functions are internal functions. You can not replace any of these internal functions with your own functions of the same name. All other functions are external. ABS ASIS DMY, MDY, and YMD DECODE EDIT FIND LAST LOG LOOKUP MAX and MIN SQRT All Maintain-specific functions External functions. Stored in an external library that must be accessed. When invoking these functions, an argument specifying the output fie
Read more

IBI WebFOCUS - Difference (Preference) between Join and Match:

For most of the reports in our WebFOCUS reporting world, we usually pull data from multiple tables and and generate the report. We all know that we can either Join Data Sources(JOIN) or Merge Data Sources(MATCH) to create report from multiple tables. Which one to choose from JOIN and MATCH? Now the question is what is the diffrence between the two and which one to choose from the 2 option. To explain this let's understand how does they process. JOIN: Basically JOIN is temporary, virtual connection between 2 or more physical or logical sources. Data in the first data source (host file) determines which records are retrieved from cross-reference file. When a record from the host file of a one-to-many join has no corresponding record(s) in the cross-reference file, the record is automatically excluded from the report output.  To control this, you can SET ALL to ON, in which case records from the host file, without corresponding records in the cross-reference file, will be disp
Read more

IBI WebFOCUS - Testing and Debugging in WebFOCUS codes

You can debug a Web FOCUS application by querying your environment to display information such as file status, release, server information, and joins, as well as by identifying files you are using. Other debugging methods are available in Web FOCUS, including specialized Dialogue Manager Variables and traces performed from the Web Console. Debugging Your Application with Query Commands You can use query commands to display information about your metadata, data sources, language environment, Developer Studio, and Web FOCUS. This is useful for determining any aspects of your application that may be preventing the proper behavior of your application. You can query your environment with a query command executed in Developer Studio or Web FOCUS. The result of a query command is returned in your browser window or as a comment in the HTML file. Use the applicable Web browser functions to view the HTML comments (for example, View Source in Microsoft Internet Explorer). How to Issue
Read more