jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
123 lines (117 loc) • 5.59 kB
HTML
<html lang="en">
<head>
<title id='Description'>JavaScript Chart Line Series with Custom Colors Example</title>
<meta name="description" content="This is an example of JavaScript Chart Line Series with Custom Colors." />
<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>
<style type="text/css">
.jqx-chart-axis-text, .jqx-chart-label-text, .jqx-chart-legend-text, .jqx-chart-axis-description, .jqx-chart-title-text, .jqx-chart-title-description
{
fill: #ffffff;
color: #ffffff;
}
</style>
<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,
padding: { left: 10, top: 5, right: 30, bottom: 5 },
titlePadding: { left: 10, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
backgroundImage: '../../../images/chart_background.jpg',
xAxis:
{
dataField: 'Date',
type: 'date',
baseUnit: 'month',
unitInterval: 1,
tickMarks: {
visible: true,
interval: 1,
color: '#FFFFFF',
dashStyle: '2,1'
},
gridLines: {
visible: true,
interval: 1,
color: '#FFFFFF',
dashStyle: '2,1'
},
labels:
{
angle: -45,
rotationPoint: 'topright',
offset: {x: 0, y: -25},
formatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
}
}
},
valueAxis:
{
displayValueAxis: true,
title: { text: 'Daily Closing Price<br>' },
gridLines: {
dashStyle: '2,1',
color: '#FFFFFF'
},
tickMarks: {
dashStyle: '2,1',
color: '#FFFFFF'
}
},
seriesGroups:
[
{
type: 'line',
series: [
{ dataField: 'S&P 500', displayText: 'S&P 500', lineColor: '#FFFFFF', lineColorSelected: '#DDDDDD', fillColor: '#FFFFFF' },
{ dataField: 'NASDAQ', displayText: 'NASDAQ', lineColor: '#0FF0FF', lineColorSelected: '#2EE2EE', fillColor: '#0FF0FF' }
]
}
]
};
// setup the chart
$('#chartContainer').jqxChart(settings);
});
</script>
</head>
<body class='default'>
<div id='chartContainer' style="background-repeat: no-repeat; background-size:cover; width: 800px; height: 500px">
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript chart line series with custom colors. You can see how to use the different settings in order to style the grid lines, line color and tick marks.
</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>