[SOLVED] jquery and webfocus

Master

posted

-* Focexec: jQuery02.fex
APP PREPENDPATH IBISAMP
-RUN
TABLE FILE GGPRODS
SUM PRODUCT                             NOPRINT 
COMPUTE COUNTER1/I2 = COUNTER + 1;      NOPRINT
COMPUTE COUNTER2/I2 = COUNTER - 1;      NOPRINT
COMPUTE JSPRODARRAY/A50 = 'availableTags[' |  EDIT(COUNTER2) | '] = "' |
                           PRODUCT         || '";';
BY PRODUCT                              NOPRINT
ON TABLE SET HOLDLIST PRINTONLY 
ON TABLE SAVE AS SVARRAY
END
-RUN
-SET &TTLPRODS = &LINES;
-*
-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Select Gotham Grinds Products</title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
 <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
 <link rel="stylesheet" href="/resources/demos/style.css" />
 <script>
   $(function() {
     var availableTags = new Array(!IBI.AMP.TTLPRODS;);
-INCLUDE svarray.ftm
     $( "#tags" ).autocomplete({
        source: availableTags
     });
   });
 </script>
</head>
<body>
 <div class="ui-widget">
  <label for="tags">Products: </label>
  <input id="tags" />
 </div>
</body>
</html>
-HTMLFORM END

This message has been edited. Last edited by: David Briars,

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

BI_Developer

Platinum Member

posted

Thanks David. I am able to play with these examples.
Can we use jquery to animate webfocus graphs or use webfocus data to create graphs in jquery?

WF 8.2.01 APP STUDIO
PDF,HTML,EXL2K,Active

Posts: 139 | Registered: July 21, 2011

Ignored post by BI_Developer posted

Master

posted

quote:
Thanks David. I am able to play with these examples.

That's great.

quote:
Can we use jquery to animate webfocus graphs or use webfocus data to create graphs in jquery?

At the moment, we are not using any of the jQuery graph/chart plugins.

I attended a Summit 2012 presentation called 'JQuery and WebFOCUS: Creating a Robust Interactive Web Reporting Environment' given by folks from Insperity. This presentation did cover creating interactive charts with WebFOCUS and a jQuery graph/chart plugin. The .pptx was available to conference attendees on the IB website. If you can't obtain a copy there, perhaps your tech rep can send you a copy.

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

JohnO

Member

posted

Another method of using jquery is to call WebFOCUS to return csv data and feed that into client side jquery graphs, grids, etc. probably after converting it to JSON.

Unfortunately WF does not have a

 HOLD FORMAT JSON

- and even if they did, it would probably look like

  HOLD FORMAT XML

 HOLD FORMAT XMLRAW

which is bloated and convoluted.

WF 7.6.8, Windows
Any output format: HTML, Excel, PDF, XML, etc.

Posts: 7 | Registered: July 14, 2009

Ignored post by JohnO posted

Master

posted

Here is an example using WebFOCUS, jQuery, and Highcharts JS, running against an IB sample file.

Focexec 'getdollars' gets the chart data via an Ajax call from the webpage:

-* File getdollars.fex
-DEFAULTH &CATEGORY = 'Coffee'
TABLE FILE GGSALES
 SUM DOLLARS
     BUDDOLLARS
 BY CATEGORY
 BY PRODUCT
 IF CATEGORY EQ &CATEGORY
 ON TABLE PCHOLD FORMAT XML
END

Focexec HighCharts04 is the webpage rendered by the user.

-*
-* Focexec: HighCharts04.fex
-*
-* Create Product Category option tags.
-*
DEFINE FILE GGSALES
 K1/A14 = '<OPTION VALUE=';
 K2/A1  = '>';
 CATEGORY_OPT/A200 = K1 | CATEGORY || K2 | CATEGORY;
