jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
124 lines (117 loc) • 5.65 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart spline series example</title>
<meta name="description" content="This is an example of JavaScript chart spline 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: "tab",
datafields: [
{ name: 'Year' },
{ name: 'HPI' },
{ name: 'BuildCost' },
{ name: 'Population' },
{ name: 'Rate' }
],
url: '../../sampledata/homeprices.txt'
};
var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
// prepare jqxChart settings
var settings = {
title: "U.S. Historical Home Prices (1950-2017)",
description: "Source: http://www.econ.yale.edu/~shiller/data.htm",
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 25, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis: {
dataField: 'Year',
minValue: 1947,
maxValue: 2017,
unitInterval: 5,
tickMarks: {
visible: true,
interval: 1
},
gridLines: {
visible: true,
interval: 5
}
},
colorScheme: 'scheme04',
seriesGroups:
[
{
type: 'line',
valueAxis:
{
unitInterval: 10,
padding: { left: 10 },
title: { text: 'U.S. Population (millions)<br>' },
gridLines: { visible: false }
},
series: [
{ dataField: 'Population', displayText: 'Population' }
]
},
{
type: 'spline',
valueAxis:
{
unitInterval: 1,
visible: false
},
series: [
{ dataField: 'Rate', displayText: 'Interest Rate' }
]
},
{
type: 'spline',
valueAxis:
{
unitInterval: 20,
title: { text: 'Index Value<br>' },
labels: {
horizontalAlignment: 'right',
formatSettings: { decimalPlaces: 0 }
}
},
series: [
{ dataField: 'HPI', displayText: 'Real Home Price Index' },
{ dataField: 'BuildCost', displayText: 'Building Cost Index' }
]
}
]
};
// 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 spline series. The chart data is loaded from a tab delimited text file. You can see that both line and spline types of series are set in the seriesGroups setting. You can also see how to set right horizontal alignment of the labels.
</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>