2011-08-10 01:10:50 +02:00
<!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] -->
2011-11-07 21:37:55 +01:00
< link rel = "stylesheet" type = "text/css" href = "../jquery.jqplot.min.css" / >
2011-08-10 01:10:50 +02:00
< link rel = "stylesheet" type = "text/css" href = "examples.css" / >
<!-- BEGIN: load jquery -->
2011-11-07 21:37:55 +01:00
< script language = "javascript" type = "text/javascript" src = "../jquery.min.js" > < / script >
2011-08-10 01:10:50 +02:00
<!-- END: load jquery -->
<!-- BEGIN: load jqplot -->
2011-11-07 21:37:55 +01:00
< 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 >
2011-08-10 01:10:50 +02:00
< style type = "text/css" >
div.jqplot-target {
margin: 20px;
}
< / style >
<!-- END: load jqplot -->
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
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'
}
},
2011-11-07 21:37:55 +01:00
series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
2011-08-10 01:10:50 +02:00
});
});< / script >
< script class = "code" type = "text/javascript" > $ ( d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) {
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'
}
},
2011-11-07 21:37:55 +01:00
series: [{}, {renderer:$.jqplot.OHLCRenderer, rendererOptions:{candleStick:true}}]
2011-08-10 01:10:50 +02:00
});
});< / 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 >
2011-11-07 21:37:55 +01:00
<?php include "topbanner.inc"; ?>
< div class = "example-content" >
<?php include "nav.inc"; ?>
2011-08-10 01:10:50 +02:00
< 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 >
2011-11-07 21:37:55 +01:00
< 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 >
2011-08-10 01:10:50 +02:00
< 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 >
2011-11-07 21:37:55 +01:00
< / div >
< / body >
2011-08-10 01:10:50 +02:00
< / html >
