jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
94 lines (85 loc) • 4.45 kB
HTML
<html lang="en">
<head>
<title id='Description'>Chart Custom Element</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="This is an example of Custom element Chart line series. The data is loaded in the chart from a csv file using JavaScript. The type of the seriesGroups setting is set to line. Setting the valuesOnTicks option enables the data to be shown for each date. You can also see how to set the xAxis labels under 45 degrees angle. In order to change the color scheme you have to set the colorScheme setting. The animation is enabled with the enableAnimations option" />
<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>
<script>
var source =
{
datatype: "tab",
datafields: [
{ name: 'Date' },
{ name: 'Referral' },
{ name: 'SearchPaid' },
{ name: 'SearchNonPaid' }
],
url: '../../../../../sampledata/website_analytics.txt'
};
var dataAdapter = new jqx.dataAdapter(source);
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
JQXElements.settings['chartSettings'] =
{
title: "Web Traffic Analysis",
description: "Unique monthly site visitors (percentage stacked)",
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 5, right: 10, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: dataAdapter,
xAxis:
{
type: 'date',
baseUnit: 'day',
dataField: 'Date',
valuesOnTicks: true,
labels: {
formatFunction: function (value) {
return value.getDate();
}
},
gridLines: { visible: false },
toolTipFormatFunction: function (value) {
return value.getDate() + '-' + months[value.getMonth()] + '-' + value.getFullYear();
}
},
valueAxis:
{
title: { text: 'Daily visitors' },
labels: { horizontalAlignment: 'right' }
},
colorScheme: 'scheme06',
seriesGroups:
[
{
type: 'stackedarea100',
series: [
{ dataField: 'SearchNonPaid', displayText: 'Organic Search Traffic' },
{ dataField: 'SearchPaid', displayText: 'Paid Search Traffic' },
{ dataField: 'Referral', displayText: 'Referral Traffic' }
]
}
]
}
</script>
</head>
<body>
<jqx-chart settings="chartSettings" style="width: 850px; height: 500px;"></jqx-chart>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of JavaScript Chart 100 % stacked area series. The type of the series is stackedarea100. The valueAxis labels horizontal alignment is set to right.
</div>
</body>
</html>