jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
107 lines (101 loc) • 5.18 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Chart LineSeriesMarkers</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." />
<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="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.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="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
var sampleData =
[
{ Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
{ Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
{ Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
{ Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
{ Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
{ Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
{ Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
];
JQXElements.settings['chartSettings'] =
{
title: 'Fitness & exercise weekly scorecard',
description: 'Time spent in vigorous exercise by activity',
enableAnimations: true,
showLegend: true,
padding: { left: 10, top: 10, right: 15, bottom: 10 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: sampleData,
colorScheme: 'scheme05',
xAxis: {
dataField: 'Day',
unitInterval: 1,
tickMarks: { visible: true, interval: 1 },
gridLinesInterval: { visible: true, interval: 1 },
valuesOnTicks: false,
padding: { bottom: 10 }
},
valueAxis: {
unitInterval: 10,
minValue: 0,
maxValue: 50,
title: { text: 'Time in minutes<br><br>' },
labels: { horizontalAlignment: 'right' }
},
seriesGroups:
[
{
type: 'line',
series:
[
{
dataField: 'Swimming',
symbolType: 'square',
labels:
{
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
},
{
dataField: 'Running',
symbolType: 'square',
labels:
{
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
}
]
}
]
}
</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 Custom element Chart Line series with symbols and custom labels. The data is loaded from array. The type of the seriesGroups setting is set to line. You can how to set the symbolType setting to square and how to format the labels.
</div>
</body>
</html>