Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
21627 kshitij.so 1 
(function () {
2 
var data = [{"xScale":"ordinal","comp":[],"main":[{"className":".main.l1","data":[{"y":15,"x":"2012-11-19T00:00:00"},{"y":11,"x":"2012-11-20T00:00:00"},{"y":8,"x":"2012-11-21T00:00:00"},{"y":10,"x":"2012-11-22T00:00:00"},{"y":1,"x":"2012-11-23T00:00:00"},{"y":6,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]},{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},{"y":33,"x":"2012-11-20T00:00:00"},{"y":13,"x":"2012-11-21T00:00:00"},{"y":16,"x":"2012-11-22T00:00:00"},{"y":7,"x":"2012-11-23T00:00:00"},{"y":18,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"line-dotted","yScale":"linear"},{"xScale":"ordinal","comp":[],"main":[{"className":".main.l1","data":[{"y":12,"x":"2012-11-19T00:00:00"},{"y":18,"x":"2012-11-20T00:00:00"},{"y":8,"x":"2012-11-21T00:00:00"},{"y":7,"x":"2012-11-22T00:00:00"},{"y":6,"x":"2012-11-23T00:00:00"},{"y":12,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]},{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},{"y":33,"x":"2012-11-20T00:00:00"},{"y":13,"x":"2012-11-21T00:00:00"},{"y":16,"x":"2012-11-22T00:00:00"},{"y":7,"x":"2012-11-23T00:00:00"},{"y":18,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"cumulative","yScale":"linear"},{"xScale":"ordinal","comp":[],"main":[{"className":".main.l1","data":[{"y":12,"x":"2012-11-19T00:00:00"},{"y":18,"x":"2012-11-20T00:00:00"},{"y":8,"x":"2012-11-21T00:00:00"},{"y":7,"x":"2012-11-22T00:00:00"},{"y":6,"x":"2012-11-23T00:00:00"},{"y":12,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]},{"className":".main.l2","data":[{"y":29,"x":"2012-11-19T00:00:00"},{"y":33,"x":"2012-11-20T00:00:00"},{"y":13,"x":"2012-11-21T00:00:00"},{"y":16,"x":"2012-11-22T00:00:00"},{"y":7,"x":"2012-11-23T00:00:00"},{"y":18,"x":"2012-11-24T00:00:00"},{"y":8,"x":"2012-11-25T00:00:00"}]}],"type":"bar","yScale":"linear"}];
3 
var order = [0, 1, 0, 2],
4 
  i = 0,
5 
  xFormat = d3.time.format('%A'),
6 
  chart = new xChart('line-dotted', data[order[i]], '#chart', {
7 
    axisPaddingTop: 5,
8 
    dataFormatX: function (x) {
9 
      return new Date(x);
10 
    },
11 
    tickFormatX: function (x) {
12 
      return xFormat(x);
13 
    },
14 
    timing: 1250
15 
  }),
16 
  rotateTimer,
17 
  toggles = d3.selectAll('.multi button'),
18 
  t = 3500;
19 
 
20 
function updateChart(i) {
21 
  var d = data[i];
22 
  chart.setData(d);
23 
  toggles.classed('toggled', function () {
24 
    return (d3.select(this).attr('data-type') === d.type);
25 
  });
26 
  return d;
27 
}
28 
 
29 
toggles.on('click', function (d, i) {
30 
  clearTimeout(rotateTimer);
31 
  updateChart(i);
32 
});
33 
 
34 
function rotateChart() {
35 
  i += 1;
36 
  i = (i >= order.length) ? 0 : i;
37 
  var d = updateChart(order[i]);
38 
  rotateTimer = setTimeout(rotateChart, t);
39 
}
40 
rotateTimer = setTimeout(rotateChart, t);
41 
}());
42 
 
43 
(function () {
44 
 
45 
      var data = {
46 
  "xScale": "ordinal",
47 
  "yScale": "linear",
48 
  "main": [
49 
    {
50 
      "className": ".pizza",
51 
      "data": [
52 
        {
53 
          "x": "Pepperoni",
54 
          "y": 4
55 
        },
56 
        {
57 
          "x": "Cheese",
58 
          "y": 8
59 
        }
60 
      ]
61 
    }
62 
  ]
63 
};
64 
      var myChart = new xChart('bar', data, '#example1');
65 
 
66 
    }());
67 
 
68 
(function () {
69 
 
70 
      var data = {
71 
  "xScale": "ordinal",
72 
  "yScale": "linear",
73 
  "main": [
74 
    {
75 
      "className": ".pizza",
76 
      "data": [
77 
        {
78 
          "x": "Pepperoni",
79 
          "y": 4
80 
        },
81 
        {
82 
          "x": "Cheese",
83 
          "y": 8
84 
        }
85 
      ]
86 
    },
87 
    {
88 
      "className": ".pizza",
89 
      "data": [
90 
        {
91 
          "x": "Pepperoni",
92 
          "y": 6
93 
        },
94 
        {
95 
          "x": "Cheese",
96 
          "y": 5
97 
        }
98 
      ]
99 
    }
100 
  ]
101 
};
102 
      var myChart = new xChart('bar', data, '#example2');
103 
 
104 
    }());
105 
 
106 
(function () {
107 
 
108 
      var data = {
109 
  "xScale": "time",
110 
  "yScale": "linear",
111 
  "type": "line",
112 
  "main": [
113 
    {
114 
      "className": ".pizza",
115 
      "data": [
116 
        {
117 
          "x": "2012-11-05",
118 
          "y": 1
119 
        },
120 
        {
121 
          "x": "2012-11-06",
122 
          "y": 6
123 
        },
124 
        {
125 
          "x": "2012-11-07",
126 
          "y": 13
127 
        },
128 
        {
129 
          "x": "2012-11-08",
130 
          "y": -3
131 
        },
132 
        {
133 
          "x": "2012-11-09",
134 
          "y": -4
135 
        },
136 
        {
137 
          "x": "2012-11-10",
138 
          "y": 9
139 
        },
140 
        {
141 
          "x": "2012-11-11",
142 
          "y": 6
143 
        }
144 
      ]
145 
    }
146 
  ]
147 
};
148 
      var opts = {
149 
  "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
150 
  "tickFormatX": function (x) { return d3.time.format('%A')(x); }
151 
};
152 
 
153 
      var myChart = new xChart('line', data, '#example3', opts);
154 
 
155 
    }());
156 
 
157 
(function () {
158 
      var tt = document.createElement('div'),
159 
  leftOffset = -(~~$('html').css('padding-left').replace('px', '') + ~~$('body').css('margin-left').replace('px', '')),
160 
  topOffset = -32;
161 
tt.className = 'ex-tooltip';
162 
document.body.appendChild(tt);
163 
 
164 
      var data = {
165 
  "xScale": "time",
166 
  "yScale": "linear",
167 
  "main": [
168 
    {
169 
      "className": ".pizza",
170 
      "data": [
171 
        {
172 
          "x": "2012-11-05",
173 
          "y": 6
174 
        },
175 
        {
176 
          "x": "2012-11-06",
177 
          "y": 6
178 
        },
179 
        {
180 
          "x": "2012-11-07",
181 
          "y": 8
182 
        },
183 
        {
184 
          "x": "2012-11-08",
185 
          "y": 3
186 
        },
187 
        {
188 
          "x": "2012-11-09",
189 
          "y": 4
190 
        },
191 
        {
192 
          "x": "2012-11-10",
193 
          "y": 9
194 
        },
195 
        {
196 
          "x": "2012-11-11",
197 
          "y": 6
198 
        }
199 
      ]
200 
    }
201 
  ]
202 
};
203 
      var opts = {
204 
  "dataFormatX": function (x) { return d3.time.format('%Y-%m-%d').parse(x); },
205 
  "tickFormatX": function (x) { return d3.time.format('%A')(x); },
206 
  "mouseover": function (d, i) {
207 
    var pos = $(this).offset();
208 
    $(tt).text(d3.time.format('%A')(d.x) + ': ' + d.y)
209 
      .css({top: topOffset + pos.top, left: pos.left + leftOffset})
210 
      .show();
211 
  },
212 
  "mouseout": function (x) {
213 
    $(tt).hide();
214 
  }
215 
};
216 
 
217 
      var myChart = new xChart('line-dotted', data, '#example4', opts);
218 
 
219 
    }());
220 
 
221 
(function () {
222 
      var errorBar = {
223 
        enter: function (self, storage, className, data, callbacks) {
224 
          var insertionPoint = xChart.visutils.getInsertionPoint(9),
225 
            container,
226 
            eData = data.map(function (d) {
227 
              d.data = d.data.map(function (d) {
228 
                return [{x: d.x, y: d.y - d.e}, {x: d.x, y: d.y}, {x: d.x, y: d.y + d.e}];
229 
              });
230 
              return d;
231 
            }),
232 
            paths;
233 
 
234 
          container = self._g.selectAll('.errorLine' + className)
235 
            .data(eData, function (d) {
236 
              return d.className;
237 
            });
238 
 
239 
          container.enter().insert('g', insertionPoint)
240 
            .attr('class', function (d, i) {
241 
              return 'errorLine' + className.replace(/\./g, ' ') + ' color' + i;
242 
            });
243 
 
244 
          paths = container.selectAll('path')
245 
            .data(function (d) {
246 
              return d.data;
247 
            }, function (d) {
248 
              return d[0].x;
249 
            });
250 
 
251 
          paths.enter().insert('path')
252 
            .style('opacity', 0)
253 
            .attr('d', d3.svg.line()
254 
              .x(function (d) {
255 
                return self.xScale(d.x) + self.xScale.rangeBand() / 2;
256 
              })
257 
              .y(function (d) { return self.yScale(d.y); })
258 
            );
259 
 
260 
          storage.containers = container;
261 
          storage.paths = paths;
262 
        },
263 
        update: function (self, storage, timing) {
264 
          storage.paths.transition().duration(timing)
265 
            .style('opacity', 1)
266 
            .attr('d', d3.svg.line()
267 
              .x(function (d) {
268 
                return self.xScale(d.x) + self.xScale.rangeBand() / 2;
269 
              })
270 
              .y(function (d) { return self.yScale(d.y); })
271 
            );
272 
        },
273 
        exit: function (self, storage, timing) {
274 
          storage.paths.exit()
275 
            .transition().duration(timing)
276 
            .style('opacity', 0);
277 
        },
278 
        destroy: function (self, storage, timing) {
279 
          storage.paths.transition().duration(timing)
280 
            .style('opacity', 0)
281 
            .remove();
282 
        }
283 
      };
284 
 
285 
      xChart.setVis('error', errorBar);
286 
 
287 
      var data = [{
288 
          "xScale": "ordinal",
289 
          "yScale": "linear",
290 
          "main": [
291 
            {
292 
              "className": ".errorExample",
293 
              "data": [
294 
                {
295 
                  "x": "Ponies",
296 
                  "y": 12
297 
                },
298 
                {
299 
                  "x": "Unicorns",
300 
                  "y": 23
301 
                },
302 
                {
303 
                  "x": "Trolls",
304 
                  "y": 1
305 
                }
306 
              ]
307 
            }
308 
          ],
309 
          "comp": [
310 
            {
311 
              "type": "error",
312 
              "className": ".comp.errorBar",
313 
              "data": [
314 
                {
315 
                  "x": "Ponies",
316 
                  "y": 12,
317 
                  "e": 5
318 
                },
319 
                {
320 
                  "x": "Unicorns",
321 
                  "y": 23,
322 
                  "e": 2
323 
                },
324 
                {
325 
                  "x": "Trolls",
326 
                  "y": 1,
327 
                  "e": 1
328 
                }
329 
              ]
330 
            }
331 
          ]
332 
        },
333 
        {
334 
          "xScale": "ordinal",
335 
          "yScale": "linear",
336 
          "main": [
337 
            {
338 
              "className": ".errorExample",
339 
              "data": [
340 
                {
341 
                  "x": "Ponies",
342 
                  "y": 76
343 
                },
344 
                {
345 
                  "x": "Unicorns",
346 
                  "y": 45
347 
                },
348 
                {
349 
                  "x": "Trolls",
350 
                  "y": 82
351 
                }
352 
              ]
353 
            }
354 
          ],
355 
          "comp": [
356 
            {
357 
              "type": "error",
358 
              "className": ".comp.errorBar",
359 
              "data": [
360 
                {
361 
                  "x": "Ponies",
362 
                  "y": 76,
363 
                  "e": 12
364 
                },
365 
                {
366 
                  "x": "Unicorns",
367 
                  "y": 45,
368 
                  "e": 3
369 
                },
370 
                {
371 
                  "x": "Trolls",
372 
                  "y": 82,
373 
                  "e": 12
374 
                }
375 
              ]
376 
            }
377 
          ]
378 
        }
379 
      ];
380 
 
381 
      var myChart = new xChart('bar', data[0], '#exampleVis'),
382 
        i = 0;
383 
 
384 
      function timer() {
385 
        setTimeout(function () {
386 
          timer();
387 
          i += 1;
388 
          myChart.setData(data[i % 2]);
389 
        }, 3000);
390 
      }
391 
      timer();
392 
    }());