jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
115 lines (109 loc) • 5.42 kB
HTML
<html lang="en">
<head>
<title id='Description'>This example shows how to integrate jqxChart with Knockout.
</title>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../scripts/json2.js"></script>
<script type="text/javascript" src="../../../scripts/knockout-3.0.0.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/jqxchart.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxknockout.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
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 ChartModel = function (items) {
this.items = ko.observableArray(items);
this.updateItem = function () {
var newItems = new Array();
for (var i = 0; i < 7; i++) {
var item = $.extend({}, sampleData[i]);
item.Keith = Math.floor(Math.random() * 50);
item.Erica = Math.floor(Math.random() * 30);
item.George = Math.floor(Math.random() * 90);
newItems[i] = item;
}
this.items(newItems);
};
};
ko.applyBindings(new ChartModel(sampleData));
});
</script>
</head>
<body class='default'>
<div id='jqxWidget'>
<div id="chart" style="width: 670px; height: 400px;" data-bind='jqxChart: {
title: "Fitness & exercise weekly scorecard",
description: "Time spent in vigorous exercise",
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: items,
categoryAxis:
{
dataField: "Day",
valuesOnTicks: false,
showGridLines: true
},
colorScheme: "scheme01",
enableAnimations: true,
seriesGroups:
[
{
type: "column",
columnsGapPercent: 50,
seriesGapPercent: 0,
valueAxis:
{
unitInterval: 10,
minValue: 0,
maxValue: 100,
displayValueAxis: true,
description: "Time in minutes",
axisSize: "auto",
tickMarksColor: "#888888"
},
series: [
{ dataField: "Keith", displayText: "Keith"},
{ dataField: "Erica", displayText: "Erica"},
{ dataField: "George", displayText: "George"}
]
}
]
}'>
</div>
<br />
<div style="margin-bottom: 10px;">
<input id="updateButton" type="button" data-bind="click: updateItem, jqxButton: {}" value="Update Data" />
</div>
<table>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: Day"></td>
<td data-bind="text: Keith"></td>
<td data-bind="text: Erica"></td>
<td data-bind="text: George"></td>
</tr>
</tbody>
</table>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>