Skip to content

Instantly share code, notes, and snippets.

/jqPlot_bsp.htm

Created June 11, 2012 13:55
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/2910208 to your computer and use it in GitHub Desktop.
Save anonymous/2910208 to your computer and use it in GitHub Desktop.
Download ZIP
jqPlot chart in BSP pages (ABAP)
Raw
jqPlot_bsp.htm
<!DOCTYPE html>
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquerymobile page</title>
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="jquery.jqplot.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
<script src="jquery.jqplot.min.js"></script>
<script src="plugins/jqplot.dateAxisRenderer.min.js"></script>
<%
DATA: lv_line1 TYPE string
,lv_price TYPE char20
.
FIELD-SYMBOLS: <fs> TYPE sflight.
CLEAR: lv_line1.
LOOP AT flight_tab ASSIGNING <fs>
WHERE carrid = 'LH'.
lv_price = <fs>-paymentsum.
CONDENSE lv_price.
CONCATENATE lv_line1 `['`
<fs>-fldate(4) `-`
<fs>-fldate+4(2) `-`
<fs>-fldate+6(2)
`', `
lv_price
`], `
INTO lv_line1.
ENDLOOP.
lv_line1 = `[` && lv_line1 && `]`.
%>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var line1 = <%= lv_line1 %>;
var plot1b = $.jqplot('chart1',[line1],{
title: 'Lufhansa flights',
stackSeries: true,
showMarker: false,
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
}
}
});
});
</script>
</head>
<style>
.footer-docs {
padding: 5px 0;
}
.footer-docs p {
margin-left:15px;
font-weight: normal;
font-size: .9em;
}
</style>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Flight booking</h1>
</div>
<div data-role="content"> <ul data-role="listview">
<%
DATA: lv_date TYPE char10.
LOOP AT flight_tab ASSIGNING <fs>
WHERE carrid = 'LH'.
%>
<li>
<p class="ui-li-aside"><strong>seats</strong></p>
<h3><%= <fs>-carrid %> - <%= <fs>-connid %> (<%= <fs>-planetype %>)</h3>
<span class="ui-li-count"><%= <fs>-seatsocc %> / <%= <fs>-seatsmax %></span>
<p><%= <fs>-price %><%= <fs>-currency %></p>
</li>
<%
ENDLOOP.
%>
</ul>
<div id="chart1" style="width:500px;height:300px;margin-top:40pt;"></div>
</div>
<div data-role="footer" class="footer-docs" data-theme="c">
<p>Enterprise productions</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment