jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
129 lines (122 loc) • 5.26 kB
HTML
<html lang="en">
<head>
<title id="Description">Using jqxChart with JSP and MySQL.</title>
<link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
<style type="text/css">
.labels {
font-size: smaller;
}
</style>
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
var source = {
datatype: "json",
datafields: [{
name: 'ProductName',
type: 'string'
}, {
name: 'UnitsInStock',
type: 'int'
}],
data: {
category: 1
},
url: 'jsp/select-chart-data.jsp',
async: true
};
var dataAdapter = new $.jqx.dataAdapter(source);
var currentCategory = 1;
var settings = {
title: "Availability of Products",
description: "in Category 1",
padding: {
left: 5,
top: 5,
right: 15,
bottom: 5
},
titlePadding: {
left: 90,
top: 0,
right: 0,
bottom: 10
},
source: dataAdapter,
xAxis: {
dataField: 'ProductName',
displayText: 'Product Name',
gridLines: {
visible: true
},
valuesOnTicks: false,
type: 'basic',
labels: {
class: 'labels',
angle: 90,
formatFunction: function (value) {
return value.replace(/\?/g, '');
}
},
flip: false
},
colorScheme: 'scheme01',
seriesGroups: [{
type: 'column',
columnsGapPercent: 30,
seriesGapPercent: 0,
orientation: 'horizontal',
valueAxis: {
minValue: 0,
unitInterval: 10,
description: 'Units in Stock',
flip: true
},
series: [{
dataField: 'UnitsInStock',
displayText: 'Units in Stock'
}]
}]
};
// select the chartContainer DIV element and render the chart.
$('#chartContainer').jqxChart(settings);
$('#jqxDropDownList').jqxDropDownList({
source: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'],
width: 200,
height: 25,
autoDropDownHeight: true,
selectedIndex: 0
});
$('#jqxDropDownList').on('select', function (event) {
var args = event.args;
if (args) {
var index = args.index;
currentCategory = index + 1;
source.data.category = currentCategory;
dataAdapter.dataBind();
$('#chartContainer').jqxChart('refresh');
$('#chartContainer').jqxChart({
description: "in Category " + currentCategory
});
}
});
});
</script>
</head>
<body>
<div id='chartContainer' style="width: 860px; height: 600px; margin-bottom: 25px;"></div>
<strong>Choose Category:</strong>
<div id="jqxDropDownList" style="margin-top: 5px;"></div>
</body>
</html>