</head>
<body>
<div id="graphdiv4"
- style="width:600px; height:300px;"></div>
+ style="width:480px; height:320px;"></div>
<script type="text/javascript">
g4 = new Dygraph(
document.getElementById("graphdiv4"),
</div>
<div class="codeoutput" style="float:left;">
<h3 style="text-align:center">OUTPUT</h3>
- <div id="graphdiv4" style="width:600px; height:300px;"></div>
+ <div id="graphdiv4" style="width:480px; height:320px;"></div>
<script type="text/javascript">
g4 = new Dygraph(
document.getElementById("graphdiv4"),
<p>This chart shows monthly closes of the Dow Jones Industrial Average, both in nominal and real (i.e. adjusted for inflation) dollars. The shaded areas show its monthly high and low. CPI values with a base from 1982-84 are used to adjust for inflation.</p>
- <div id="dow_chart" style="width:900px; height:350px;"></div>
+ <div id="dow_chart" style="width:750px; height:350px;"></div>
<p><b>Display: </b>
<input type=checkbox id=0 onClick="stockchange(this)" checked>
<label for="0"> Nominal</label>
<p>Call org.danvk.Dygraphs.install() when your application starts to install the JavaScript code into the browser. You can use <a href="http://code.google.com/webtoolkit/doc/latest/DevGuideCodingBasicsJSNI.html">JSNI</a> to call Dygraphs from your GWT code, as in the example below. The example uses the <a href="http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted">Visualization API for GWT</a> and the <a href="#gviz">Dygraphs GViz API.</a></p>
<pre>
- public static native JavaScriptObject drawDygraph(Element element, DataTable dataTable, double minY, double maxY) /*-{
- var chart = new $wnd.Dygraph.GVizChart(element);
- chart.draw(dataTable,
- {
- valueRange: [minY, maxY]
- });
- return chart;
- }-*/;
+public static native JavaScriptObject drawDygraph(
+ Element element, DataTable dataTable, double minY, double maxY) /*-{
+ var chart = new $wnd.Dygraph.GVizChart(element);
+ chart.draw(dataTable,
+ {
+ valueRange: [minY, maxY]
+ });
+ return chart;
+}-*/;
</pre>
<h2 id="policy">Data Policy</h2>
seriesForAxis[idx].push(series);
}
- // If no series are defined or visible then fill in some reasonable defaults.
- if (seriesForAxis.length == 0) {
- var axis = this.axes_[0];
- axis.computedValueRange = [0, 1];
- var ret =
- Dygraph.numericTicks(axis.computedValueRange[0],
- axis.computedValueRange[1],
- this,
- axis);
- axis.ticks = ret.ticks;
- this.numYDigits_ = ret.numDigits;
- return;
- }
-
// Compute extreme values, a span and tick marks for each axis.
for (var i = 0; i < this.axes_.length; i++) {
var axis = this.axes_[i];
- {
+ if (!seriesForAxis[i]) {
+ // If no series are defined or visible then use a reasonable default
+ axis.extremeRange = [0, 1];
+ } else {
// Calculate the extremes of extremes.
var series = seriesForAxis[i];
var minY = Infinity; // extremes[series[0]][0];
<p>Plot which can be easily generated with different numbers of points for
benchmarking/profiling and improving performance of dygraphs.</p>
<p>Number of points:
- <input type="text" id="num_points_input" size="20"
- onchange="updatePlot();"></p>
+ <input type="text" id="num_points_input" size="20"></p>
<p>Number of series:
- <input type="text" id="num_series_input" size="20"
- onchange="updatePlot();"></p>
+ <input type="text" id="num_series_input" size="20"></p>
<p>Roll period (in points):
- <input type="text" id="roll_period_input" size="20"
- onchange="updatePlot();"></p>
+ <input type="text" id="roll_period_input" size="20"></p>
+ <p>Repetitions:
+ <input type="text" id="repetitions" size="20"></p>
+
+ <input type="button" value="Go!" onclick="updatePlot();">
<br>
<br>
<div id="plot"></div>
<div id="message"></div>
+ <div id="metrics"></div>
+ <div id="metaperformance"></div>
<script type="text/javascript">
var plot;
+ var durations = [];
updatePlot = function() {
document.getElementById('message').innerHTML = "";
var plotDiv = document.getElementById('plot');
parseInt(document.getElementById('num_points_input').value);
var numSeries =
parseInt(document.getElementById('num_series_input').value);
+ var repetitions =
+ parseInt(document.getElementById('repetitions').value);
var data = [];
var xmin = 0.0;
var rollPeriod = parseInt(
document.getElementById('roll_period_input').value);
var opts = {labels: labels, rollPeriod: rollPeriod};
- var start = new Date();
- plot = new Dygraph(plotDiv, data, opts);
- var end = new Date();
- document.getElementById('message').innerHTML =
- "completed in " + (end - start) + " milliseconds.";
+ var millisecondss = [];
+ for (var i = 0; i < repetitions; i++) {
+ var start = new Date();
+ plot = new Dygraph(plotDiv, data, opts);
+ var end = new Date();
+ durations.push([start, end - start]);
+ millisecondss.push(end - start);
+ }
+ if (repetitions == 1) {
+ document.getElementById('message').innerHTML =
+ "completed in " + (end - start) + " milliseconds.";
+ } else {
+ document.getElementById('message').innerHTML =
+ "Durations: " + millisecondss;
+ }
+
+ if (durations.length > 0) {
+ var start2 = new Date();
+ new Dygraph(
+ document.getElementById('metrics'),
+ durations,
+ {
+ highlightCircleSize: 4,
+ labels: [ "Date", "ms" ]
+ });
+ var end2 = new Date();
+ document.getElementById("metaperformance").innerHTML =
+ "completed in " + (end2 - start2) + " milliseconds.";
+ }
};
document.getElementById('num_points_input').value = '100';
document.getElementById('num_series_input').value = '1';
document.getElementById('roll_period_input').value = '1';
- updatePlot();
+ document.getElementById('repetitions').value = '1';
</script>
</body>
</html>
<p>This test verifies that a chart will still draw without any JS errors
when no series are visible.</p>
<div id="div_g" style="width:400px; height:200px;"></div>
+ <p>This graph's specified value range should be respected.</p>
+ <div id="div_g2" style="width:400px; height:200px;"></div>
<script type="text/javascript">
g = new Dygraph(
visibility: [false, false]
}
);
+ g2 = new Dygraph(
+ document.getElementById("div_g2"),
+ NoisyData, {
+ rollPeriod: 7,
+ errorBars: true,
+ visibility: [false, false],
+ valueRange: [100, 200]
+ }
+ );
</script>
</body>
projects / dygraphs.git / commitdiff