jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
134 lines (125 loc) • 6.62 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Range Selector Example</title>
<meta name="description" content="This is an example of Javascript Chart Range Selector and Zooming." />
<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="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.rangeselector.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "csv",
datafields: [
{ name: 'Date' },
{ name: 'Open' },
{ name: 'High' },
{ name: 'Low' },
{ name: 'Close' },
{ name: 'Volume' },
{ name: 'AdjClose' }
],
url: '../../sampledata/TSLA_stockprice.csv'
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
var dataItem = dataAdapter.records[itemIndex];
return '<DIV style="text-align:left"><b>Date: ' +
categoryValue.getDate() + '-' + months[categoryValue.getMonth()] + '-' + categoryValue.getFullYear() +
'</b><br />Open price: $' + dataItem.Open +
'</b><br />Close price: $' + dataItem.Close +
'</b><br />Daily volume: ' + dataItem.Volume +
'</DIV>';
};
// prepare jqxChart settings
var settings = {
title: "Tesla Motors Stock Price",
description: "(June 2017 - March 2018)",
enableAnimations: true,
animationDuration: 1500,
enableCrosshairs: true,
padding: { left: 5, top: 5, right: 30, bottom: 5 },
titlePadding: { left: 30, top: 5, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: 'Date',
type: 'date',
baseUnit: 'day',
labels:
{
formatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
}
},
rangeSelector: {
// Uncomment the line below to render the selector in a separate container
//renderTo: $('#selectorContainer'),
size: 80,
padding: { /*left: 0, right: 0,*/top: 0, bottom: 0 },
backgroundColor: 'white',
dataField: 'Close',
baseUnit: 'month',
gridLines: { visible: false },
serieType: 'area',
labels: {
formatFunction: function (value) {
return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
}
}
}
},
valueAxis:
{
title: { text: 'Price per share [USD]<br><br>' },
labels: { horizontalAlignment: 'right' }
},
colorScheme: 'scheme01',
seriesGroups:
[
{
type: 'line',
toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: 'Close', displayText: 'Close Price', lineWidth: 1, lineWidthSelected: 1 }
]
}
]
};
$('#chartContainer').jqxChart(settings).
on('rangeSelectionChanging', function (event) {
var args = event.args;
args.instance.description = args.minValue.getFullYear() + " - " + args.maxValue.getFullYear();
});
});
</script>
</head>
<body class='default'>
<div>
<div id='chartContainer' style="width:800px; height:500px;">
</div>
<!-- you can optionally render the selecor in this container -->
<div id='selectorContainer' style="width:500px; height:100px;">
</div>
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Javascript chart range selector and zooming. The chart data is prepared from a csv file. You can see an example of a complex tool tip custom formatting with the toolTipCustomFormatFn function. You can also see how to limit the duration of the animation with the animationDuration setting. The code also demonstrates how to render the selector in a separate container.
</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>