jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
102 lines (90 loc) • 4.67 kB
HTML
<html lang="en">
<head>
<title id='Description'>Custom Element Chart LineSeriesWithMissingPoints</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 Angular 4 Chart Line series with missing data points." />
<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="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script>
JQXElements.settings['chartSettings'] =
{
title: 'Line serie with missing points',
description: 'Sample line serie with missing and invalid values',
showLegend: true,
padding: { left: 5, top: 5, right: 15, bottom: 5 },
titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
source: [29, undefined, 10, 15, 10, undefined, NaN, 30, 25, undefined, 33, 19, 11],
xAxis:
{
text: 'x',
valuesOnTicks: false
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
toolTipFormatFunction: function (value, itemIndex, serie, group, categoryValue, categoryAxis){
var dataItem = sampleData[itemIndex];
return '<DIV style="text-align:left"><b>Index:</b> ' +
itemIndex + '<br /><b>Value:</b> ' +
value + '<br /></DIV>';
},
valueAxis:
{
title: { text: 'Value<br>' }
},
series:
[
{ emptyPointsDisplay: 'skip', displayText: 'Value', lineWidth: 2, symbolSize: 8, symbolType: 'circle' }
]
}
]
};
JQXElements.settings['DropDownListSettings'] = {
source: ['skip', 'zero', 'connect'],
selectedIndex: 0,
dropDownHeight: 77
}
window.onload = function(){
var myChart = document.querySelector('jqx-chart');
var myDropDownList = document.querySelector('jqx-drop-down-list');
myDropDownList.addEventListener('select', function(event) {
var args = event.args;
if (args) {
var value = args.item.value;
myChart.seriesGroups[0].series[0].emptyPointsDisplay = value;
myChart.update();
}
});
}
</script>
</head>
<body>
<jqx-chart settings="chartSettings" style="width:850px; height:500px"></jqx-chart>
<p style="font-family: Verdana; font-size: 12px;">
Select missing points display mode:
</p>
<jqx-drop-down-list settings="DropDownListSettings">
</jqx-drop-down-list>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Custom element Chart Line series with missing data points. The type of the seriesGroups setting is set to line. You can see how the emptyPointsDisplay setting is used to display the missing data in different ways depending on the DropDownList values.
</div>
</body>
</html>