Create a HTML file called Chart.html that contains the following HTML code:
<html lang="en">
<head>
<title id='Description'>jqxChart Area Series Example</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.7.1.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/jqxchart.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,
downloadComplete: function () { },
loadComplete: function () { },
loadError: function () { }
});
// prepare jqxChart settings
var settings = {
title: "U.S. Stock Market Index Performance (2011)",
description: "NASDAQ Composite compared to S&P 500",
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
categoryAxis:
{
text: 'Category Axis',
textRotationAngle: 0,
dataField: 'Date',
formatFunction: function (value) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
return months[new Date(value).getMonth()];
},
showTickMarks: true,
tickMarksInterval: Math.round(dataAdapter.records.length / 12),
tickMarksColor: '#888888',
unitInterval: Math.round(dataAdapter.records.length / 12),
showGridLines: true,
gridLinesInterval: 3 * Math.round(dataAdapter.records.length / 12),
gridLinesColor: '#888888',
axisSize: 'auto'
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'area',
valueAxis:
{
unitInterval: 500,
minValue: 0,
maxValue: 3000,
displayValueAxis: true,
description: 'Daily Closing Price',
//descriptionClass: 'css-class-name',
axisSize: 'auto',
tickMarksColor: '#888888'
},
series: [
{ dataField: 'S&P 500', displayText: 'S&P 500' },
{ dataField: 'NASDAQ', displayText: 'NASDAQ' }
]
}
]
};
// setup the chart
$('#jqxChart').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='jqxChart' style="width:680px; height:400px">
</div>
</body>
</html>
In the Head section of the page, we include the jQuery javascript file, the jQWidgets core framework file – jqxcore.js, the jQWidgets data binding file – jqxdata.js, the main jqxChart plug-in file – jqxchart.js file, and the base jQWidgets stylesheet – jqx.base.css. On to the body of the page. we create a DIV tag as the placeholder for the chart with a unique ID = “jqxChart”. The chart is then instantiated using the jqxChart constructor function. The constructor takes in the following parameters: source – dataAdapter object, categoryAxis and seriesGroups objects, colorScheme(available values are from ‘scheme01′ to ‘scheme11′), showLegend(displays the legend section in the chart) and the Chart title. In the source object initialization, we specify the datafields array, the url(points to a txt data file) and we set the datatype to ‘csv’. The ‘nasdaq_vs_sp500.txt’ file is included in the jQWidgets installation package. In the seriesGroup object, the series group type is set to ‘area’ which means that the data will be visualized as Area Chart. The valueAxis definition specifies the appearance of the Y-axis. This series group contains two series that will render data corresponding to the ‘S&P 500’ and ‘NASDAQ’ dataFields. In this example we bind the Category Axis (horizontal X axis) to the Date property of our data source.
