jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
101 lines (93 loc) • 4.88 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart area series example</title>
<meta name="description" content="This is an example of JavaScript Chart Area series." />
<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">
$(document).ready(function () {
// prepare the data
var source =
{
datatype: "csv",
datafields: [
{ name: 'Date' },
{ name: 'S&P 500' },
{ name: 'NASDAQ' }
],
url: '../../sampledata/nasdaq_vs_sp500.txt'
};
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'];
// prepare jqxChart settings
var settings = {
title: "U.S. Stock Market Index Performance",
description: "NASDAQ Composite compared to S&P 500",
enableAnimations: true,
showLegend: true,
enableCrosshairs: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
dataField: 'Date',
type: 'date',
baseUnit: 'month',
valuesOnTicks: true,
labels: {
angle: -45,
rotationPoint: 'topright',
offset: {x: 0, y: -15},
formatFunction: function (value) {
return months[value.getMonth()] + '\'' + value.getFullYear().toString().substring(2);
},
},
toolTipFormatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
}
},
valueAxis:
{
title: { text: 'Daily Closing Price<br>' }
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'area',
alignEndPointsWithIntervals: true,
series: [
{ dataField: 'NASDAQ', displayText: 'NASDAQ', opacity: 0.7 },
{ dataField: 'S&P 500', displayText: 'S&P 500', opacity: 0.8 }
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="width:850px; height:500px">
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript Chart Area series. The chart data is loaded from a csv file. The type of the chart is set to area. The labels of the xAxis are formatted with the formatFunction. You can see how to align the end points with intervals through the alignEndPointsWithIntervals setting. The labels on the xAxis are rotated to 45 degrees. You can also see how to do a toolTip formatting.
</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>