END
TABLE FILE GGSALES
 SUM CATEGORY_OPT
 BY  CATEGORY_OPT NOPRINT
 ON  TABLE SET HOLDLIST PRINTONLY
 ON TABLE HOLD AS CATOPT FORMAT ALPHA
END
-RUN
-*
-* Display web page to user.
-*
-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Product Sales v. Budget Chart</title>
-* Bring in jQuery JS library.
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
-* Bring in Highcharts JS charting library.
 <script src="/approot/mypubs/highcharts.js"></script>
 <script src="/approot/mypubs/gray.js"></script>
 <script type="text/javascript">
   //
   // Bar Chart Settings.
   //
   function chartset() {
	 $(function () {
	 var chart;
     $(document).ready(function() {
       options = {
          chart: {
            renderTo: 'container',
            type: 'bar'
          },
          title: {
            text: 'Product Sales v. Budget'
          },
          xAxis: {
		    categories: []
          },
          series: [{
            name: 'Dollar Sales',
            data: []
          }, {
            name: 'Budget Dollars',
            data: []
          }]
        }
	   });
	  });
   }
</script>
<script type="text/javascript">
 //
 // Retrieve products from reporting server, and render chart.  
 //
 function getproducts() {
  selectedcat = $('#category').val();
  var url = "/ibi_apps/WFServlet" + "?" + "IBIF_ex=MyPubs/getdollars.fex";
  // Ajax call for products.  
  $.get(url,{ CATEGORY: selectedcat },
   function(data, status, xhr) {
    var xmlx = xhr.responseText;
	allproducts = [];
	options.series[0].data = [];
	options.series[1].data = [];
    // Iterate through XML to obtain products, dollars, and budget dollars.  
    $(xmlx).find('td').each(function(){
     tagvalue = $(this).text();
     $.each(this.attributes, function(i, attrib) {
	  var value = attrib.value;
      // Column 1 is PRODUCT.
	  if (value == "c1") {
	   allproducts.push([ tagvalue ]);
	  }
      // Column 2 is DOLLARS.
      if (value == "c2") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[0].data.push( xtagvalue );
	  }
      // Column 3 is BUDDOLLARS.  
      if (value == "c3") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[1].data.push( xtagvalue );
	  }
	 });
   });
   options.xAxis.categories = allproducts;
   // Create bar chart.
   chart = new Highcharts.Chart(options);
  });
 }
</script>
</head>
<body onLoad="chartset(); getproducts();">
 Category
 <SELECT id="category" onChange="getproducts();">
  !IBI.FIL.CATOPT;
 </select>
 <br><br>
 <div id="container" style="width: 100%; height: 400px"></div>
</body>
</html>
-HTMLFORM END

Screen shot upon rendering page:

Screen shot upon clicking 'Gifts':

Highcharts JS URL: http://www.highcharts.com/

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

Francis Mariani

Expert

posted

David,

Thanks for sharing your knowledge of Highcharts with us - quite amazing stuff.

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

Hans

Member

posted

I do presentations about Enhancing your WebFOCUS Dashboards With jQuery nationwide. I've presented at the Summit 2012 and will present this year again in Orlando. This year I will be handing out open source code examples. If anyone is planning on going this year, look for me... Hans Lim.

WebFOCUS 7.6
Windows, All Outputs

Posts: 12 | Registered: March 06, 2012

Ignored post by Hans posted

Master

posted

Thanks Hans. I will be at Summit 2013 and am looking forward to attending your presentation.

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

bug

Platinum Member

posted

quote:
Originally posted by Hans:
I do presentations about Enhancing your WebFOCUS Dashboards With jQuery nationwide. I've presented at the Summit 2012 and will present this year again in Orlando. This year I will be handing out open source code examples. If anyone is planning on going this year, look for me... Hans Lim.

Hans, are you from IBI? If not, do you have a website I can check what you have to offer?

Thanks.

7.66 and 7.704
System: Windows / AIX / Linux
Output: Mostly HTML, with some PDF, Excel and Lotus(!)

