Subversion Repositories SmartDukaan

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
21627 kshitij.so 1 
function randNum(){
2 
	return ((Math.floor( Math.random()* (1+40-20) ) ) + 20)* 1200;
3 
}
4 
 
5 
function randNum2(){
6 
	return ((Math.floor( Math.random()* (1+40-20) ) ) + 20) * 500;
7 
}
8 
 
9 
function randNum3(){
10 
	return ((Math.floor( Math.random()* (1+40-20) ) ) + 20) * 300;
11 
}
12 
 
13 
function randNum4(){
14 
	return ((Math.floor( Math.random()* (1+40-20) ) ) + 20) * 100;
15 
}
16 
 
17 
$(document).ready(function(){
18 
 
19 
	/* ---------- Chart with points ---------- */
20 
	if($("#dotChart").length)
21 
	{
22 
		var likes = [[1, 5+randNum()], [2, 10+randNum()], [3, 40+randNum()], [4, 60+randNum()],[5, 90+randNum()],[6, 40+randNum()],[7, 25+randNum()],[8, 35+randNum()]];
23 
 
24 
		var plot = $.plot($("#dotChart"),
25 
			   [ { data: likes, label: "Profit"} ], {
26 
				   series: {
27 
					   lines: { show: true,
28 
								lineWidth: 2,
29 
								fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
30 
							 },
31 
					   points: { show: true,
32 
								 lineWidth: 3
33 
							 },
34 
					   shadowSize: 0
35 
				   },
36 
				   grid: { hoverable: true,
37 
						   clickable: true,
38 
						   tickColor: "#f9f9f9",
39 
						   borderWidth: 0
40 
						 },
41 
				   colors: ["#75b9e6"],
42 
					xaxis: {ticks:20, tickDecimals: 0},
43 
					yaxis: {ticks:7, tickDecimals: 0},
44 
				 });
45 
 
46 
		function showTooltip(x, y, contents) {
47 
			$('<div id="tooltip">' + contents + '</div>').css( {
48 
				position: 'absolute',
49 
				display: 'none',
50 
				top: y + 5,
51 
				left: x + 5,
52 
				border: '1px solid #fdd',
53 
				padding: '2px',
54 
				'background-color': '#dfeffc',
55 
				opacity: 0.80
56 
			}).appendTo("body").fadeIn(200);
57 
		}
58 
 
59 
		var previousPoint = null;
60 
		$("#dotChart").bind("plothover", function (event, pos, item) {
61 
			$("#x").text(pos.x.toFixed(2));
62 
			$("#y").text(pos.y.toFixed(2));
63 
 
64 
				if (item) {
65 
					if (previousPoint != item.dataIndex) {
66 
						previousPoint = item.dataIndex;
67 
 
68 
						$("#tooltip").remove();
69 
						var x = item.datapoint[0].toFixed(2),
70 
							y = item.datapoint[1].toFixed(2);
71 
 
72 
						showTooltip(item.pageX, item.pageY,
73 
									item.series.label + " of " + x + " = " + y);
74 
					}
75 
				}
76 
				else {
77 
					$("#tooltip").remove();
78 
					previousPoint = null;
79 
				}
80 
		});
81 
 
82 
	}
83 
 
84 
	function randNumTW(){
85 
		return ((Math.floor( Math.random()* (1+40-20) ) ) + 20);
86 
	}
87 
 
88 
	/* ---------- Chart with points ---------- */
89 
	if($("#stats-chart").length)
90 
	{
91 
		var visitors = [[1, randNum()-10], [2, randNum()-10], [3, randNum()-10], [4, randNum()],[5, randNum()],[6, 4+randNum()],[7, 5+randNum()],[8, 6+randNum()],[9, 6+randNum()],[10, 8+randNum()],[11, 9+randNum()],[12, 10+randNum()],[13,11+randNum()],[14, 12+randNum()],[15, 13+randNum()],[16, 14+randNum()],[17, 15+randNum()],[18, 15+randNum()],[19, 16+randNum()],[20, 17+randNum()],[21, 18+randNum()],[22, 19+randNum()],[23, 20+randNum()],[24, 21+randNum()],[25, 14+randNum()],[26, 24+randNum()],[27,25+randNum()],[28, 26+randNum()],[29, 27+randNum()], [30, 31+randNum()]];
92 
 
93 
		var plot = $.plot($("#stats-chart"),
94 
			   [ { data: visitors, label: "visitors" } ], {
95 
				   series: {
96 
					   lines: { show: true,
97 
								lineWidth: 3,
98 
								fill: true, fillColor: { colors: [ { opacity: 0.5 }, { opacity: 0.2 } ] }
99 
							 },
100 
					   points: { show: true },
101 
					   shadowSize: 2
102 
				   },
103 
				   grid: { hoverable: true,
104 
						   clickable: true,
105 
						   tickColor: "#eee",
106 
						   borderWidth: 0,
107 
						 },
108 
				   colors: ["#b1d3d4"],
109 
					xaxis: {ticks:11, tickDecimals: 0},
110 
					yaxis: {ticks:11, tickDecimals: 0},
111 
				 });
112 
 
113 
		function showTooltip(x, y, contents) {
114 
			$('<div id="tooltip">' + contents + '</div>').css( {
115 
				position: 'absolute',
116 
				display: 'none',
117 
				top: y + 5,
118 
				left: x + 5,
119 
				border: '1px solid #fdd',
120 
				padding: '2px',
121 
				'background-color': '#dfeffc',
122 
				opacity: 0.80
123 
			}).appendTo("body").fadeIn(200);
124 
		}
125 
 
126 
		var previousPoint = null;
127 
		$("#stats-chart").bind("plothover", function (event, pos, item) {
128 
			$("#x").text(pos.x.toFixed(2));
129 
			$("#y").text(pos.y.toFixed(2));
130 
 
131 
				if (item) {
132 
					if (previousPoint != item.dataIndex) {
133 
						previousPoint = item.dataIndex;
134 
 
135 
						$("#tooltip").remove();
136 
						var x = item.datapoint[0].toFixed(2),
137 
							y = item.datapoint[1].toFixed(2);
138 
 
139 
						showTooltip(item.pageX, item.pageY,
140 
									item.series.label + " of " + x + " = " + y);
141 
					}
142 
				}
143 
				else {
144 
					$("#tooltip").remove();
145 
					previousPoint = null;
146 
				}
147 
		});
148 
 
149 
 
150 
 
151 
		$("#sincos").bind("plotclick", function (event, pos, item) {
152 
			if (item) {
153 
				$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
154 
				plot.highlight(item.series, item.datapoint);
155 
			}
156 
		});
157 
	}
158 
 
159 
 
160 
 
161 
	/* ---------- Chart with points ---------- */
162 
	if($("#sincos").length)
163 
	{
164 
		var sin = [], cos = [];
165 
 
166 
		for (var i = 0; i < 14; i += 0.5) {
167 
			sin.push([i, Math.sin(i)/i]);
168 
			cos.push([i, Math.cos(i)]);
169 
		}
170 
 
171 
		var plot = $.plot($("#sincos"),
172 
			   [ { data: sin, label: "sin(x)/x"}, { data: cos, label: "cos(x)" } ], {
173 
				   series: {
174 
					   lines: { show: true,
175 
								lineWidth: 2,
176 
							 },
177 
					   points: { show: true },
178 
					   shadowSize: 2
179 
				   },
180 
				   grid: { hoverable: true,
181 
						   clickable: true,
182 
						   tickColor: "#dddddd",
183 
						   borderWidth: 0
184 
						 },
185 
				   yaxis: { min: -1.2, max: 1.2 },
186 
				   colors: ["#FA5833", "#2FABE9"]
187 
				 });
188 
 
189 
		function showTooltip(x, y, contents) {
190 
			$('<div id="tooltip">' + contents + '</div>').css( {
191 
				position: 'absolute',
192 
				display: 'none',
193 
				top: y + 5,
194 
				left: x + 5,
195 
				border: '1px solid #fdd',
196 
				padding: '2px',
197 
				'background-color': '#dfeffc',
198 
				opacity: 0.80
199 
			}).appendTo("body").fadeIn(200);
200 
		}
201 
 
202 
		var previousPoint = null;
203 
		$("#sincos").bind("plothover", function (event, pos, item) {
204 
			$("#x").text(pos.x.toFixed(2));
205 
			$("#y").text(pos.y.toFixed(2));
206 
 
207 
				if (item) {
208 
					if (previousPoint != item.dataIndex) {
209 
						previousPoint = item.dataIndex;
210 
 
211 
						$("#tooltip").remove();
212 
						var x = item.datapoint[0].toFixed(2),
213 
							y = item.datapoint[1].toFixed(2);
214 
 
215 
						showTooltip(item.pageX, item.pageY,
216 
									item.series.label + " of " + x + " = " + y);
217 
					}
218 
				}
219 
				else {
220 
					$("#tooltip").remove();
221 
					previousPoint = null;
222 
				}
223 
		});
224 
 
225 
 
226 
 
227 
		$("#sincos").bind("plotclick", function (event, pos, item) {
228 
			if (item) {
229 
				$("#clickdata").text("You clicked point " + item.dataIndex + " in " + item.series.label + ".");
230 
				plot.highlight(item.series, item.datapoint);
231 
			}
232 
		});
233 
	}
234 
 
235 
	/* ---------- Flot chart ---------- */
236 
	if($("#flotchart").length)
237 
	{
238 
		var d1 = [];
239 
		for (var i = 0; i < Math.PI * 2; i += 0.25)
240 
			d1.push([i, Math.sin(i)]);
241 
 
242 
		var d2 = [];
243 
		for (var i = 0; i < Math.PI * 2; i += 0.25)
244 
			d2.push([i, Math.cos(i)]);
245 
 
246 
		var d3 = [];
247 
		for (var i = 0; i < Math.PI * 2; i += 0.1)
248 
			d3.push([i, Math.tan(i)]);
249 
 
250 
		$.plot($("#flotchart"), [
251 
			{ label: "sin(x)",  data: d1},
252 
			{ label: "cos(x)",  data: d2},
253 
			{ label: "tan(x)",  data: d3}
254 
		], {
255 
			series: {
256 
				lines: { show: true },
257 
				points: { show: true }
258 
			},
259 
			xaxis: {
260 
				ticks: [0, [Math.PI/2, "\u03c0/2"], [Math.PI, "\u03c0"], [Math.PI * 3/2, "3\u03c0/2"], [Math.PI * 2, "2\u03c0"]]
261 
			},
262 
			yaxis: {
263 
				ticks: 10,
264 
				min: -2,
265 
				max: 2
266 
			},
267 
			grid: {	tickColor: "#dddddd",
268 
					borderWidth: 0
269 
			},
270 
			colors: ["#FA5833", "#2FABE9", "#FABB3D"]
271 
		});
272 
	}
273 
 
274 
	/* ---------- Stack chart ---------- */
275 
	if($("#stackchart").length)
276 
	{
277 
		var d1 = [];
278 
		for (var i = 0; i <= 10; i += 1)
279 
		d1.push([i, parseInt(Math.random() * 30)]);
280 
 
281 
		var d2 = [];
282 
		for (var i = 0; i <= 10; i += 1)
283 
			d2.push([i, parseInt(Math.random() * 30)]);
284 
 
285 
		var d3 = [];
286 
		for (var i = 0; i <= 10; i += 1)
287 
			d3.push([i, parseInt(Math.random() * 30)]);
288 
 
289 
		var stack = 0, bars = true, lines = false, steps = false;
290 
 
291 
		function plotWithOptions() {
292 
			$.plot($("#stackchart"), [ d1, d2, d3 ], {
293 
				series: {
294 
					stack: stack,
295 
					lines: { show: lines, fill: true, steps: steps },
296 
					bars: { show: bars, barWidth: 0.6 },
297 
				},
298 
				colors: ["#FA5833", "#2FABE9", "#FABB3D"]
299 
			});
300 
		}
301 
 
302 
		plotWithOptions();
303 
 
304 
		$(".stackControls input").click(function (e) {
305 
			e.preventDefault();
306 
			stack = $(this).val() == "With stacking" ? true : null;
307 
			plotWithOptions();
308 
		});
309 
		$(".graphControls input").click(function (e) {
310 
			e.preventDefault();
311 
			bars = $(this).val().indexOf("Bars") != -1;
312 
			lines = $(this).val().indexOf("Lines") != -1;
313 
			steps = $(this).val().indexOf("steps") != -1;
314 
			plotWithOptions();
315 
		});
316 
	}
317 
 
318 
	/* ---------- Device chart ---------- */
319 
 
320 
	var data = [
321 
	{ label: "Desktop",  data: 73},
322 
	{ label: "Mobile",  data: 27}
323 
	];
324 
 
325 
	/* ---------- Donut chart ---------- */
326 
	if($("#deviceChart").length)
327 
	{
328 
		$.plot($("#deviceChart"), data,
329 
		{
330 
				series: {
331 
						pie: {
332 
								innerRadius: 0.6,
333 
								show: true
334 
						}
335 
				},
336 
				legend: {
337 
					show: true
338 
				},
339 
				colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
340 
		});
341 
	}
342 
 
343 
	var data = [
344 
	{ label: "iOS",  data: 20},
345 
	{ label: "Android",  data: 7},
346 
	{ label: "Linux",  data: 11},
347 
	{ label: "Mac OSX",  data: 14},
348 
	{ label: "Windows",  data: 48}
349 
	];
350 
 
351 
	/* ---------- Donut chart ---------- */
352 
	if($("#osChart").length)
353 
	{
354 
		$.plot($("#osChart"), data,
355 
		{
356 
				series: {
357 
						pie: {
358 
								innerRadius: 0.6,
359 
								show: true
360 
						}
361 
				},
362 
				legend: {
363 
					show: true
364 
				},
365 
				colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
366 
		});
367 
	}
368 
 
369 
	/* ---------- Pie chart ---------- */
370 
	var data = [
371 
	{ label: "Internet Explorer",  data: 12},
372 
	{ label: "Mobile",  data: 27},
373 
	{ label: "Safari",  data: 85},
374 
	{ label: "Opera",  data: 64},
375 
	{ label: "Firefox",  data: 90},
376 
	{ label: "Chrome",  data: 112}
377 
	];
378 
 
379 
	if($("#piechart").length)
380 
	{
381 
		$.plot($("#piechart"), data,
382 
		{
383 
			series: {
384 
					pie: {
385 
							show: true
386 
					}
387 
			},
388 
			grid: {
389 
					hoverable: true,
390 
					clickable: true
391 
			},
392 
			legend: {
393 
				show: false
394 
			},
395 
			colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
396 
		});
397 
 
398 
		function pieHover(event, pos, obj)
399 
		{
400 
			if (!obj)
401 
					return;
402 
			percent = parseFloat(obj.series.percent).toFixed(2);
403 
			$("#hover").html('<span style="font-weight: bold; color: '+obj.series.color+'">'+obj.series.label+' ('+percent+'%)</span>');
404 
		}
405 
		$("#piechart").bind("plothover", pieHover);
406 
	}
407 
 
408 
	/* ---------- Donut chart ---------- */
409 
	if($("#donutchart").length)
410 
	{
411 
		$.plot($("#donutchart"), data,
412 
		{
413 
				series: {
414 
						pie: {
415 
								innerRadius: 0.5,
416 
								show: true
417 
						}
418 
				},
419 
				legend: {
420 
					show: false
421 
				},
422 
				colors: ["#FA5833", "#2FABE9", "#FABB3D", "#78CD51"]
423 
		});
424 
	}
425 
 
426 
 
427 
 
428 
 
429 
	 // we use an inline data source in the example, usually data would
430 
	// be fetched from a server
431 
	var data = [], totalPoints = 300;
432 
	function getRandomData() {
433 
		if (data.length > 0)
434 
			data = data.slice(1);
435 
 
436 
		// do a random walk
437 
		while (data.length < totalPoints) {
438 
			var prev = data.length > 0 ? data[data.length - 1] : 50;
439 
			var y = prev + Math.random() * 10 - 5;
440 
			if (y < 0)
441 
				y = 0;
442 
			if (y > 100)
443 
				y = 100;
444 
			data.push(y);
445 
		}
446 
 
447 
		// zip the generated y values with the x values
448 
		var res = [];
449 
		for (var i = 0; i < data.length; ++i)
450 
			res.push([i, data[i]])
451 
		return res;
452 
	}
453 
 
454 
	// setup control widget
455 
	var updateInterval = 30;
456 
	$("#updateInterval").val(updateInterval).change(function () {
457 
		var v = $(this).val();
458 
		if (v && !isNaN(+v)) {
459 
			updateInterval = +v;
460 
			if (updateInterval < 1)
461 
				updateInterval = 1;
462 
			if (updateInterval > 2000)
463 
				updateInterval = 2000;
464 
			$(this).val("" + updateInterval);
465 
		}
466 
	});
467 
 
468 
 
469 
	if($("#realtimechart").length)
470 
	{
471 
		var options = {
472 
			series: { shadowSize: 1 },
473 
			lines: { fill: true, fillColor: { colors: [ { opacity: 1 }, { opacity: 0.1 } ] }},
474 
			yaxis: { min: 0, max: 100 },
475 
			xaxis: { show: false },
476 
			colors: ["#F4A506"],
477 
			grid: {	tickColor: "#dddddd",
478 
					borderWidth: 0
479 
			},
480 
		};
481 
		var plot = $.plot($("#realtimechart"), [ getRandomData() ], options);
482 
		function update() {
483 
			plot.setData([ getRandomData() ]);
484 
			// since the axes don't change, we don't need to call plot.setupGrid()
485 
			plot.draw();
486 
 
487 
			setTimeout(update, updateInterval);
488 
		}
489 
 
490 
		update();
491 
	}
492 
 
493 
});