dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
222 lines (219 loc) • 9.15 kB
HTML
<!--[if IE 7]>
<!DOCTYPE>
<html lang="en">
<head>
<![endif]-->
<!--[if IE 8]>
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<![endif]-->
<![if gte IE 9]>
<html lang="en">
<head>
<![endif]>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Missing point interpolation</title>
<style type="text/css">
@import "../../../../dojo/resources/dojo.css";
@import "../../../../dijit/tests/css/dijitTests.css";
</style>
<!-- required for Tooltip: a default dijit theme: -->
<link rel="stylesheet" href="../../../../dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true, has:{'dojo-bidi': true}"></script>
<script type="text/javascript">
var seriesA = [
{ x: 1, y : null },
{ x: 2, y : 2 },
{ x: 3, y : 2 },
{ x: 4, y: null },
{ x: 5, y: null },
{ x: 6, y: 3 },
{ x: 7, y: 4 },
{ x: 8, y: null },
{ x: 9, y: 5 },
{ x: 10, y: 6 },
{ x: 13, y: 7 },
{ x: 14, y: 8 }
];
var seriesB = [null, 3, 3, null, null, 4, 5, null, 6, 7, 7, 8];
var seriesC = [
{ x: 2, y: 4 },
{ x: 3, y: 4 },
{ x: 6, y: 5 },
{ x: 7, y: 6 },
{ x: 9, y: 7 },
{ x: 10, y: 8 },
{ x: 13, y: 9 },
{ x: 14, y: 10 }
];
// in theory this should not happen, this is really invalid data set...
var seriesD = [
null,
{ x: 2, y : 5 },
{ x: 3, y : 5 },
null,
null,
{ x: 6, y: 6 },
{ x: 7, y: 7 },
null,
{ x: 9, y: 8 },
{ x: 10, y: 9 },
null, null
];
require([
"dojox/charting/widget/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Lines",
"dojox/charting/plot2d/StackedLines",
"dojox/charting/plot2d/Columns",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/plot2d/ClusteredColumns",
"dojox/charting/plot2d/Bars",
"dojox/charting/plot2d/StackedBars",
"dojox/charting/plot2d/ClusteredBars",
"dojox/charting/themes/Adobebricks",
"dojo/parser"]);
</script>
</head>
<body class="tundra">
<h1>Chart with missing data points</h1>
<table border="0" cellspacing="30">
<tr>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart1" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="Lines"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run B" array="seriesB"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart2" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="Lines" interpolate="true"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run B" array="seriesB"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
</tr>
<tr>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart3" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="StackedLines"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart4" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major" includeZero="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="StackedLines" interpolate="true"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
</tr>
<tr>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart5" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="Columns"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart6" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="y" font="italic normal normal 8pt Tahoma" fixUpper="major" ></div>
<div class="axis" name="x" vertical="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="Bars"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
</tr>
<tr>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart7" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="StackedColumns"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart8" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="y" font="italic normal normal 8pt Tahoma" fixUpper="major" ></div>
<div class="axis" name="x" vertical="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="StackedBars"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
</tr>
<tr>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart9" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="x" font="italic normal normal 8pt Tahoma"></div>
<div class="axis" name="y" vertical="true" fixUpper="major"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="ClusteredColumns"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
<td>
<div direction="rtl" data-dojo-type="dojox/charting/widget/Chart" id="chart10" style="width: 400px; height: 400px;"
theme="dojox.charting.themes.Adobebricks">
<div class="axis" name="y" font="italic normal normal 8pt Tahoma" fixUpper="major"></div>
<div class="axis" name="x" vertical="true"
font="italic normal normal 8pt Tahoma"></div>
<div class="plot" name="default" type="ClusteredBars"></div>
<div class="series" name="Run A" array="seriesA"></div>
<div class="series" name="Run C" array="seriesC"></div>
<div class="series" name="Run D" array="seriesD"></div>
</div>
</td>
</tr>
</table>
<p>That's all Folks!</p>
</body>
</html>