jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
100 lines (91 loc) • 5 kB
HTML
<html>
<head>
<title id='Description'>JavaScript Chart line series with missing data points example</title>
<meta name="description" content="This is an example of Javascript Chart Line series with missing data points." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<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" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.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 type="text/javascript">
$(document).ready(function () {
var sampleData = [29, undefined, 10, 15, 10, undefined, NaN, 30, 25, undefined, 33, 19, 11];
var settings = {
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: sampleData,
xAxis:
{
text: 'x',
valuesOnTicks: false
},
colorScheme: 'scheme05',
seriesGroups:
[
{
type: 'line',
source: sampleData,
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' }
]
}
]
};
// create the chart
$("#chartContainer").jqxChart(settings);
// get the chart's instance
var chart = $('#chartContainer').jqxChart('getInstance');
// series type drop down
var modes = ["skip", "zero", "connect"];
$("#dropDownMissingPointsMode").jqxDropDownList({ source: modes, selectedIndex: 0, width: '220', height: '25', dropDownHeight: 77 });
$('#dropDownMissingPointsMode').on('select', function (event) {
var args = event.args;
if (args) {
var value = args.item.value;
chart.seriesGroups[0].series[0].emptyPointsDisplay = value;
chart.update();
}
});
});
</script>
</head>
<body>
<div id='chartContainer' style="width:800px; height:500px"></div>
<p style="font-family: Verdana; font-size: 12px;">Select missing points display mode:
</p>
<div id='dropDownMissingPointsMode'>
</div>
<div class="example-description">
<br />
<h2>Description</h2>
<br />
This is an example of Javascript 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>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>