Posts: 147 | Location: Toronto (GTA) | Registered: May 25, 2005

Ignored post by bug posted

cs_source

Gold member

posted

wow very impressive thread, i will also ask what bug has asked towards Hans

WebFocus 8.02, SQL Server 2008r2

Posts: 51 | Registered: November 30, 2012

Ignored post by cs_source posted

Sivakumaran Elangovan

Member

posted

Hi , Am using jquery like this in my dev code.
This jquery is used to populate values on to UI controls like, listbox, comboboxes based on certain flow of events.

I have included the code of jquery latest.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js">
<script type="text/javascript">
var _url = "/ibi_apps/WFServlet?IBIF_ex=";
var _ibiapp = "prr_dev/";
var _procedure_for_div = "per_division_generate";
var _procedure_for_dept = "per_department_generate";
var _procedure_for_class = "per_class_load_multi";
var _procedure_for_subclass= "per_subcl_load_multi";
var _procedure_for_dpci= "per_dpci_load_multi";
var _procedure_for_dpci_for_class= "per_dpci_load_for_class";
var _procedure_for_year="per_year_load";
var _procedure_for_startdate="per_start_date_load";
var _procedure_for_enddate="per_end_date_load";

function getyear()
{
$.ajax({
type : "GET",
url : _url+_ibiapp +_procedure_for_year ,
data : "SEL=" + $("#combobox_for_startweekyear").val(),
dataType: "html",
success : function(_data)
{
$('#combobox_for_startweekyear').empty();
$(_data).find('tr').each(function()
{
var value1 = $(this).children('td[colnum="c3"]').text();
var display = $(this).children('td[colnum="c4"]').text();
$('#combobox_for_startweekyear').append('\n");
$('#combobox_for_endweekyear').append('\n");
}
);
}
}
);

This is working fine when I use this code and run the fex file from webfocus dev studio.. but at times, when opening the link from external browser, the url is throwing "Object Expected Error".. I am pretty sure this is with jquery code.. What has to be done to resolve..? Is that we have to deploy the jquery lib files to our local environment? I am completely new to jquery and even webfocus.. please help me..

Webfocus 7.6
Excel, HTML, PDF

Posts: 13 | Registered: May 23, 2013

Ignored post by Sivakumaran Elangovan posted

Gaurav

Gold member

posted

quote:

Originally posted by David Briars:
Here is an example using WebFOCUS, jQuery, and Highcharts JS, running against an IB sample file.

Focexec 'getdollars' gets the chart data via an Ajax call from the webpage:

-* File getdollars.fex
-DEFAULTH &CATEGORY = 'Coffee'
TABLE FILE GGSALES
 SUM DOLLARS
     BUDDOLLARS
 BY CATEGORY
 BY PRODUCT
 IF CATEGORY EQ &CATEGORY
 ON TABLE PCHOLD FORMAT XML
END

Focexec HighCharts04 is the webpage rendered by the user.

-*
-* Focexec: HighCharts04.fex
-*
-* Create Product Category option tags.
-*
DEFINE FILE GGSALES
 K1/A14 = '<OPTION VALUE=';
 K2/A1  = '>';
 CATEGORY_OPT/A200 = K1 | CATEGORY || K2 | CATEGORY;
END
TABLE FILE GGSALES
 SUM CATEGORY_OPT
 BY  CATEGORY_OPT NOPRINT
 ON  TABLE SET HOLDLIST PRINTONLY
 ON TABLE HOLD AS CATOPT FORMAT ALPHA
END
-RUN
-*
-* Display web page to user.
-*
-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Product Sales v. Budget Chart</title>
-* Bring in jQuery JS library.
 <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
-* Bring in Highcharts JS charting library.
 <script src="/approot/mypubs/highcharts.js"></script>
 <script src="/approot/mypubs/gray.js"></script>
 <script type="text/javascript">
   //
   // Bar Chart Settings.
   //
   function chartset() {
	 $(function () {
	 var chart;
     $(document).ready(function() {
       options = {
          chart: {
            renderTo: 'container',
            type: 'bar'
          },
          title: {
            text: 'Product Sales v. Budget'
          },
          xAxis: {
		    categories: []
          },
          series: [{
            name: 'Dollar Sales',
            data: []
          }, {
            name: 'Budget Dollars',
            data: []
          }]
        }
	   });
	  });
   }
</script>
<script type="text/javascript">
 //
 // Retrieve products from reporting server, and render chart.  
 //
 function getproducts() {
  selectedcat = $('#category').val();
  var url = "/ibi_apps/WFServlet" + "?" + "IBIF_ex=MyPubs/getdollars.fex";
  // Ajax call for products.  
  $.get(url,{ CATEGORY: selectedcat },
   function(data, status, xhr) {
    var xmlx = xhr.responseText;
	allproducts = [];
	options.series[0].data = [];
	options.series[1].data = [];
    // Iterate through XML to obtain products, dollars, and budget dollars.  
    $(xmlx).find('td').each(function(){
     tagvalue = $(this).text();
     $.each(this.attributes, function(i, attrib) {
	  var value = attrib.value;
      // Column 1 is PRODUCT.
	  if (value == "c1") {
	   allproducts.push([ tagvalue ]);
	  }
      // Column 2 is DOLLARS.
      if (value == "c2") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[0].data.push( xtagvalue );
	  }
      // Column 3 is BUDDOLLARS.  
      if (value == "c3") {
	   xtagvalue = parseInt(tagvalue,10);
	   options.series[1].data.push( xtagvalue );
	  }
	 });
   });
   options.xAxis.categories = allproducts;
   // Create bar chart.
   chart = new Highcharts.Chart(options);
  });
 }
</script>
</head>
<body onLoad="chartset(); getproducts();">
 Category
 <SELECT id="category" onChange="getproducts();">
  !IBI.FIL.CATOPT;
 </select>
 <br><br>
 <div id="container" style="width: 100%; height: 400px"></div>
</body>
</html>
-HTMLFORM END

Screen shot upon rendering page:

Screen shot upon clicking 'Gifts':

Highcharts JS URL: http://www.highcharts.com/

Good Morning David,

I hope you are doing well.

I am fascinated by all the work you are doing in the jQuery.

I have one query. My admin told me I'm working in MRE and cannot make two fex as I can't give url in MRE (Thats what I have been told). Can you update above query by writing everything in one file. i.e. writing the code of XML feeder file in the same fex and then show me how and where to execute it.

Thanks in advance.

Best Regards,
Gaurav Tyagi

WebFOCUS 8.1.05
Windows, All Outputs

Posts: 58 | Registered: November 19, 2014

Ignored post by Gaurav posted

Ricardo Augusto

Guru

posted

quote:
David

WebFOCUS 8.1.05 / APP Studio

Posts: 272 | Location: Brazil | Registered: October 31, 2006

Ignored post by Ricardo Augusto posted

Master

posted

Thanks Ricardo!

Yep, this was a nice thread, and there were a couple of other similar one's as well, 'back in those days'. :-)

Yes, for sure, we've been able to meet some important user requirements, by integrating WebFOCUS and jQuery.

(As a side note... We were kicking the tires on Highcharts when we were on WF 7, and didn't have a sense for when WF 8 would be available.

We did end up holding off on visualizations, until we obtained WF 8. We have since standardized on WF HTML5 charts, and would only look at another tool if we had a requirement for a chart that wasn't available in WF 8.)

Posts: 822 | Registered: April 23, 2003

Ignored post by David Briars posted

Rifaz

Guru

posted

Where is the Like button? Thanks a lot David.

-Rifaz

WebFOCUS 7.7.x and 8.x

Posts: 406 | Location: India | Registered: June 13, 2013

Ignored post by Rifaz posted