jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
184 lines (168 loc) • 7.76 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>
</body>
</html>