jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
108 lines (101 loc) • 5.01 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Chart ColumnRange</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 ColumnRange." />
<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/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>
<script>
var data =
[
{ 'month': 'Jan', 'min': -1.9, 'max': 3.7, 'avg': 0.2 },
{ 'month': 'Feb', 'min': -0.9, 'max': 5.9, 'avg': 1.1 },
{ 'month': 'Mar', 'min': 0.8, 'max': 9.8, 'avg': 4.9 },
{ 'month': 'Apr', 'min': 4.1, 'max': 13.9, 'avg': 8.7 },
{ 'month': 'May', 'min': 8.0, 'max': 18.4, 'avg': 13.1 },
{ 'month': 'Jun', 'min': 11.3, 'max': 22.2, 'avg': 16.6 },
{ 'month': 'Jul', 'min': 13.3, 'max': 25.3, 'avg': 18.4 },
{ 'month': 'Aug', 'min': 13.0, 'max': 24.4, 'avg': 17.6 },
{ 'month': 'Sep', 'min': 10.3, 'max': 20.8, 'avg': 14.3 },
{ 'month': 'Oct', 'min': 6.6, 'max': 14.9, 'avg': 9.2 },
{ 'month': 'Nov', 'min': 2.1, 'max': 8.4, 'avg': 4.2 },
{ 'month': 'Dec', 'min': -0.5, 'max': 4.5, 'avg': 1.5 }
];
var toolTipCustomFormatFn = (value, itemIndex, serie, group, categoryValue, categoryAxis) => {
var dataItem = data[itemIndex];
return '<DIV style="text-align:left"><b>Month: ' +
categoryValue + '</b><br />Min: ' +
dataItem.min + '°<br />Max: ' +
dataItem.max + '°<br />Average: ' +
dataItem.avg + '°</DIV>';
};
JQXElements.settings['chartSettings'] =
{
title: 'Weather in Geneva, Switzerland',
description: 'Climatological Information about Geneva',
enableAnimations: true,
showLegend: true,
padding: { left: 5, top: 5, right: 5, bottom: 5 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
enableCrosshairs: true,
source: data,
colorScheme: 'scheme05',
xAxis:
{
dataField: 'month',
unitInterval: 1,
gridLines: {
step: 3
}
},
valueAxis:
{
minValue: -5,
maxValue: 30,
unitInterval: 5,
title: { text: 'Temperature [C]<br>' },
labels: {
horizontalAlignment: 'right',
formatSettings: { sufix: '°' }
}
},
seriesGroups:
[
{
type: 'rangecolumn',
columnsGapPercent: 50,
toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
]
},
{
type: 'spline',
toolTipFormatFunction: toolTipCustomFormatFn,
series: [
{ dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
]
}
]
}
</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 with range column series. There are two series shown rangecolumn and spline. The toolTipCustomFormatFn function is used to format the tool tip.
</div>
</body>
</html>