Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Jquery and HighCharts Question with WebFocus

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Jquery and HighCharts Question with WebFocus
 Login/Join
 
WFLurker
Gold member
posted
Just wondering if anyone here have incorporated Jquery Tabs and HighCharts.

At the moment we are using Jquery Tabs to display Report output. We also have a seperate fex that output an Interactive HighChart graph www.highcharts.com

We have a request to incorporate the Highchart into the Jquery Tab. We tried putting the highchart html into Jquery Tab 3 but its unstable and lags.


JQUERY TAB HTML

TABLE FILE CAR
SUM
SALES
BY COUNTRY
ON TABLE HOLD AS MYREPORT1 FORMAT HTML
END

TABLE FILE CAR
SUM
DEALER_COST
BY CAR
ON TABLE HOLD AS MYREPORT2 FORMAT HTML
END



-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Daily Sales Summary</title>
	<link rel="stylesheet" href="https://localhost/approot/jquery/development-bundle/themes/base/jquery.ui.all.css">
	<script src="https://localhost/approot/jquery/js/jquery-1.9.1.js"></script>
	<script src="https://localhost/approot/jquery/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="https://localhost/approot/jquery/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="https://localhost/approot/jquery/development-bundle/ui/jquery.ui.tabs.js"></script>
	<link rel="stylesheet" href="https://localhost/approot/jquery/development-bundle/demos/demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs();
	});
	</script>

<body>

<div id="tabs">
	<ul>
		[*]<a href="#tabs-1">Sales By Country View</a>
		[*]<a href="#tabs-2">Dealer Cost by Car Maker View</a>
		[*]<a href="#tabs-3">HighChart Graph</a>

	</ul>
	<div id="tabs-1">
!IBI.FIL.MYREPORT1;
	</div>
	<div id="tabs-2">
!IBI.FIL.MYREPORT2;
	</div>
	<div id="tabs-3">
[B]//put highchart html graph[/B]	</div>

</div>


</body>
</html>
-HTMLFORM END


HIGHCHART INTERACTIVE HTML
<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function () {
        $('#container').highcharts({
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Temperature and Rainfall in Tokyo'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{
                name: 'Rainfall',
                color: '#4572A7',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: ' mm'
                }
    
            }, {
                name: 'Temperature',
                color: '#89A54E',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });
    });
    

		</script>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>

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


WF 8105M
- Portal, Dashboard
- Rcaster, Data Migrator
- Windows 2012 Client Server
- Dev/App Studio 8105
- Data: SQL, Oracle, Neteeza,MVS
 
Posts: 78 | Registered: October 24, 2006Report This Post
WFLurker
Gold member
posted Hide Post
Sorry Guys it works. Error in the cut and paste of the highcharts script. Sweating


SET EXTSORT=ON
SET ALL = ON
SET ASNAMES = ON
SET BYDISPLAY = ON

TABLE FILE CAR
SUM
SALES
BY COUNTRY
ON TABLE HOLD AS MYREPORT1 FORMAT HTML
END

TABLE FILE CAR
SUM
DEALER_COST
BY CAR
ON TABLE HOLD AS MYREPORT2 FORMAT HTML
END



-HTMLFORM BEGIN
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Daily Sales Summary</title>
	<link rel="stylesheet" href="https://localhost/approot/jquery/development-bundle/themes/base/jquery.ui.all.css">
	<script src="https://localhost/approot/jquery/js/jquery-1.9.1.js"></script>
	<script src="https://localhost/approot/jquery/development-bundle/ui/jquery.ui.core.js"></script>
	<script src="https://localhost/approot/jquery/development-bundle/ui/jquery.ui.widget.js"></script>
	<script src="https://localhost/approot/jquery/development-bundle/ui/jquery.ui.tabs.js"></script>
	<script src="https://localhost/approot/highcharts/js/highcharts.js"></script>
    <script src="https://localhost/approot/highcharts/js/modules/exporting.js"></script>
	<link rel="stylesheet" href="https://localhost/approot/jquery/development-bundle/demos/demos.css">
	<script>
	$(function() {
		$( "#tabs" ).tabs();
	});


	$(function () {
        $('#container').highcharts({
            chart: {
                zoomType: 'xy'
            },
            title: {
                text: 'Average Monthly Temperature and Rainfall in Tokyo'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: [{
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }],
            yAxis: [{ // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: '#89A54E'
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: '#89A54E'
                    }
                }
            }, { // Secondary yAxis
                title: {
                    text: 'Rainfall',
                    style: {
                        color: '#4572A7'
                    }
                },
                labels: {
                    format: '{value} mm',
                    style: {
                        color: '#4572A7'
                    }
                },
                opposite: true
            }],
            tooltip: {
                shared: true
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                x: 120,
                verticalAlign: 'top',
                y: 100,
                floating: true,
                backgroundColor: '#FFFFFF'
            },
            series: [{
                name: 'Rainfall',
                color: '#4572A7',
                type: 'column',
                yAxis: 1,
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
                tooltip: {
                    valueSuffix: ' mm'
                }
    
            }, {
                name: 'Temperature',
                color: '#89A54E',
                type: 'spline',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                tooltip: {
                    valueSuffix: '°C'
                }
            }]
        });
    });  
	</script>

<body>

<div id="tabs">
	<ul>
		<li><a href="#tabs-1">Sales By Country View</a></li>
		<li><a href="#tabs-2">Dealer Cost by Car Maker View</a></li>
		<li><a href="#tabs-3">HighChart Graph</a></li>

	</ul>
	<div id="tabs-1">
!IBI.FIL.MYREPORT1;
	</div>
	<div id="tabs-2">
!IBI.FIL.MYREPORT2;
	</div>

	<div id="tabs-3">
    <div id ="container" style="min-width: 310px; height: 400px; margin: 0 auto">
	</div>

</div>


</body>
</html>
-HTMLFORM END


WF 8105M
- Portal, Dashboard
- Rcaster, Data Migrator
- Windows 2012 Client Server
- Dev/App Studio 8105
- Data: SQL, Oracle, Neteeza,MVS
 
Posts: 78 | Registered: October 24, 2006Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Jquery and HighCharts Question with WebFocus

Copyright © 1996-2020 Information Builders