data-renderers.html
4.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!DOCTYPE html>
<html>
<head>
<title>AJAX and JSON Data Loading via Data Renderers</title>
<link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<link rel="stylesheet" type="text/css" href="examples.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
<link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
<script class="include" type="text/javascript" src="../jquery.min.js"></script>
</head>
<body>
<div class="logo">
<div class="nav">
<a class="nav" href="../../../index.php"><span>></span>Home</a>
<a class="nav" href="../../../docs/"><span>></span>Docs</a>
<a class="nav" href="../../download/"><span>></span>Download</a>
<a class="nav" href="../../../info.php"><span>></span>Info</a>
<a class="nav" href="../../../donate.php"><span>></span>Donate</a>
</div>
</div>
<div class="example-content">
<div class="example-nav">
<a href="dashedLines.html">Previous</a> <a href="./">Examples</a> <a href="date-axes.html">Next</a></div>
<!-- Example scripts go here -->
<p>Data renderers allow jqPlot to pull data from any external source (e.g. a function implementing an AJAX call). Simply assign the external source to the "dataRenderer" plot option. The only requirement on data renderers is that it must return a valid jqPlot data array.</p>
<div id="chart1" style="height:300px; width:500px;"></div>
<pre class="code prettyprint brush: js"></pre>
<p>Data renderers get passed options by the plot. The signiture for a data renderer is:</p>
<pre class="brush: js">
function(userData, plotObject, options) {
...
return data;
}
</pre>
<p>Where userData is whatever data was passed into the plot, plotObject is a reference back to the plot itself, and options are any options passed into the plots "dataRendererOption" option. The following example shows a more complicated example which uses ajax pulls data from an external json data source.</p>
<div id="chart2" style="height:300px; width:500px;"></div>
<pre class="code prettyprint brush: js"></pre>
<script class="code" type="text/javascript">
$(document).ready(function(){
// Our data renderer function, returns an array of the form:
// [[[x1, sin(x1)], [x2, sin(x2)], ...]]
var sineRenderer = function() {
var data = [[]];
for (var i=0; i<13; i+=0.5) {
data[0].push([i, Math.sin(i)]);
}
return data;
};
// we have an empty data array here, but use the "dataRenderer"
// option to tell the plot to get data from our renderer.
var plot1 = $.jqplot('chart1',[],{
title: 'Sine Data Renderer',
dataRenderer: sineRenderer
});
});
</script>
<script class="code" type="text/javascript">
$(document).ready(function(){
// Our ajax data renderer which here retrieves a text file.
// it could contact any source and pull data, however.
// The options argument isn't used in this renderer.
var ajaxDataRenderer = function(url, plot, options) {
var ret = null;
$.ajax({
// have to use synchronous here, else the function
// will return before the data is fetched
async: false,
url: url,
dataType:"json",
success: function(data) {
ret = data;
}
});
return ret;
};
// The url for our json data
var jsonurl = "./jsondata.txt";
// passing in the url string as the jqPlot data argument is a handy
// shortcut for our renderer. You could also have used the
// "dataRendererOptions" option to pass in the url.
var plot2 = $.jqplot('chart2', jsonurl,{
title: "AJAX JSON Data Renderer",
dataRenderer: ajaxDataRenderer,
dataRendererOptions: {
unusedOptionalUrl: jsonurl
}
});
});
</script>
<!-- End example scripts -->
<!-- Don't touch this! -->
<script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
<!-- End Don't touch this! -->
<!-- Additional plugins go here -->
<script class="include" language="javascript" type="text/javascript" src="../plugins/jqplot.json2.min.js"></script>
<!-- End additional plugins -->
</div>
<script type="text/javascript" src="example.min.js"></script>
</body>
</html>