jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
129 lines (116 loc) • 5.21 kB
HTML
<html lang="en">
<head>
<title id='Description'>Chart Custom Element CustomStyling</title>
<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" />
<meta name="description" content="In this example Custom Element Chart has custom colors." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.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>
<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>
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);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
JQXElements.settings['chartContainer'] =
{
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,
minValue: '01-01-2019',
maxValue: '01-01-2018',
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' }
]
}
]
};
</script>
</head>
<body>
<jqx-chart settings='chartContainer' style="background-repeat: no-repeat; background-size:cover; width: 800px; height: 500px;"></jqx-chart>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Custom Element 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>
</body>
</html>