forked from extern/egroupware
182 lines
7.1 KiB
HTML
182 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Data Renderers, AJAX and JSON Data</title>
|
|
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
|
|
|
|
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
|
|
<link rel="stylesheet" type="text/css" href="examples.css" />
|
|
|
|
<!-- BEGIN: load jquery -->
|
|
<script language="javascript" type="text/javascript" src="../jquery.min.js"></script>
|
|
<!-- END: load jquery -->
|
|
|
|
<!-- BEGIN: load jqplot -->
|
|
<script language="javascript" type="text/javascript" src="../jquery.jqplot.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.ohlcRenderer.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.json2.min.js"></script>
|
|
<script language="javascript" type="text/javascript" src="../plugins/jqplot.ciParser.min.js"></script>
|
|
|
|
<style type="text/css">
|
|
div.jqplot-target {
|
|
margin: 20px;
|
|
}
|
|
</style>
|
|
|
|
<!-- END: load jqplot -->
|
|
<script language="javascript" type="text/javascript">
|
|
|
|
var cos = function(data, plot) {
|
|
for (var i=0; i<data.length; i++) {
|
|
for (var j=0; j<data[i].length; j++) {
|
|
data[i][j] = Math.cos(data[i][j]);
|
|
}
|
|
}
|
|
return data;
|
|
};
|
|
|
|
var ajaxdata = function(url, plot, options) {
|
|
var ret = $.ajax({
|
|
async: false,
|
|
url: url
|
|
});
|
|
return $.parseJSON(ret.responseText);
|
|
};
|
|
</script>
|
|
|
|
<script class="code" type="text/javascript">$(document).ready(function(){
|
|
|
|
var sineRenderer = function(data, plot) {
|
|
for (var i=0; i<data.length; i++) {
|
|
for (var j=0; j<data[i].length; j++) {
|
|
data[i][j] = Math.sin(data[i][j]);
|
|
}
|
|
}
|
|
return data;
|
|
};
|
|
|
|
var line1 = [-3.5, -3, -2.5, -2, -1.5, -1, -0.5, 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5];
|
|
|
|
plo1t = $.jqplot('chart1',[line1],{
|
|
title: 'Sine Data Renderer',
|
|
dataRenderer: sineRenderer
|
|
});
|
|
});</script>
|
|
|
|
<script class="code" type="text/javascript">$(document).ready(function(){
|
|
|
|
var ajaxDataRenderer = function(url, plot) {
|
|
var ret = null;
|
|
$.ajax({
|
|
// have to use synchronous here, else returns before data is fetched
|
|
async: false,
|
|
url: url,
|
|
dataType:'json',
|
|
success: function(data) {
|
|
ret = data;
|
|
}
|
|
});
|
|
return ret;
|
|
};
|
|
|
|
var jsonurl = "./jsondata.txt";
|
|
|
|
plo12 = $.jqplot('chart2', jsonurl,{
|
|
title: 'AJAX JSON Data Renderer',
|
|
dataRenderer: ajaxDataRenderer
|
|
});
|
|
});</script>
|
|
|
|
<script class="code" type="text/javascript">$(document).ready(function(){
|
|
|
|
var jsonstr = '{"PriceTicks": [{"Price":5.5,"TickDate":"\/Date(1283745600000)\/"}, \
|
|
{"Price":6.8,"TickDate":"\/Date(1283832000000)\/"}, \
|
|
{"Price":7.1,"TickDate":"\/Date(1283918400000)\/"}], \
|
|
"PriceBars": [{"BarDate":"\/Date(1283745600000)\/","Close":10.0,"High":15.0,"Low":8.0,"Open":9.0}, \
|
|
{"BarDate":"\/Date(1283832000000)\/","Close":10.6,"High":14.3,"Low":9.1,"Open":12.5}, \
|
|
{"BarDate":"\/Date(1283918400000)\/","Close":12.0,"High":13.0,"Low":9.0,"Open":9.8}]}';
|
|
|
|
plot3 = $.jqplot('chart3', jsonstr, {
|
|
title:'Custom JSON Format, JSON Encoded String',
|
|
dataRenderer: $.jqplot.ciParser,
|
|
axes: {
|
|
xaxis: {
|
|
renderer:$.jqplot.DateAxisRenderer,
|
|
tickInterval: '1 day',
|
|
tickOptions:{formatString:'%y/%m/%d'},
|
|
min: '2010/09/05',
|
|
max: '2010/09/09'
|
|
}
|
|
},
|
|
series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
|
|
});
|
|
});</script>
|
|
|
|
<script class="code" type="text/javascript">$(document).ready(function(){
|
|
|
|
var jsonobj = {"PriceTicks":[
|
|
{"Price":5.5,"TickDate":"\/Date(1283745600000)\/"},
|
|
{"Price":6.8,"TickDate":"\/Date(1283832000000)\/"},
|
|
{"Price":7.1,"TickDate":"\/Date(1283918400000)\/"}],
|
|
"PriceBars":[
|
|
{"BarDate":"\/Date(1283745600000)\/","Close":10.0,"High":15.0,"Low":8.0,"Open":9.0},
|
|
{"BarDate":"\/Date(1283832000000)\/","Close":10.6,"High":14.3,"Low":9.1,"Open":12.5},
|
|
{"BarDate":"\/Date(1283918400000)\/","Close":12.0,"High":13.0,"Low":9.0,"Open":9.8}]
|
|
};
|
|
|
|
plot4 = $.jqplot('chart4', jsonobj, {
|
|
title:'Custom JSON Format, JSON Object',
|
|
dataRenderer: $.jqplot.ciParser,
|
|
axes: {
|
|
xaxis: {
|
|
renderer:$.jqplot.DateAxisRenderer,
|
|
tickInterval: '1 day',
|
|
tickOptions:{formatString:'%y/%m/%d'},
|
|
min: '2010/09/05',
|
|
max: '2010/09/09'
|
|
}
|
|
},
|
|
series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}],
|
|
});
|
|
});</script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function(){
|
|
$('script.code').each(function(index) {
|
|
$('pre.code').eq(index).text($(this).html());
|
|
});
|
|
$('script.common').each(function(index) {
|
|
$('pre.common').eq(index).html($(this).html());
|
|
});
|
|
$(document).unload(function() {$('*').unbind(); });
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<?php include "topbanner.inc"; ?>
|
|
<div class="example-content">
|
|
<?php include "nav.inc"; ?>
|
|
<p>The "dataRenderer" plot options allows you to specify a data preprocessor for your plot. This enables jqPlot to accept data in any arbitrary format (e.g. AJAX data soruces, JSON strings, etc.). Below are some examples illustrating how to use dataRenderers.</p>
|
|
|
|
<p>In this simple example, we create a dataRenderer which takes an array of x values and returns an array of [x, sin(x)] value pairs. Data renderers are passes the plot data and a reference to the plot as arguments.</p>
|
|
<div id="chart1" style="height:200px; width:400px;"></div>
|
|
<pre class="code"></pre>
|
|
<p>An example of how to use a dataRenderer to fetch data from a server via an AJAX callback. Here the "data" passed into the plot is actually the url of the data source.</p>
|
|
<div id="chart2" style="height:200px; width:400px;"></div>
|
|
<pre class="code"></pre>
|
|
<p>This example uses a more complicated dataRenderer that has been encapsulated as a jqplot plugin and loaded separately. This plugin accepts JSON data objects or strings formatted according to the City Index data format and returns jqPlot formatted data. This example uses a JSON encoded string.</p>
|
|
<div id="chart3" style="height:200px; width:400px;"></div>
|
|
<pre class="code"></pre>
|
|
<p>This example uses the same City Index data format, but passes in a JSON object instead of a string.</p>
|
|
<div id="chart4" style="height:200px; width:400px;"></div>
|
|
<pre class="code"></pre>
|
|
|
|
<p>There is a third argument passed to the data renderer, dataRendererOptions. It was not used in these examples, but can be set as a separate option on the plot to pass additional arguments into the renderer if needed.</p>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |