MUN is an open source project powered by Assembla

Assembla offers free public and private SVN/Git repositories and project hosting with bug/issue tracking and collaboration tools.

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Data Renderers, AJAX and JSON Data</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->

  <link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />

  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../jquery-1.4.2.min.js"></script>
  <!-- END: load jquery -->

  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.ohlcRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.json2.js"></script>
  <script language="javascript" type="text/javascript" src="../plugins/jqplot.ciParser.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 "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>
  </body>
</html>
Ajax-loader Loading, please wait...