forked from extern/egroupware
114 lines
4.9 KiB
HTML
114 lines
4.9 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 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>JSON data formatted according the the City Index API spec can be read in directly by jqPlot thorugh the use of the dataRenderer option and a custom ciParser data renderer. The ciParser data renderer will translate either a JSON encoded string or JSON object.</p>
|
|
|
|
<p>To use the the ciParser, include the <code>jqplot.json2.min.js</code> and <code>jqplot.ciParser.min.js</code> files. Specify the <code>$.jqplot.ciParser</code> as the renderer in the plot's "dataRenderer" option. The City Index JSON data can then be passed into the jqplot function as shown in the examples below:</p>
|
|
|
|
<p>Here, a stringified JSON data objects is passed into the jqplot function.</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>
|
|
|
|
</div>
|
|
</body>
|
|
</html> |