jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
134 lines (121 loc) • 6.26 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Chart with Grid control</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of a Grid control inside of an Custom Element Chart." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.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="../../../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/jqxmenu.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/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
var sampleData =
[
{ Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
{ Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
{ Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
{ Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
{ Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
{ Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
{ Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
];
var adapter = new jqx.dataAdapter({
datafields: [
{ name: 'Day', type: 'string' },
{ name: 'Keith', type: 'number' },
{ name: 'Erica', type: 'number' },
{ name: 'George', type: 'number' }
],
localdata: sampleData,
datatype: 'array'
});
JQXElements.settings['chartSettings'] =
{
title: 'Fitness & exercise weekly scorecard',
description: 'Time spent in vigorous exercise',
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
xAxis:
{
dataField: 'Day',
gridLines: { visible: true }
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'column',
columnsGapPercent: 50,
seriesGapPercent: 0,
valueAxis:
{
visible: true,
unitInterval: 10,
minValue: 0,
maxValue: 100,
title: { text: 'Time in minutes' }
},
series: [
{ dataField: 'Keith', displayText: 'Keith' },
{ dataField: 'Erica', displayText: 'Erica' },
{ dataField: 'George', displayText: 'George' }
]
}
]
};
JQXElements.settings['gridSettings'] =
{
filterable: true,
showfilterrow: true,
source: adapter,
columns:
[
{ text: 'Day', width: '40%', datafield: 'Day', filteritems: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'], filtertype: 'checkedlist' },
{ text: 'Keith', width: '20%', datafield: 'Keith' },
{ text: 'Erica', width: '20%', datafield: 'Erica' },
{ text: 'George', width: '20%', datafield: 'George' }
]
};
window.onload = function() {
var myChart = document.querySelector('jqx-chart');
var myGrid = document.querySelector('jqx-grid');
myGrid.addEventListener('filter', function() {
var rows = myGrid.getrows();
var chart = myChart.getInstance();
chart.source = rows;
chart.update();
});
};
</script>
</head>
<body>
<jqx-grid settings="gridSettings"></jqx-grid>
<jqx-chart settings="chartSettings" style="margin-top: 50px; width: 850px; height: 400px; position: relative; left: 0px; top: 0px;"></jqx-chart>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Custom element Chart with Grid control. The chart data is prepared as an array. The chart is updated when the content of the grid is changed.
</div>
</body>
</html>