jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
189 lines (171 loc) • 8.05 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Live Updates Performance Example</title>
<meta name="description" content="This is an example of JavaScript Chart Live Updates Performance." />
<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="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.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/jqxslider.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxresponse.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var refreshTimeout = 100;
var response = new $.jqx.response();
if (response && response.device)
{
if (response.device.type == 'Tablet')
{
refreshTimeout = 150;
}
else if (response.device.width < 800 ||
response.device.height < 500 ||
response.device.type == 'Phone' ||
(response.browser.svg == false && response.browser.canvas == false)
)
{
refreshTimeout = 1000;
}
}
var data = [];
var max = 200;
for (var i = 0; i < 20; i++) {
data.push({
key: i,
value1: (Math.random() * 200) % 200 + 200,
value2: (Math.random() * 200) % 200 + 500,
value3: (Math.random() * 200) % 200,
});
}
// prepare jqxChart settings
var settings = {
title: "Live updates performance",
description: "Data changes every " + refreshTimeout + " milliseconds",
enableAnimations: false,
showLegend: true,
padding: { left: 10, top: 10, right: 10, bottom: 10 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: data,
xAxis:
{
dataField: 'key',
unitInterval: 1,
valuesOnTicks: true,
gridLines: {visible: false}
},
valueAxis:
{
minValue: 0,
maxValue: 750,
title: {text: 'Index Value<br>'},
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'line',
useGradientColors: false,
series: [
{ dataField: 'value1', displayText: 'value1', lineWidth: 2, symbolType: 'circle' }
]
},
{
type: 'spline',
useGradientColors: false,
columnsGapPercent: 50,
alignEndPointsWithIntervals: true,
series: [
{ dataField: 'value2', displayText: 'value2'}
]
},
{
type: 'column',
useGradientColors: false,
columnsGapPercent: 50,
alignEndPointsWithIntervals: true,
series: [
{ dataField: 'value3', displayText: 'value3'}
]
}
]
};
// create the chart
$('#chartContainer').jqxChart(settings);
// get the chart's instance
var chart = $('#chartContainer').jqxChart('getInstance');
// color scheme drop down
var colorsSchemesList = ["scheme01", "scheme02", "scheme03", "scheme04", "scheme05", "scheme06", "scheme07", "scheme08"];
$("#dropDownColors").jqxDropDownList({ source: colorsSchemesList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100, enableBrowserBoundsDetection: true });
$('#dropDownColors').on('change', function (event) {
var value = event.args.item.value;
chart.colorScheme = value;
chart.update();
});
var timerFunction = function () {
data.splice(0, 1);
data.push({ key: data[data.length - 1].key + 1,
value1: (Math.random() * 200) % 200 + 200,
value2: (Math.random() * 200) % 200 + 500,
value3: (Math.random() * 200) % 200,
});
$('#chartContainer').jqxChart('update');
};
// auto update timer
var ttimer = setInterval(timerFunction, refreshTimeout);
$('#btnPauseResume')
.jqxButton({ width: 160 })
.bind('click', function () {
if (ttimer) {
clearInterval(ttimer);
$('#btnPauseResume').val('Resume');
ttimer = undefined;
}
else {
ttimer = setInterval(timerFunction, refreshTimeout);
$('#btnPauseResume').val('Pause');
}
});
});
</script>
</head>
<body class='default'>
<p>
<div id='chartContainer' style="width: 850px; height: 500px">
</div>
</p>
<table style="width: 680px">
<tr>
<td>
<p style="font-family: Verdana; font-size: 12px; width:170px;">Pause / Resume updates:
</p>
<input type="button" id="btnPauseResume" value="Pause" />
</td>
<td style="padding-left: 50px;">
<p style="font-family: Verdana; font-size: 12px;">Select color scheme:
</p>
<div id='dropDownColors'>
</div>
</td>
</tr>
</table>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript Chart live updates performance. You can see how to determine the type of the device with jqxResponse. Different timeout is set for tablets, phones and PCs.
</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>