This repository was archived by the owner on Oct 13, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtest_demo_all.html
More file actions
836 lines (434 loc) · 80.5 KB
/
test_demo_all.html
File metadata and controls
836 lines (434 loc) · 80.5 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
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
</head>
<h2>discreteBarChart</h2>
<div id="my_graphname"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_my_graphname=[{"values": [{"y": 3, "x": "A"}, {"y": 12, "x": "B"}, {"y": -10, "x": "C"}, {"y": 5, "x": "D"}, {"y": 25, "x": "E"}, {"y": -7, "x": "F"}, {"y": 2, "x": "G"}], "key": "Serie 1", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.discreteBarChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_my_graphname;
chart.yAxis
.tickFormat(d3.format(',.0f'));
d3.select('#my_graphname svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>pie Chart</h2>
<div id="pie_chart"><svg style="width:400px;height:400px;"></svg></div>
<script>
$(function(){
data_pie_chart=[{"values": [{"value": 3, "label": "Orange"}, {"value": 4, "label": "Banana"}, {"value": 2, "label": "Pear"}, {"value": 1, "label": "Kiwi"}, {"value": 5, "label": "Apple"}, {"value": 7, "label": "Strawberry"}, {"value": 3, "label": "Pineapple"}], "key": "Serie 1"}];
nv.addGraph(function() {
var chart = nv.models.pieChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_pie_chart[0].values;
chart.tooltipContent(function(key, y, e, graph) {
var x = String(key);
var y = String(y) + ' cal';
tooltip_str = '<center><b>'+x+'</b></center>' + y;
return tooltip_str;
});
chart.showLabels(true);
chart.donut(false);
chart.showLegend(true);
var mycolor = new Array();
mycolor[0] = "orange";
mycolor[1] = "yellow";
mycolor[2] = "#C5E946";
mycolor[3] = "#95b43f";
mycolor[4] = "red";
mycolor[5] = "#FF2259";
mycolor[6] = "#F6A641";
chart
.x(function(d) { return d.label })
.y(function(d) { return d.value });
chart.width(400);
chart.height(400);
chart.color(mycolor);
d3.select('#pie_chart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 400)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>lineChart-different-x-axis</h2>
<div id="linechart_different_x_axis"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_linechart_different_x_axis=[{"color": "green", "values": [{"y": 4, "x": 1}, {"y": 6, "x": 3}, {"y": 8, "x": 5}, {"y": 4, "x": 7}, {"y": 8, "x": 9}, {"y": 11, "x": 11}, {"y": 15, "x": 13}, {"y": 9, "x": 15}, {"y": 17, "x": 17}, {"y": 14, "x": 19}, {"y": 16, "x": 21}, {"y": 15, "x": 23}, {"y": 19, "x": 25}, {"y": 14, "x": 27}, {"y": 16, "x": 29}, {"y": 22, "x": 31}, {"y": 25, "x": 33}, {"y": 22, "x": 35}, {"y": 28, "x": 37}, {"y": 22, "x": 39}, {"y": 29, "x": 41}, {"y": 24, "x": 43}, {"y": 27, "x": 45}, {"y": 30, "x": 47}, {"y": 34, "x": 49}, {"y": 29, "x": 51}, {"y": 34, "x": 53}, {"y": 30, "x": 55}, {"y": 35, "x": 57}, {"y": 38, "x": 59}, {"y": 35, "x": 61}, {"y": 33, "x": 63}, {"y": 37, "x": 65}, {"y": 37, "x": 67}, {"y": 36, "x": 69}, {"y": 39, "x": 71}, {"y": 38, "x": 73}, {"y": 47, "x": 75}, {"y": 47, "x": 77}, {"y": 49, "x": 79}, {"y": 46, "x": 81}, {"y": 45, "x": 83}, {"y": 46, "x": 85}, {"y": 46, "x": 87}, {"y": 47, "x": 89}, {"y": 52, "x": 91}, {"y": 52, "x": 93}, {"y": 57, "x": 95}, {"y": 55, "x": 97}, {"y": 56, "x": 99}, {"y": 52, "x": 101}, {"y": 61, "x": 103}, {"y": 53, "x": 105}, {"y": 58, "x": 107}, {"y": 64, "x": 109}, {"y": 58, "x": 111}, {"y": 57, "x": 113}, {"y": 61, "x": 115}, {"y": 65, "x": 117}, {"y": 60, "x": 119}, {"y": 63, "x": 121}, {"y": 67, "x": 123}, {"y": 69, "x": 125}, {"y": 69, "x": 127}, {"y": 72, "x": 129}, {"y": 72, "x": 131}, {"y": 73, "x": 133}, {"y": 77, "x": 135}, {"y": 73, "x": 137}, {"y": 71, "x": 139}, {"y": 71, "x": 141}, {"y": 72, "x": 143}, {"y": 77, "x": 145}, {"y": 82, "x": 147}, {"y": 80, "x": 149}, {"y": 83, "x": 151}, {"y": 80, "x": 153}, {"y": 83, "x": 155}, {"y": 85, "x": 157}, {"y": 89, "x": 159}, {"y": 85, "x": 161}, {"y": 87, "x": 163}, {"y": 86, "x": 165}, {"y": 87, "x": 167}, {"y": 87, "x": 169}, {"y": 94, "x": 171}, {"y": 87, "x": 173}, {"y": 97, "x": 175}, {"y": 91, "x": 177}, {"y": 93, "x": 179}, {"y": 93, "x": 181}, {"y": 93, "x": 183}, {"y": 98, "x": 185}, {"y": 98, "x": 187}, {"y": 100, "x": 189}, {"y": 105, "x": 191}, {"y": 106, "x": 193}, {"y": 104, "x": 195}, {"y": 106, "x": 197}, {"y": 101, "x": 199}], "key": "Odd X-Axis", "yAxis": "1"}, {"color": "red", "values": [{"y": 8, "x": 0}, {"y": 12, "x": 2}, {"y": 16, "x": 4}, {"y": 8, "x": 6}, {"y": 16, "x": 8}, {"y": 22, "x": 10}, {"y": 30, "x": 12}, {"y": 18, "x": 14}, {"y": 34, "x": 16}, {"y": 28, "x": 18}, {"y": 32, "x": 20}, {"y": 30, "x": 22}, {"y": 38, "x": 24}, {"y": 28, "x": 26}, {"y": 32, "x": 28}, {"y": 44, "x": 30}, {"y": 50, "x": 32}, {"y": 44, "x": 34}, {"y": 56, "x": 36}, {"y": 44, "x": 38}, {"y": 58, "x": 40}, {"y": 48, "x": 42}, {"y": 54, "x": 44}, {"y": 60, "x": 46}, {"y": 68, "x": 48}, {"y": 58, "x": 50}, {"y": 68, "x": 52}, {"y": 60, "x": 54}, {"y": 70, "x": 56}, {"y": 76, "x": 58}, {"y": 70, "x": 60}, {"y": 66, "x": 62}, {"y": 74, "x": 64}, {"y": 74, "x": 66}, {"y": 72, "x": 68}, {"y": 78, "x": 70}, {"y": 76, "x": 72}, {"y": 94, "x": 74}, {"y": 94, "x": 76}, {"y": 98, "x": 78}, {"y": 92, "x": 80}, {"y": 90, "x": 82}, {"y": 92, "x": 84}, {"y": 92, "x": 86}, {"y": 94, "x": 88}, {"y": 104, "x": 90}, {"y": 104, "x": 92}, {"y": 114, "x": 94}, {"y": 110, "x": 96}, {"y": 112, "x": 98}, {"y": 104, "x": 100}, {"y": 122, "x": 102}, {"y": 106, "x": 104}, {"y": 116, "x": 106}, {"y": 128, "x": 108}, {"y": 116, "x": 110}, {"y": 114, "x": 112}, {"y": 122, "x": 114}, {"y": 130, "x": 116}, {"y": 120, "x": 118}, {"y": 126, "x": 120}, {"y": 134, "x": 122}, {"y": 138, "x": 124}, {"y": 138, "x": 126}, {"y": 144, "x": 128}, {"y": 144, "x": 130}, {"y": 146, "x": 132}, {"y": 154, "x": 134}, {"y": 146, "x": 136}, {"y": 142, "x": 138}, {"y": 142, "x": 140}, {"y": 144, "x": 142}, {"y": 154, "x": 144}, {"y": 164, "x": 146}, {"y": 160, "x": 148}, {"y": 166, "x": 150}, {"y": 160, "x": 152}, {"y": 166, "x": 154}, {"y": 170, "x": 156}, {"y": 178, "x": 158}, {"y": 170, "x": 160}, {"y": 174, "x": 162}, {"y": 172, "x": 164}, {"y": 174, "x": 166}, {"y": 174, "x": 168}, {"y": 188, "x": 170}, {"y": 174, "x": 172}, {"y": 194, "x": 174}, {"y": 182, "x": 176}, {"y": 186, "x": 178}, {"y": 186, "x": 180}, {"y": 186, "x": 182}, {"y": 196, "x": 184}, {"y": 196, "x": 186}, {"y": 200, "x": 188}, {"y": 210, "x": 190}, {"y": 212, "x": 192}, {"y": 208, "x": 194}, {"y": 212, "x": 196}, {"y": 202, "x": 198}], "key": "Even X-Axis", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_linechart_different_x_axis;
chart.xAxis
.tickFormat(d3.format(',r'));
chart.yAxis
.tickFormat(d3.format(',.02f'));
chart.showLegend(true);
d3.select('#linechart_different_x_axis svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>lineChart</h2>
<div id="linechart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_linechart=[{"color": "green", "values": [{"y": 2, "x": 1338480000000}, {"y": 6, "x": 1339480000000}, {"y": 3, "x": 1340480000000}, {"y": 6, "x": 1341480000000}, {"y": 12, "x": 1342480000000}, {"y": 11, "x": 1343480000000}, {"y": 15, "x": 1344480000000}, {"y": 12, "x": 1345480000000}, {"y": 14, "x": 1346480000000}, {"y": 12, "x": 1347480000000}, {"y": 18, "x": 1348480000000}, {"y": 13, "x": 1349480000000}, {"y": 15, "x": 1350480000000}, {"y": 15, "x": 1351480000000}, {"y": 20, "x": 1352480000000}, {"y": 18, "x": 1353480000000}, {"y": 19, "x": 1354480000000}, {"y": 26, "x": 1355480000000}, {"y": 24, "x": 1356480000000}, {"y": 27, "x": 1357480000000}, {"y": 27, "x": 1358480000000}, {"y": 31, "x": 1359480000000}, {"y": 30, "x": 1360480000000}, {"y": 27, "x": 1361480000000}, {"y": 25, "x": 1362480000000}, {"y": 27, "x": 1363480000000}, {"y": 29, "x": 1364480000000}, {"y": 36, "x": 1365480000000}, {"y": 32, "x": 1366480000000}, {"y": 30, "x": 1367480000000}, {"y": 31, "x": 1368480000000}, {"y": 37, "x": 1369480000000}, {"y": 36, "x": 1370480000000}, {"y": 39, "x": 1371480000000}, {"y": 39, "x": 1372480000000}, {"y": 40, "x": 1373480000000}, {"y": 40, "x": 1374480000000}, {"y": 39, "x": 1375480000000}, {"y": 46, "x": 1376480000000}, {"y": 48, "x": 1377480000000}, {"y": 44, "x": 1378480000000}, {"y": 51, "x": 1379480000000}, {"y": 44, "x": 1380480000000}, {"y": 46, "x": 1381480000000}, {"y": 50, "x": 1382480000000}, {"y": 46, "x": 1383480000000}, {"y": 52, "x": 1384480000000}, {"y": 55, "x": 1385480000000}, {"y": 54, "x": 1386480000000}, {"y": 52, "x": 1387480000000}, {"y": 54, "x": 1388480000000}, {"y": 52, "x": 1389480000000}, {"y": 60, "x": 1390480000000}, {"y": 61, "x": 1391480000000}, {"y": 62, "x": 1392480000000}, {"y": 65, "x": 1393480000000}, {"y": 57, "x": 1394480000000}, {"y": 67, "x": 1395480000000}, {"y": 66, "x": 1396480000000}, {"y": 67, "x": 1397480000000}, {"y": 62, "x": 1398480000000}, {"y": 66, "x": 1399480000000}, {"y": 72, "x": 1400480000000}, {"y": 65, "x": 1401480000000}, {"y": 65, "x": 1402480000000}, {"y": 70, "x": 1403480000000}, {"y": 76, "x": 1404480000000}, {"y": 72, "x": 1405480000000}, {"y": 73, "x": 1406480000000}, {"y": 72, "x": 1407480000000}, {"y": 78, "x": 1408480000000}, {"y": 81, "x": 1409480000000}, {"y": 82, "x": 1410480000000}, {"y": 81, "x": 1411480000000}, {"y": 80, "x": 1412480000000}, {"y": 76, "x": 1413480000000}, {"y": 84, "x": 1414480000000}, {"y": 86, "x": 1415480000000}, {"y": 86, "x": 1416480000000}, {"y": 80, "x": 1417480000000}, {"y": 88, "x": 1418480000000}, {"y": 87, "x": 1419480000000}, {"y": 83, "x": 1420480000000}, {"y": 87, "x": 1421480000000}, {"y": 86, "x": 1422480000000}, {"y": 87, "x": 1423480000000}, {"y": 89, "x": 1424480000000}, {"y": 91, "x": 1425480000000}, {"y": 90, "x": 1426480000000}, {"y": 93, "x": 1427480000000}, {"y": 91, "x": 1428480000000}, {"y": 101, "x": 1429480000000}, {"y": 94, "x": 1430480000000}, {"y": 95, "x": 1431480000000}, {"y": 103, "x": 1432480000000}, {"y": 103, "x": 1433480000000}, {"y": 98, "x": 1434480000000}, {"y": 105, "x": 1435480000000}, {"y": 108, "x": 1436480000000}, {"y": 104, "x": 1437480000000}], "key": "Count", "yAxis": "1"}, {"color": "red", "values": [{"y": 4, "x": 1338480000000}, {"y": 12, "x": 1339480000000}, {"y": 6, "x": 1340480000000}, {"y": 12, "x": 1341480000000}, {"y": 24, "x": 1342480000000}, {"y": 22, "x": 1343480000000}, {"y": 30, "x": 1344480000000}, {"y": 24, "x": 1345480000000}, {"y": 28, "x": 1346480000000}, {"y": 24, "x": 1347480000000}, {"y": 36, "x": 1348480000000}, {"y": 26, "x": 1349480000000}, {"y": 30, "x": 1350480000000}, {"y": 30, "x": 1351480000000}, {"y": 40, "x": 1352480000000}, {"y": 36, "x": 1353480000000}, {"y": 38, "x": 1354480000000}, {"y": 52, "x": 1355480000000}, {"y": 48, "x": 1356480000000}, {"y": 54, "x": 1357480000000}, {"y": 54, "x": 1358480000000}, {"y": 62, "x": 1359480000000}, {"y": 60, "x": 1360480000000}, {"y": 54, "x": 1361480000000}, {"y": 50, "x": 1362480000000}, {"y": 54, "x": 1363480000000}, {"y": 58, "x": 1364480000000}, {"y": 72, "x": 1365480000000}, {"y": 64, "x": 1366480000000}, {"y": 60, "x": 1367480000000}, {"y": 62, "x": 1368480000000}, {"y": 74, "x": 1369480000000}, {"y": 72, "x": 1370480000000}, {"y": 78, "x": 1371480000000}, {"y": 78, "x": 1372480000000}, {"y": 80, "x": 1373480000000}, {"y": 80, "x": 1374480000000}, {"y": 78, "x": 1375480000000}, {"y": 92, "x": 1376480000000}, {"y": 96, "x": 1377480000000}, {"y": 88, "x": 1378480000000}, {"y": 102, "x": 1379480000000}, {"y": 88, "x": 1380480000000}, {"y": 92, "x": 1381480000000}, {"y": 100, "x": 1382480000000}, {"y": 92, "x": 1383480000000}, {"y": 104, "x": 1384480000000}, {"y": 110, "x": 1385480000000}, {"y": 108, "x": 1386480000000}, {"y": 104, "x": 1387480000000}, {"y": 108, "x": 1388480000000}, {"y": 104, "x": 1389480000000}, {"y": 120, "x": 1390480000000}, {"y": 122, "x": 1391480000000}, {"y": 124, "x": 1392480000000}, {"y": 130, "x": 1393480000000}, {"y": 114, "x": 1394480000000}, {"y": 134, "x": 1395480000000}, {"y": 132, "x": 1396480000000}, {"y": 134, "x": 1397480000000}, {"y": 124, "x": 1398480000000}, {"y": 132, "x": 1399480000000}, {"y": 144, "x": 1400480000000}, {"y": 130, "x": 1401480000000}, {"y": 130, "x": 1402480000000}, {"y": 140, "x": 1403480000000}, {"y": 152, "x": 1404480000000}, {"y": 144, "x": 1405480000000}, {"y": 146, "x": 1406480000000}, {"y": 144, "x": 1407480000000}, {"y": 156, "x": 1408480000000}, {"y": 162, "x": 1409480000000}, {"y": 164, "x": 1410480000000}, {"y": 162, "x": 1411480000000}, {"y": 160, "x": 1412480000000}, {"y": 152, "x": 1413480000000}, {"y": 168, "x": 1414480000000}, {"y": 172, "x": 1415480000000}, {"y": 172, "x": 1416480000000}, {"y": 160, "x": 1417480000000}, {"y": 176, "x": 1418480000000}, {"y": 174, "x": 1419480000000}, {"y": 166, "x": 1420480000000}, {"y": 174, "x": 1421480000000}, {"y": 172, "x": 1422480000000}, {"y": 174, "x": 1423480000000}, {"y": 178, "x": 1424480000000}, {"y": 182, "x": 1425480000000}, {"y": 180, "x": 1426480000000}, {"y": 186, "x": 1427480000000}, {"y": 182, "x": 1428480000000}, {"y": 202, "x": 1429480000000}, {"y": 188, "x": 1430480000000}, {"y": 190, "x": 1431480000000}, {"y": 206, "x": 1432480000000}, {"y": 206, "x": 1433480000000}, {"y": 196, "x": 1434480000000}, {"y": 210, "x": 1435480000000}, {"y": 216, "x": 1436480000000}, {"y": 208, "x": 1437480000000}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_linechart;
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y %H')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.02f'));
chart.showLegend(true);
d3.select('#linechart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>lineChartWithInteractiveGuideline</h2>
<div id="linechart_with_interactive_guideline"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_linechart_with_interactive_guideline=[{"color": "green", "values": [{"y": 8, "x": 1338480000000}, {"y": 11, "x": 1339480000000}, {"y": 10, "x": 1340480000000}, {"y": 7, "x": 1341480000000}, {"y": 10, "x": 1342480000000}, {"y": 11, "x": 1343480000000}, {"y": 12, "x": 1344480000000}, {"y": 11, "x": 1345480000000}, {"y": 10, "x": 1346480000000}, {"y": 19, "x": 1347480000000}, {"y": 12, "x": 1348480000000}, {"y": 12, "x": 1349480000000}, {"y": 18, "x": 1350480000000}, {"y": 18, "x": 1351480000000}, {"y": 22, "x": 1352480000000}, {"y": 24, "x": 1353480000000}, {"y": 26, "x": 1354480000000}, {"y": 24, "x": 1355480000000}, {"y": 25, "x": 1356480000000}, {"y": 23, "x": 1357480000000}, {"y": 29, "x": 1358480000000}, {"y": 24, "x": 1359480000000}, {"y": 26, "x": 1360480000000}, {"y": 31, "x": 1361480000000}, {"y": 26, "x": 1362480000000}, {"y": 28, "x": 1363480000000}, {"y": 34, "x": 1364480000000}, {"y": 32, "x": 1365480000000}, {"y": 33, "x": 1366480000000}, {"y": 38, "x": 1367480000000}, {"y": 31, "x": 1368480000000}, {"y": 34, "x": 1369480000000}, {"y": 40, "x": 1370480000000}, {"y": 43, "x": 1371480000000}, {"y": 43, "x": 1372480000000}, {"y": 41, "x": 1373480000000}, {"y": 39, "x": 1374480000000}, {"y": 41, "x": 1375480000000}, {"y": 43, "x": 1376480000000}, {"y": 40, "x": 1377480000000}, {"y": 49, "x": 1378480000000}, {"y": 44, "x": 1379480000000}, {"y": 46, "x": 1380480000000}, {"y": 53, "x": 1381480000000}, {"y": 51, "x": 1382480000000}, {"y": 50, "x": 1383480000000}, {"y": 55, "x": 1384480000000}, {"y": 49, "x": 1385480000000}, {"y": 55, "x": 1386480000000}, {"y": 53, "x": 1387480000000}, {"y": 57, "x": 1388480000000}, {"y": 54, "x": 1389480000000}, {"y": 61, "x": 1390480000000}, {"y": 60, "x": 1391480000000}, {"y": 55, "x": 1392480000000}, {"y": 64, "x": 1393480000000}, {"y": 66, "x": 1394480000000}, {"y": 59, "x": 1395480000000}, {"y": 66, "x": 1396480000000}, {"y": 63, "x": 1397480000000}, {"y": 69, "x": 1398480000000}, {"y": 63, "x": 1399480000000}, {"y": 70, "x": 1400480000000}, {"y": 71, "x": 1401480000000}, {"y": 71, "x": 1402480000000}, {"y": 73, "x": 1403480000000}, {"y": 69, "x": 1404480000000}, {"y": 69, "x": 1405480000000}, {"y": 72, "x": 1406480000000}, {"y": 72, "x": 1407480000000}, {"y": 79, "x": 1408480000000}, {"y": 76, "x": 1409480000000}, {"y": 81, "x": 1410480000000}, {"y": 83, "x": 1411480000000}, {"y": 79, "x": 1412480000000}, {"y": 76, "x": 1413480000000}, {"y": 77, "x": 1414480000000}, {"y": 80, "x": 1415480000000}, {"y": 88, "x": 1416480000000}, {"y": 86, "x": 1417480000000}, {"y": 83, "x": 1418480000000}, {"y": 88, "x": 1419480000000}, {"y": 90, "x": 1420480000000}, {"y": 93, "x": 1421480000000}, {"y": 87, "x": 1422480000000}, {"y": 92, "x": 1423480000000}, {"y": 89, "x": 1424480000000}, {"y": 88, "x": 1425480000000}, {"y": 93, "x": 1426480000000}, {"y": 96, "x": 1427480000000}, {"y": 94, "x": 1428480000000}, {"y": 93, "x": 1429480000000}, {"y": 93, "x": 1430480000000}, {"y": 100, "x": 1431480000000}, {"y": 99, "x": 1432480000000}, {"y": 99, "x": 1433480000000}, {"y": 100, "x": 1434480000000}, {"y": 102, "x": 1435480000000}, {"y": 105, "x": 1436480000000}, {"y": 100, "x": 1437480000000}], "key": "Count", "yAxis": "1"}, {"color": "red", "values": [{"y": 16, "x": 1338480000000}, {"y": 22, "x": 1339480000000}, {"y": 20, "x": 1340480000000}, {"y": 14, "x": 1341480000000}, {"y": 20, "x": 1342480000000}, {"y": 22, "x": 1343480000000}, {"y": 24, "x": 1344480000000}, {"y": 22, "x": 1345480000000}, {"y": 20, "x": 1346480000000}, {"y": 38, "x": 1347480000000}, {"y": 24, "x": 1348480000000}, {"y": 24, "x": 1349480000000}, {"y": 36, "x": 1350480000000}, {"y": 36, "x": 1351480000000}, {"y": 44, "x": 1352480000000}, {"y": 48, "x": 1353480000000}, {"y": 52, "x": 1354480000000}, {"y": 48, "x": 1355480000000}, {"y": 50, "x": 1356480000000}, {"y": 46, "x": 1357480000000}, {"y": 58, "x": 1358480000000}, {"y": 48, "x": 1359480000000}, {"y": 52, "x": 1360480000000}, {"y": 62, "x": 1361480000000}, {"y": 52, "x": 1362480000000}, {"y": 56, "x": 1363480000000}, {"y": 68, "x": 1364480000000}, {"y": 64, "x": 1365480000000}, {"y": 66, "x": 1366480000000}, {"y": 76, "x": 1367480000000}, {"y": 62, "x": 1368480000000}, {"y": 68, "x": 1369480000000}, {"y": 80, "x": 1370480000000}, {"y": 86, "x": 1371480000000}, {"y": 86, "x": 1372480000000}, {"y": 82, "x": 1373480000000}, {"y": 78, "x": 1374480000000}, {"y": 82, "x": 1375480000000}, {"y": 86, "x": 1376480000000}, {"y": 80, "x": 1377480000000}, {"y": 98, "x": 1378480000000}, {"y": 88, "x": 1379480000000}, {"y": 92, "x": 1380480000000}, {"y": 106, "x": 1381480000000}, {"y": 102, "x": 1382480000000}, {"y": 100, "x": 1383480000000}, {"y": 110, "x": 1384480000000}, {"y": 98, "x": 1385480000000}, {"y": 110, "x": 1386480000000}, {"y": 106, "x": 1387480000000}, {"y": 114, "x": 1388480000000}, {"y": 108, "x": 1389480000000}, {"y": 122, "x": 1390480000000}, {"y": 120, "x": 1391480000000}, {"y": 110, "x": 1392480000000}, {"y": 128, "x": 1393480000000}, {"y": 132, "x": 1394480000000}, {"y": 118, "x": 1395480000000}, {"y": 132, "x": 1396480000000}, {"y": 126, "x": 1397480000000}, {"y": 138, "x": 1398480000000}, {"y": 126, "x": 1399480000000}, {"y": 140, "x": 1400480000000}, {"y": 142, "x": 1401480000000}, {"y": 142, "x": 1402480000000}, {"y": 146, "x": 1403480000000}, {"y": 138, "x": 1404480000000}, {"y": 138, "x": 1405480000000}, {"y": 144, "x": 1406480000000}, {"y": 144, "x": 1407480000000}, {"y": 158, "x": 1408480000000}, {"y": 152, "x": 1409480000000}, {"y": 162, "x": 1410480000000}, {"y": 166, "x": 1411480000000}, {"y": 158, "x": 1412480000000}, {"y": 152, "x": 1413480000000}, {"y": 154, "x": 1414480000000}, {"y": 160, "x": 1415480000000}, {"y": 176, "x": 1416480000000}, {"y": 172, "x": 1417480000000}, {"y": 166, "x": 1418480000000}, {"y": 176, "x": 1419480000000}, {"y": 180, "x": 1420480000000}, {"y": 186, "x": 1421480000000}, {"y": 174, "x": 1422480000000}, {"y": 184, "x": 1423480000000}, {"y": 178, "x": 1424480000000}, {"y": 176, "x": 1425480000000}, {"y": 186, "x": 1426480000000}, {"y": 192, "x": 1427480000000}, {"y": 188, "x": 1428480000000}, {"y": 186, "x": 1429480000000}, {"y": 186, "x": 1430480000000}, {"y": 200, "x": 1431480000000}, {"y": 198, "x": 1432480000000}, {"y": 198, "x": 1433480000000}, {"y": 200, "x": 1434480000000}, {"y": 204, "x": 1435480000000}, {"y": 210, "x": 1436480000000}, {"y": 200, "x": 1437480000000}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.lineChart().useInteractiveGuideline(true);
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_linechart_with_interactive_guideline;
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y %H')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.02f'));
chart.showLegend(true);
d3.select('#linechart_with_interactive_guideline svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>lineWithFocusChart</h2>
<div id="linewithfocuschart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_linewithfocuschart=[{"values": [{"y": -6, "x": 1338480000000}, {"y": 1, "x": 1339480000000}, {"y": 8, "x": 1340480000000}, {"y": 13, "x": 1341480000000}, {"y": 8, "x": 1342480000000}, {"y": 2, "x": 1343480000000}, {"y": -3, "x": 1344480000000}, {"y": -1, "x": 1345480000000}, {"y": 18, "x": 1346480000000}, {"y": 11, "x": 1347480000000}, {"y": 16, "x": 1348480000000}, {"y": 19, "x": 1349480000000}, {"y": 13, "x": 1350480000000}, {"y": 10, "x": 1351480000000}, {"y": 4, "x": 1352480000000}, {"y": 18, "x": 1353480000000}, {"y": 12, "x": 1354480000000}, {"y": 23, "x": 1355480000000}, {"y": 11, "x": 1356480000000}, {"y": 15, "x": 1357480000000}, {"y": 25, "x": 1358480000000}, {"y": 15, "x": 1359480000000}, {"y": 17, "x": 1360480000000}, {"y": 26, "x": 1361480000000}, {"y": 19, "x": 1362480000000}, {"y": 27, "x": 1363480000000}, {"y": 32, "x": 1364480000000}, {"y": 29, "x": 1365480000000}, {"y": 24, "x": 1366480000000}, {"y": 38, "x": 1367480000000}, {"y": 28, "x": 1368480000000}, {"y": 32, "x": 1369480000000}, {"y": 35, "x": 1370480000000}, {"y": 24, "x": 1371480000000}, {"y": 40, "x": 1372480000000}, {"y": 33, "x": 1373480000000}, {"y": 45, "x": 1374480000000}, {"y": 37, "x": 1375480000000}, {"y": 31, "x": 1376480000000}, {"y": 47, "x": 1377480000000}, {"y": 48, "x": 1378480000000}, {"y": 40, "x": 1379480000000}, {"y": 34, "x": 1380480000000}, {"y": 53, "x": 1381480000000}, {"y": 35, "x": 1382480000000}, {"y": 39, "x": 1383480000000}, {"y": 41, "x": 1384480000000}, {"y": 47, "x": 1385480000000}, {"y": 44, "x": 1386480000000}, {"y": 39, "x": 1387480000000}, {"y": 57, "x": 1388480000000}, {"y": 59, "x": 1389480000000}, {"y": 52, "x": 1390480000000}, {"y": 51, "x": 1391480000000}, {"y": 64, "x": 1392480000000}, {"y": 59, "x": 1393480000000}, {"y": 59, "x": 1394480000000}, {"y": 52, "x": 1395480000000}, {"y": 54, "x": 1396480000000}, {"y": 68, "x": 1397480000000}, {"y": 50, "x": 1398480000000}, {"y": 59, "x": 1399480000000}, {"y": 57, "x": 1400480000000}, {"y": 57, "x": 1401480000000}, {"y": 55, "x": 1402480000000}, {"y": 66, "x": 1403480000000}, {"y": 68, "x": 1404480000000}, {"y": 75, "x": 1405480000000}, {"y": 58, "x": 1406480000000}, {"y": 67, "x": 1407480000000}, {"y": 65, "x": 1408480000000}, {"y": 72, "x": 1409480000000}, {"y": 73, "x": 1410480000000}, {"y": 78, "x": 1411480000000}, {"y": 71, "x": 1412480000000}, {"y": 79, "x": 1413480000000}, {"y": 75, "x": 1414480000000}, {"y": 81, "x": 1415480000000}, {"y": 76, "x": 1416480000000}, {"y": 77, "x": 1417480000000}, {"y": 83, "x": 1418480000000}, {"y": 74, "x": 1419480000000}, {"y": 80, "x": 1420480000000}, {"y": 82, "x": 1421480000000}, {"y": 80, "x": 1422480000000}, {"y": 75, "x": 1423480000000}, {"y": 88, "x": 1424480000000}, {"y": 97, "x": 1425480000000}, {"y": 80, "x": 1426480000000}, {"y": 96, "x": 1427480000000}, {"y": 82, "x": 1428480000000}, {"y": 81, "x": 1429480000000}, {"y": 83, "x": 1430480000000}, {"y": 91, "x": 1431480000000}, {"y": 100, "x": 1432480000000}, {"y": 96, "x": 1433480000000}, {"y": 91, "x": 1434480000000}, {"y": 91, "x": 1435480000000}, {"y": 91, "x": 1436480000000}, {"y": 94, "x": 1437480000000}], "key": "serie 1", "yAxis": "1"}, {"values": [{"y": -12, "x": 1338480000000}, {"y": 2, "x": 1339480000000}, {"y": 16, "x": 1340480000000}, {"y": 26, "x": 1341480000000}, {"y": 16, "x": 1342480000000}, {"y": 4, "x": 1343480000000}, {"y": -6, "x": 1344480000000}, {"y": -2, "x": 1345480000000}, {"y": 36, "x": 1346480000000}, {"y": 22, "x": 1347480000000}, {"y": 32, "x": 1348480000000}, {"y": 38, "x": 1349480000000}, {"y": 26, "x": 1350480000000}, {"y": 20, "x": 1351480000000}, {"y": 8, "x": 1352480000000}, {"y": 36, "x": 1353480000000}, {"y": 24, "x": 1354480000000}, {"y": 46, "x": 1355480000000}, {"y": 22, "x": 1356480000000}, {"y": 30, "x": 1357480000000}, {"y": 50, "x": 1358480000000}, {"y": 30, "x": 1359480000000}, {"y": 34, "x": 1360480000000}, {"y": 52, "x": 1361480000000}, {"y": 38, "x": 1362480000000}, {"y": 54, "x": 1363480000000}, {"y": 64, "x": 1364480000000}, {"y": 58, "x": 1365480000000}, {"y": 48, "x": 1366480000000}, {"y": 76, "x": 1367480000000}, {"y": 56, "x": 1368480000000}, {"y": 64, "x": 1369480000000}, {"y": 70, "x": 1370480000000}, {"y": 48, "x": 1371480000000}, {"y": 80, "x": 1372480000000}, {"y": 66, "x": 1373480000000}, {"y": 90, "x": 1374480000000}, {"y": 74, "x": 1375480000000}, {"y": 62, "x": 1376480000000}, {"y": 94, "x": 1377480000000}, {"y": 96, "x": 1378480000000}, {"y": 80, "x": 1379480000000}, {"y": 68, "x": 1380480000000}, {"y": 106, "x": 1381480000000}, {"y": 70, "x": 1382480000000}, {"y": 78, "x": 1383480000000}, {"y": 82, "x": 1384480000000}, {"y": 94, "x": 1385480000000}, {"y": 88, "x": 1386480000000}, {"y": 78, "x": 1387480000000}, {"y": 114, "x": 1388480000000}, {"y": 118, "x": 1389480000000}, {"y": 104, "x": 1390480000000}, {"y": 102, "x": 1391480000000}, {"y": 128, "x": 1392480000000}, {"y": 118, "x": 1393480000000}, {"y": 118, "x": 1394480000000}, {"y": 104, "x": 1395480000000}, {"y": 108, "x": 1396480000000}, {"y": 136, "x": 1397480000000}, {"y": 100, "x": 1398480000000}, {"y": 118, "x": 1399480000000}, {"y": 114, "x": 1400480000000}, {"y": 114, "x": 1401480000000}, {"y": 110, "x": 1402480000000}, {"y": 132, "x": 1403480000000}, {"y": 136, "x": 1404480000000}, {"y": 150, "x": 1405480000000}, {"y": 116, "x": 1406480000000}, {"y": 134, "x": 1407480000000}, {"y": 130, "x": 1408480000000}, {"y": 144, "x": 1409480000000}, {"y": 146, "x": 1410480000000}, {"y": 156, "x": 1411480000000}, {"y": 142, "x": 1412480000000}, {"y": 158, "x": 1413480000000}, {"y": 150, "x": 1414480000000}, {"y": 162, "x": 1415480000000}, {"y": 152, "x": 1416480000000}, {"y": 154, "x": 1417480000000}, {"y": 166, "x": 1418480000000}, {"y": 148, "x": 1419480000000}, {"y": 160, "x": 1420480000000}, {"y": 164, "x": 1421480000000}, {"y": 160, "x": 1422480000000}, {"y": 150, "x": 1423480000000}, {"y": 176, "x": 1424480000000}, {"y": 194, "x": 1425480000000}, {"y": 160, "x": 1426480000000}, {"y": 192, "x": 1427480000000}, {"y": 164, "x": 1428480000000}, {"y": 162, "x": 1429480000000}, {"y": 166, "x": 1430480000000}, {"y": 182, "x": 1431480000000}, {"y": 200, "x": 1432480000000}, {"y": 192, "x": 1433480000000}, {"y": 182, "x": 1434480000000}, {"y": 182, "x": 1435480000000}, {"y": 182, "x": 1436480000000}, {"y": 188, "x": 1437480000000}], "key": "serie 2", "yAxis": "1"}, {"values": [{"y": -18, "x": 1338480000000}, {"y": 3, "x": 1339480000000}, {"y": 24, "x": 1340480000000}, {"y": 39, "x": 1341480000000}, {"y": 24, "x": 1342480000000}, {"y": 6, "x": 1343480000000}, {"y": -9, "x": 1344480000000}, {"y": -3, "x": 1345480000000}, {"y": 54, "x": 1346480000000}, {"y": 33, "x": 1347480000000}, {"y": 48, "x": 1348480000000}, {"y": 57, "x": 1349480000000}, {"y": 39, "x": 1350480000000}, {"y": 30, "x": 1351480000000}, {"y": 12, "x": 1352480000000}, {"y": 54, "x": 1353480000000}, {"y": 36, "x": 1354480000000}, {"y": 69, "x": 1355480000000}, {"y": 33, "x": 1356480000000}, {"y": 45, "x": 1357480000000}, {"y": 75, "x": 1358480000000}, {"y": 45, "x": 1359480000000}, {"y": 51, "x": 1360480000000}, {"y": 78, "x": 1361480000000}, {"y": 57, "x": 1362480000000}, {"y": 81, "x": 1363480000000}, {"y": 96, "x": 1364480000000}, {"y": 87, "x": 1365480000000}, {"y": 72, "x": 1366480000000}, {"y": 114, "x": 1367480000000}, {"y": 84, "x": 1368480000000}, {"y": 96, "x": 1369480000000}, {"y": 105, "x": 1370480000000}, {"y": 72, "x": 1371480000000}, {"y": 120, "x": 1372480000000}, {"y": 99, "x": 1373480000000}, {"y": 135, "x": 1374480000000}, {"y": 111, "x": 1375480000000}, {"y": 93, "x": 1376480000000}, {"y": 141, "x": 1377480000000}, {"y": 144, "x": 1378480000000}, {"y": 120, "x": 1379480000000}, {"y": 102, "x": 1380480000000}, {"y": 159, "x": 1381480000000}, {"y": 105, "x": 1382480000000}, {"y": 117, "x": 1383480000000}, {"y": 123, "x": 1384480000000}, {"y": 141, "x": 1385480000000}, {"y": 132, "x": 1386480000000}, {"y": 117, "x": 1387480000000}, {"y": 171, "x": 1388480000000}, {"y": 177, "x": 1389480000000}, {"y": 156, "x": 1390480000000}, {"y": 153, "x": 1391480000000}, {"y": 192, "x": 1392480000000}, {"y": 177, "x": 1393480000000}, {"y": 177, "x": 1394480000000}, {"y": 156, "x": 1395480000000}, {"y": 162, "x": 1396480000000}, {"y": 204, "x": 1397480000000}, {"y": 150, "x": 1398480000000}, {"y": 177, "x": 1399480000000}, {"y": 171, "x": 1400480000000}, {"y": 171, "x": 1401480000000}, {"y": 165, "x": 1402480000000}, {"y": 198, "x": 1403480000000}, {"y": 204, "x": 1404480000000}, {"y": 225, "x": 1405480000000}, {"y": 174, "x": 1406480000000}, {"y": 201, "x": 1407480000000}, {"y": 195, "x": 1408480000000}, {"y": 216, "x": 1409480000000}, {"y": 219, "x": 1410480000000}, {"y": 234, "x": 1411480000000}, {"y": 213, "x": 1412480000000}, {"y": 237, "x": 1413480000000}, {"y": 225, "x": 1414480000000}, {"y": 243, "x": 1415480000000}, {"y": 228, "x": 1416480000000}, {"y": 231, "x": 1417480000000}, {"y": 249, "x": 1418480000000}, {"y": 222, "x": 1419480000000}, {"y": 240, "x": 1420480000000}, {"y": 246, "x": 1421480000000}, {"y": 240, "x": 1422480000000}, {"y": 225, "x": 1423480000000}, {"y": 264, "x": 1424480000000}, {"y": 291, "x": 1425480000000}, {"y": 240, "x": 1426480000000}, {"y": 288, "x": 1427480000000}, {"y": 246, "x": 1428480000000}, {"y": 243, "x": 1429480000000}, {"y": 249, "x": 1430480000000}, {"y": 273, "x": 1431480000000}, {"y": 300, "x": 1432480000000}, {"y": 288, "x": 1433480000000}, {"y": 273, "x": 1434480000000}, {"y": 273, "x": 1435480000000}, {"y": 273, "x": 1436480000000}, {"y": 282, "x": 1437480000000}], "key": "serie 3", "yAxis": "1"}, {"values": [{"y": -24, "x": 1338480000000}, {"y": 4, "x": 1339480000000}, {"y": 32, "x": 1340480000000}, {"y": 52, "x": 1341480000000}, {"y": 32, "x": 1342480000000}, {"y": 8, "x": 1343480000000}, {"y": -12, "x": 1344480000000}, {"y": -4, "x": 1345480000000}, {"y": 72, "x": 1346480000000}, {"y": 44, "x": 1347480000000}, {"y": 64, "x": 1348480000000}, {"y": 76, "x": 1349480000000}, {"y": 52, "x": 1350480000000}, {"y": 40, "x": 1351480000000}, {"y": 16, "x": 1352480000000}, {"y": 72, "x": 1353480000000}, {"y": 48, "x": 1354480000000}, {"y": 92, "x": 1355480000000}, {"y": 44, "x": 1356480000000}, {"y": 60, "x": 1357480000000}, {"y": 100, "x": 1358480000000}, {"y": 60, "x": 1359480000000}, {"y": 68, "x": 1360480000000}, {"y": 104, "x": 1361480000000}, {"y": 76, "x": 1362480000000}, {"y": 108, "x": 1363480000000}, {"y": 128, "x": 1364480000000}, {"y": 116, "x": 1365480000000}, {"y": 96, "x": 1366480000000}, {"y": 152, "x": 1367480000000}, {"y": 112, "x": 1368480000000}, {"y": 128, "x": 1369480000000}, {"y": 140, "x": 1370480000000}, {"y": 96, "x": 1371480000000}, {"y": 160, "x": 1372480000000}, {"y": 132, "x": 1373480000000}, {"y": 180, "x": 1374480000000}, {"y": 148, "x": 1375480000000}, {"y": 124, "x": 1376480000000}, {"y": 188, "x": 1377480000000}, {"y": 192, "x": 1378480000000}, {"y": 160, "x": 1379480000000}, {"y": 136, "x": 1380480000000}, {"y": 212, "x": 1381480000000}, {"y": 140, "x": 1382480000000}, {"y": 156, "x": 1383480000000}, {"y": 164, "x": 1384480000000}, {"y": 188, "x": 1385480000000}, {"y": 176, "x": 1386480000000}, {"y": 156, "x": 1387480000000}, {"y": 228, "x": 1388480000000}, {"y": 236, "x": 1389480000000}, {"y": 208, "x": 1390480000000}, {"y": 204, "x": 1391480000000}, {"y": 256, "x": 1392480000000}, {"y": 236, "x": 1393480000000}, {"y": 236, "x": 1394480000000}, {"y": 208, "x": 1395480000000}, {"y": 216, "x": 1396480000000}, {"y": 272, "x": 1397480000000}, {"y": 200, "x": 1398480000000}, {"y": 236, "x": 1399480000000}, {"y": 228, "x": 1400480000000}, {"y": 228, "x": 1401480000000}, {"y": 220, "x": 1402480000000}, {"y": 264, "x": 1403480000000}, {"y": 272, "x": 1404480000000}, {"y": 300, "x": 1405480000000}, {"y": 232, "x": 1406480000000}, {"y": 268, "x": 1407480000000}, {"y": 260, "x": 1408480000000}, {"y": 288, "x": 1409480000000}, {"y": 292, "x": 1410480000000}, {"y": 312, "x": 1411480000000}, {"y": 284, "x": 1412480000000}, {"y": 316, "x": 1413480000000}, {"y": 300, "x": 1414480000000}, {"y": 324, "x": 1415480000000}, {"y": 304, "x": 1416480000000}, {"y": 308, "x": 1417480000000}, {"y": 332, "x": 1418480000000}, {"y": 296, "x": 1419480000000}, {"y": 320, "x": 1420480000000}, {"y": 328, "x": 1421480000000}, {"y": 320, "x": 1422480000000}, {"y": 300, "x": 1423480000000}, {"y": 352, "x": 1424480000000}, {"y": 388, "x": 1425480000000}, {"y": 320, "x": 1426480000000}, {"y": 384, "x": 1427480000000}, {"y": 328, "x": 1428480000000}, {"y": 324, "x": 1429480000000}, {"y": 332, "x": 1430480000000}, {"y": 364, "x": 1431480000000}, {"y": 400, "x": 1432480000000}, {"y": 384, "x": 1433480000000}, {"y": 364, "x": 1434480000000}, {"y": 364, "x": 1435480000000}, {"y": 364, "x": 1436480000000}, {"y": 376, "x": 1437480000000}], "key": "serie 4", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_linewithfocuschart;
chart.color(d3.scale.category20b().range());
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.y2Axis
.tickFormat(d3.format(',.2f'));
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.x2Axis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d %b %Y %I:%M:%S")(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key == 'serie 1'){
var y = 'There is ' + String(graph.point.y) + ' calls';
}
if(key == 'serie 2'){
var y = 'There is ' + String(graph.point.y) + ' calls';
}
if(key == 'serie 3'){
var y = 'There is ' + String(graph.point.y) + ' calls';
}
if(key == 'serie 4'){
var y = 'There is ' + String(graph.point.y) + ' calls';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#linewithfocuschart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>stackedAreaChart</h2>
<div id="stackedareachart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_stackedareachart=[{"values": [{"y": 1, "x": 1338480000000}, {"y": 5, "x": 1339480000000}, {"y": 3, "x": 1340480000000}, {"y": 12, "x": 1341480000000}, {"y": 9, "x": 1342480000000}, {"y": 13, "x": 1343480000000}, {"y": 10, "x": 1344480000000}, {"y": 17, "x": 1345480000000}, {"y": 17, "x": 1346480000000}, {"y": 14, "x": 1347480000000}, {"y": 18, "x": 1348480000000}, {"y": 16, "x": 1349480000000}, {"y": 21, "x": 1350480000000}, {"y": 18, "x": 1351480000000}, {"y": 16, "x": 1352480000000}, {"y": 18, "x": 1353480000000}, {"y": 22, "x": 1354480000000}, {"y": 27, "x": 1355480000000}, {"y": 23, "x": 1356480000000}, {"y": 24, "x": 1357480000000}, {"y": 26, "x": 1358480000000}, {"y": 31, "x": 1359480000000}, {"y": 29, "x": 1360480000000}, {"y": 25, "x": 1361480000000}, {"y": 31, "x": 1362480000000}, {"y": 34, "x": 1363480000000}, {"y": 33, "x": 1364480000000}, {"y": 32, "x": 1365480000000}, {"y": 34, "x": 1366480000000}, {"y": 37, "x": 1367480000000}, {"y": 33, "x": 1368480000000}, {"y": 36, "x": 1369480000000}, {"y": 37, "x": 1370480000000}, {"y": 34, "x": 1371480000000}, {"y": 37, "x": 1372480000000}, {"y": 44, "x": 1373480000000}, {"y": 43, "x": 1374480000000}, {"y": 42, "x": 1375480000000}, {"y": 46, "x": 1376480000000}, {"y": 42, "x": 1377480000000}, {"y": 48, "x": 1378480000000}, {"y": 50, "x": 1379480000000}, {"y": 49, "x": 1380480000000}, {"y": 46, "x": 1381480000000}, {"y": 45, "x": 1382480000000}, {"y": 55, "x": 1383480000000}, {"y": 53, "x": 1384480000000}, {"y": 49, "x": 1385480000000}, {"y": 53, "x": 1386480000000}, {"y": 51, "x": 1387480000000}, {"y": 51, "x": 1388480000000}, {"y": 59, "x": 1389480000000}, {"y": 56, "x": 1390480000000}, {"y": 56, "x": 1391480000000}, {"y": 60, "x": 1392480000000}, {"y": 59, "x": 1393480000000}, {"y": 60, "x": 1394480000000}, {"y": 63, "x": 1395480000000}, {"y": 59, "x": 1396480000000}, {"y": 66, "x": 1397480000000}, {"y": 62, "x": 1398480000000}, {"y": 71, "x": 1399480000000}, {"y": 68, "x": 1400480000000}, {"y": 67, "x": 1401480000000}, {"y": 68, "x": 1402480000000}, {"y": 70, "x": 1403480000000}, {"y": 68, "x": 1404480000000}, {"y": 74, "x": 1405480000000}, {"y": 71, "x": 1406480000000}, {"y": 77, "x": 1407480000000}, {"y": 80, "x": 1408480000000}, {"y": 79, "x": 1409480000000}, {"y": 73, "x": 1410480000000}, {"y": 80, "x": 1411480000000}, {"y": 84, "x": 1412480000000}, {"y": 82, "x": 1413480000000}, {"y": 81, "x": 1414480000000}, {"y": 85, "x": 1415480000000}, {"y": 82, "x": 1416480000000}, {"y": 88, "x": 1417480000000}, {"y": 86, "x": 1418480000000}, {"y": 83, "x": 1419480000000}, {"y": 84, "x": 1420480000000}, {"y": 86, "x": 1421480000000}, {"y": 86, "x": 1422480000000}, {"y": 89, "x": 1423480000000}, {"y": 95, "x": 1424480000000}, {"y": 97, "x": 1425480000000}, {"y": 90, "x": 1426480000000}, {"y": 93, "x": 1427480000000}, {"y": 98, "x": 1428480000000}, {"y": 99, "x": 1429480000000}, {"y": 97, "x": 1430480000000}, {"y": 99, "x": 1431480000000}, {"y": 97, "x": 1432480000000}, {"y": 98, "x": 1433480000000}, {"y": 100, "x": 1434480000000}, {"y": 107, "x": 1435480000000}, {"y": 103, "x": 1436480000000}, {"y": 101, "x": 1437480000000}], "key": "serie 1", "yAxis": "1"}, {"values": [{"y": 2, "x": 1338480000000}, {"y": 10, "x": 1339480000000}, {"y": 6, "x": 1340480000000}, {"y": 24, "x": 1341480000000}, {"y": 18, "x": 1342480000000}, {"y": 26, "x": 1343480000000}, {"y": 20, "x": 1344480000000}, {"y": 34, "x": 1345480000000}, {"y": 34, "x": 1346480000000}, {"y": 28, "x": 1347480000000}, {"y": 36, "x": 1348480000000}, {"y": 32, "x": 1349480000000}, {"y": 42, "x": 1350480000000}, {"y": 36, "x": 1351480000000}, {"y": 32, "x": 1352480000000}, {"y": 36, "x": 1353480000000}, {"y": 44, "x": 1354480000000}, {"y": 54, "x": 1355480000000}, {"y": 46, "x": 1356480000000}, {"y": 48, "x": 1357480000000}, {"y": 52, "x": 1358480000000}, {"y": 62, "x": 1359480000000}, {"y": 58, "x": 1360480000000}, {"y": 50, "x": 1361480000000}, {"y": 62, "x": 1362480000000}, {"y": 68, "x": 1363480000000}, {"y": 66, "x": 1364480000000}, {"y": 64, "x": 1365480000000}, {"y": 68, "x": 1366480000000}, {"y": 74, "x": 1367480000000}, {"y": 66, "x": 1368480000000}, {"y": 72, "x": 1369480000000}, {"y": 74, "x": 1370480000000}, {"y": 68, "x": 1371480000000}, {"y": 74, "x": 1372480000000}, {"y": 88, "x": 1373480000000}, {"y": 86, "x": 1374480000000}, {"y": 84, "x": 1375480000000}, {"y": 92, "x": 1376480000000}, {"y": 84, "x": 1377480000000}, {"y": 96, "x": 1378480000000}, {"y": 100, "x": 1379480000000}, {"y": 98, "x": 1380480000000}, {"y": 92, "x": 1381480000000}, {"y": 90, "x": 1382480000000}, {"y": 110, "x": 1383480000000}, {"y": 106, "x": 1384480000000}, {"y": 98, "x": 1385480000000}, {"y": 106, "x": 1386480000000}, {"y": 102, "x": 1387480000000}, {"y": 102, "x": 1388480000000}, {"y": 118, "x": 1389480000000}, {"y": 112, "x": 1390480000000}, {"y": 112, "x": 1391480000000}, {"y": 120, "x": 1392480000000}, {"y": 118, "x": 1393480000000}, {"y": 120, "x": 1394480000000}, {"y": 126, "x": 1395480000000}, {"y": 118, "x": 1396480000000}, {"y": 132, "x": 1397480000000}, {"y": 124, "x": 1398480000000}, {"y": 142, "x": 1399480000000}, {"y": 136, "x": 1400480000000}, {"y": 134, "x": 1401480000000}, {"y": 136, "x": 1402480000000}, {"y": 140, "x": 1403480000000}, {"y": 136, "x": 1404480000000}, {"y": 148, "x": 1405480000000}, {"y": 142, "x": 1406480000000}, {"y": 154, "x": 1407480000000}, {"y": 160, "x": 1408480000000}, {"y": 158, "x": 1409480000000}, {"y": 146, "x": 1410480000000}, {"y": 160, "x": 1411480000000}, {"y": 168, "x": 1412480000000}, {"y": 164, "x": 1413480000000}, {"y": 162, "x": 1414480000000}, {"y": 170, "x": 1415480000000}, {"y": 164, "x": 1416480000000}, {"y": 176, "x": 1417480000000}, {"y": 172, "x": 1418480000000}, {"y": 166, "x": 1419480000000}, {"y": 168, "x": 1420480000000}, {"y": 172, "x": 1421480000000}, {"y": 172, "x": 1422480000000}, {"y": 178, "x": 1423480000000}, {"y": 190, "x": 1424480000000}, {"y": 194, "x": 1425480000000}, {"y": 180, "x": 1426480000000}, {"y": 186, "x": 1427480000000}, {"y": 196, "x": 1428480000000}, {"y": 198, "x": 1429480000000}, {"y": 194, "x": 1430480000000}, {"y": 198, "x": 1431480000000}, {"y": 194, "x": 1432480000000}, {"y": 196, "x": 1433480000000}, {"y": 200, "x": 1434480000000}, {"y": 214, "x": 1435480000000}, {"y": 206, "x": 1436480000000}, {"y": 202, "x": 1437480000000}], "key": "serie 2", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.stackedAreaChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_stackedareachart;
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y %I')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d %b %Y %I:%M:%S %p")(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key == 'serie 1'){
var y = 'There is ' + String(graph.point.y) + ' calls';
}
if(key == 'serie 2'){
var y = 'There is ' + String(graph.point.y) + ' calls';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#stackedareachart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>linePlusBarChart</h2>
<div id="lineplusbarchart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_lineplusbarchart=[{"bar": "true", "values": [{"y": 7, "x": 1338480000000}, {"y": 7, "x": 1339480000000}, {"y": 5, "x": 1340480000000}, {"y": 5, "x": 1341480000000}, {"y": 10, "x": 1342480000000}, {"y": 7, "x": 1343480000000}, {"y": 11, "x": 1344480000000}, {"y": 16, "x": 1345480000000}, {"y": 13, "x": 1346480000000}, {"y": 12, "x": 1347480000000}, {"y": 19, "x": 1348480000000}, {"y": 19, "x": 1349480000000}, {"y": 16, "x": 1350480000000}, {"y": 17, "x": 1351480000000}, {"y": 23, "x": 1352480000000}, {"y": 24, "x": 1353480000000}, {"y": 26, "x": 1354480000000}, {"y": 19, "x": 1355480000000}, {"y": 21, "x": 1356480000000}, {"y": 29, "x": 1357480000000}, {"y": 21, "x": 1358480000000}, {"y": 28, "x": 1359480000000}, {"y": 32, "x": 1360480000000}, {"y": 26, "x": 1361480000000}, {"y": 30, "x": 1362480000000}, {"y": 28, "x": 1363480000000}, {"y": 29, "x": 1364480000000}, {"y": 33, "x": 1365480000000}, {"y": 31, "x": 1366480000000}, {"y": 30, "x": 1367480000000}, {"y": 40, "x": 1368480000000}, {"y": 36, "x": 1369480000000}, {"y": 33, "x": 1370480000000}, {"y": 34, "x": 1371480000000}, {"y": 37, "x": 1372480000000}, {"y": 41, "x": 1373480000000}, {"y": 38, "x": 1374480000000}, {"y": 47, "x": 1375480000000}, {"y": 42, "x": 1376480000000}, {"y": 45, "x": 1377480000000}, {"y": 47, "x": 1378480000000}, {"y": 47, "x": 1379480000000}, {"y": 49, "x": 1380480000000}, {"y": 52, "x": 1381480000000}, {"y": 54, "x": 1382480000000}, {"y": 48, "x": 1383480000000}, {"y": 53, "x": 1384480000000}, {"y": 51, "x": 1385480000000}, {"y": 55, "x": 1386480000000}, {"y": 58, "x": 1387480000000}, {"y": 56, "x": 1388480000000}, {"y": 53, "x": 1389480000000}, {"y": 61, "x": 1390480000000}, {"y": 56, "x": 1391480000000}, {"y": 56, "x": 1392480000000}, {"y": 64, "x": 1393480000000}, {"y": 60, "x": 1394480000000}, {"y": 63, "x": 1395480000000}, {"y": 65, "x": 1396480000000}, {"y": 69, "x": 1397480000000}, {"y": 65, "x": 1398480000000}, {"y": 62, "x": 1399480000000}, {"y": 65, "x": 1400480000000}, {"y": 67, "x": 1401480000000}, {"y": 69, "x": 1402480000000}, {"y": 71, "x": 1403480000000}, {"y": 68, "x": 1404480000000}, {"y": 69, "x": 1405480000000}, {"y": 74, "x": 1406480000000}, {"y": 73, "x": 1407480000000}, {"y": 71, "x": 1408480000000}, {"y": 79, "x": 1409480000000}, {"y": 80, "x": 1410480000000}, {"y": 81, "x": 1411480000000}, {"y": 83, "x": 1412480000000}, {"y": 76, "x": 1413480000000}, {"y": 78, "x": 1414480000000}, {"y": 78, "x": 1415480000000}, {"y": 82, "x": 1416480000000}, {"y": 80, "x": 1417480000000}, {"y": 85, "x": 1418480000000}, {"y": 89, "x": 1419480000000}, {"y": 88, "x": 1420480000000}, {"y": 90, "x": 1421480000000}, {"y": 85, "x": 1422480000000}, {"y": 95, "x": 1423480000000}, {"y": 89, "x": 1424480000000}, {"y": 91, "x": 1425480000000}, {"y": 97, "x": 1426480000000}, {"y": 94, "x": 1427480000000}, {"y": 98, "x": 1428480000000}, {"y": 95, "x": 1429480000000}, {"y": 96, "x": 1430480000000}, {"y": 103, "x": 1431480000000}, {"y": 99, "x": 1432480000000}, {"y": 100, "x": 1433480000000}, {"y": 99, "x": 1434480000000}, {"y": 100, "x": 1435480000000}, {"y": 103, "x": 1436480000000}, {"y": 108, "x": 1437480000000}], "key": "Count", "yAxis": "1"}, {"values": [{"y": 109, "x": 1338480000000}, {"y": 104, "x": 1339480000000}, {"y": 107, "x": 1340480000000}, {"y": 104, "x": 1341480000000}, {"y": 100, "x": 1342480000000}, {"y": 97, "x": 1343480000000}, {"y": 96, "x": 1344480000000}, {"y": 94, "x": 1345480000000}, {"y": 97, "x": 1346480000000}, {"y": 100, "x": 1347480000000}, {"y": 91, "x": 1348480000000}, {"y": 93, "x": 1349480000000}, {"y": 93, "x": 1350480000000}, {"y": 94, "x": 1351480000000}, {"y": 89, "x": 1352480000000}, {"y": 87, "x": 1353480000000}, {"y": 85, "x": 1354480000000}, {"y": 86, "x": 1355480000000}, {"y": 82, "x": 1356480000000}, {"y": 87, "x": 1357480000000}, {"y": 80, "x": 1358480000000}, {"y": 82, "x": 1359480000000}, {"y": 83, "x": 1360480000000}, {"y": 85, "x": 1361480000000}, {"y": 85, "x": 1362480000000}, {"y": 77, "x": 1363480000000}, {"y": 80, "x": 1364480000000}, {"y": 81, "x": 1365480000000}, {"y": 75, "x": 1366480000000}, {"y": 79, "x": 1367480000000}, {"y": 74, "x": 1368480000000}, {"y": 75, "x": 1369480000000}, {"y": 74, "x": 1370480000000}, {"y": 70, "x": 1371480000000}, {"y": 69, "x": 1372480000000}, {"y": 67, "x": 1373480000000}, {"y": 68, "x": 1374480000000}, {"y": 70, "x": 1375480000000}, {"y": 70, "x": 1376480000000}, {"y": 64, "x": 1377480000000}, {"y": 68, "x": 1378480000000}, {"y": 65, "x": 1379480000000}, {"y": 61, "x": 1380480000000}, {"y": 58, "x": 1381480000000}, {"y": 56, "x": 1382480000000}, {"y": 59, "x": 1383480000000}, {"y": 57, "x": 1384480000000}, {"y": 62, "x": 1385480000000}, {"y": 52, "x": 1386480000000}, {"y": 52, "x": 1387480000000}, {"y": 53, "x": 1388480000000}, {"y": 49, "x": 1389480000000}, {"y": 49, "x": 1390480000000}, {"y": 53, "x": 1391480000000}, {"y": 55, "x": 1392480000000}, {"y": 51, "x": 1393480000000}, {"y": 49, "x": 1394480000000}, {"y": 51, "x": 1395480000000}, {"y": 45, "x": 1396480000000}, {"y": 48, "x": 1397480000000}, {"y": 44, "x": 1398480000000}, {"y": 43, "x": 1399480000000}, {"y": 42, "x": 1400480000000}, {"y": 43, "x": 1401480000000}, {"y": 38, "x": 1402480000000}, {"y": 44, "x": 1403480000000}, {"y": 38, "x": 1404480000000}, {"y": 38, "x": 1405480000000}, {"y": 41, "x": 1406480000000}, {"y": 36, "x": 1407480000000}, {"y": 34, "x": 1408480000000}, {"y": 35, "x": 1409480000000}, {"y": 33, "x": 1410480000000}, {"y": 32, "x": 1411480000000}, {"y": 27, "x": 1412480000000}, {"y": 31, "x": 1413480000000}, {"y": 31, "x": 1414480000000}, {"y": 31, "x": 1415480000000}, {"y": 24, "x": 1416480000000}, {"y": 26, "x": 1417480000000}, {"y": 20, "x": 1418480000000}, {"y": 26, "x": 1419480000000}, {"y": 25, "x": 1420480000000}, {"y": 18, "x": 1421480000000}, {"y": 24, "x": 1422480000000}, {"y": 21, "x": 1423480000000}, {"y": 20, "x": 1424480000000}, {"y": 15, "x": 1425480000000}, {"y": 13, "x": 1426480000000}, {"y": 19, "x": 1427480000000}, {"y": 19, "x": 1428480000000}, {"y": 18, "x": 1429480000000}, {"y": 17, "x": 1430480000000}, {"y": 15, "x": 1431480000000}, {"y": 9, "x": 1432480000000}, {"y": 5, "x": 1433480000000}, {"y": 7, "x": 1434480000000}, {"y": 12, "x": 1435480000000}, {"y": 11, "x": 1436480000000}, {"y": 8, "x": 1437480000000}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_lineplusbarchart;
chart.focusEnable(true);
chart.y1Axis
.tickFormat(function(d) { return d3.format(',f')(d) });
chart.y2Axis
.tickFormat(function(d) { return d3.format(',f')(d) });
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.x2Axis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d %b %Y")(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key.indexOf('Count') > -1 ){
var y = '$ ' + String(graph.point.y) ;
}
if(key.indexOf('Duration') > -1 ){
var y = String(graph.point.y) + ' min';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#lineplusbarchart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>cumulativeLineChart</h2>
<div id="cumulativelinechart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_cumulativelinechart=[{"values": [{"y": 6, "x": 1338480000000}, {"y": 3, "x": 1339480000000}, {"y": 5, "x": 1340480000000}, {"y": 4, "x": 1341480000000}, {"y": 13, "x": 1342480000000}, {"y": 13, "x": 1343480000000}, {"y": 14, "x": 1344480000000}, {"y": 15, "x": 1345480000000}, {"y": 16, "x": 1346480000000}, {"y": 19, "x": 1347480000000}, {"y": 16, "x": 1348480000000}, {"y": 16, "x": 1349480000000}, {"y": 22, "x": 1350480000000}, {"y": 18, "x": 1351480000000}, {"y": 21, "x": 1352480000000}, {"y": 20, "x": 1353480000000}, {"y": 24, "x": 1354480000000}, {"y": 27, "x": 1355480000000}, {"y": 20, "x": 1356480000000}, {"y": 23, "x": 1357480000000}, {"y": 21, "x": 1358480000000}, {"y": 27, "x": 1359480000000}, {"y": 31, "x": 1360480000000}, {"y": 30, "x": 1361480000000}, {"y": 33, "x": 1362480000000}, {"y": 27, "x": 1363480000000}, {"y": 27, "x": 1364480000000}, {"y": 28, "x": 1365480000000}, {"y": 30, "x": 1366480000000}, {"y": 31, "x": 1367480000000}, {"y": 31, "x": 1368480000000}, {"y": 37, "x": 1369480000000}, {"y": 33, "x": 1370480000000}, {"y": 42, "x": 1371480000000}, {"y": 41, "x": 1372480000000}, {"y": 42, "x": 1373480000000}, {"y": 38, "x": 1374480000000}, {"y": 41, "x": 1375480000000}, {"y": 40, "x": 1376480000000}, {"y": 49, "x": 1377480000000}, {"y": 46, "x": 1378480000000}, {"y": 46, "x": 1379480000000}, {"y": 52, "x": 1380480000000}, {"y": 53, "x": 1381480000000}, {"y": 52, "x": 1382480000000}, {"y": 47, "x": 1383480000000}, {"y": 53, "x": 1384480000000}, {"y": 55, "x": 1385480000000}, {"y": 57, "x": 1386480000000}, {"y": 55, "x": 1387480000000}, {"y": 59, "x": 1388480000000}, {"y": 54, "x": 1389480000000}, {"y": 62, "x": 1390480000000}, {"y": 57, "x": 1391480000000}, {"y": 63, "x": 1392480000000}, {"y": 65, "x": 1393480000000}, {"y": 58, "x": 1394480000000}, {"y": 61, "x": 1395480000000}, {"y": 59, "x": 1396480000000}, {"y": 68, "x": 1397480000000}, {"y": 70, "x": 1398480000000}, {"y": 68, "x": 1399480000000}, {"y": 64, "x": 1400480000000}, {"y": 71, "x": 1401480000000}, {"y": 65, "x": 1402480000000}, {"y": 71, "x": 1403480000000}, {"y": 70, "x": 1404480000000}, {"y": 71, "x": 1405480000000}, {"y": 71, "x": 1406480000000}, {"y": 77, "x": 1407480000000}, {"y": 71, "x": 1408480000000}, {"y": 74, "x": 1409480000000}, {"y": 74, "x": 1410480000000}, {"y": 80, "x": 1411480000000}, {"y": 76, "x": 1412480000000}, {"y": 78, "x": 1413480000000}, {"y": 77, "x": 1414480000000}, {"y": 80, "x": 1415480000000}, {"y": 81, "x": 1416480000000}, {"y": 86, "x": 1417480000000}, {"y": 83, "x": 1418480000000}, {"y": 86, "x": 1419480000000}, {"y": 90, "x": 1420480000000}, {"y": 88, "x": 1421480000000}, {"y": 89, "x": 1422480000000}, {"y": 92, "x": 1423480000000}, {"y": 94, "x": 1424480000000}, {"y": 88, "x": 1425480000000}, {"y": 89, "x": 1426480000000}, {"y": 97, "x": 1427480000000}, {"y": 96, "x": 1428480000000}, {"y": 97, "x": 1429480000000}, {"y": 101, "x": 1430480000000}, {"y": 103, "x": 1431480000000}, {"y": 101, "x": 1432480000000}, {"y": 98, "x": 1433480000000}, {"y": 98, "x": 1434480000000}, {"y": 100, "x": 1435480000000}, {"y": 99, "x": 1436480000000}, {"y": 106, "x": 1437480000000}], "key": "Count", "yAxis": "1"}, {"values": [{"y": 12, "x": 1338480000000}, {"y": 6, "x": 1339480000000}, {"y": 10, "x": 1340480000000}, {"y": 8, "x": 1341480000000}, {"y": 26, "x": 1342480000000}, {"y": 26, "x": 1343480000000}, {"y": 28, "x": 1344480000000}, {"y": 30, "x": 1345480000000}, {"y": 32, "x": 1346480000000}, {"y": 38, "x": 1347480000000}, {"y": 32, "x": 1348480000000}, {"y": 32, "x": 1349480000000}, {"y": 44, "x": 1350480000000}, {"y": 36, "x": 1351480000000}, {"y": 42, "x": 1352480000000}, {"y": 40, "x": 1353480000000}, {"y": 48, "x": 1354480000000}, {"y": 54, "x": 1355480000000}, {"y": 40, "x": 1356480000000}, {"y": 46, "x": 1357480000000}, {"y": 42, "x": 1358480000000}, {"y": 54, "x": 1359480000000}, {"y": 62, "x": 1360480000000}, {"y": 60, "x": 1361480000000}, {"y": 66, "x": 1362480000000}, {"y": 54, "x": 1363480000000}, {"y": 54, "x": 1364480000000}, {"y": 56, "x": 1365480000000}, {"y": 60, "x": 1366480000000}, {"y": 62, "x": 1367480000000}, {"y": 62, "x": 1368480000000}, {"y": 74, "x": 1369480000000}, {"y": 66, "x": 1370480000000}, {"y": 84, "x": 1371480000000}, {"y": 82, "x": 1372480000000}, {"y": 84, "x": 1373480000000}, {"y": 76, "x": 1374480000000}, {"y": 82, "x": 1375480000000}, {"y": 80, "x": 1376480000000}, {"y": 98, "x": 1377480000000}, {"y": 92, "x": 1378480000000}, {"y": 92, "x": 1379480000000}, {"y": 104, "x": 1380480000000}, {"y": 106, "x": 1381480000000}, {"y": 104, "x": 1382480000000}, {"y": 94, "x": 1383480000000}, {"y": 106, "x": 1384480000000}, {"y": 110, "x": 1385480000000}, {"y": 114, "x": 1386480000000}, {"y": 110, "x": 1387480000000}, {"y": 118, "x": 1388480000000}, {"y": 108, "x": 1389480000000}, {"y": 124, "x": 1390480000000}, {"y": 114, "x": 1391480000000}, {"y": 126, "x": 1392480000000}, {"y": 130, "x": 1393480000000}, {"y": 116, "x": 1394480000000}, {"y": 122, "x": 1395480000000}, {"y": 118, "x": 1396480000000}, {"y": 136, "x": 1397480000000}, {"y": 140, "x": 1398480000000}, {"y": 136, "x": 1399480000000}, {"y": 128, "x": 1400480000000}, {"y": 142, "x": 1401480000000}, {"y": 130, "x": 1402480000000}, {"y": 142, "x": 1403480000000}, {"y": 140, "x": 1404480000000}, {"y": 142, "x": 1405480000000}, {"y": 142, "x": 1406480000000}, {"y": 154, "x": 1407480000000}, {"y": 142, "x": 1408480000000}, {"y": 148, "x": 1409480000000}, {"y": 148, "x": 1410480000000}, {"y": 160, "x": 1411480000000}, {"y": 152, "x": 1412480000000}, {"y": 156, "x": 1413480000000}, {"y": 154, "x": 1414480000000}, {"y": 160, "x": 1415480000000}, {"y": 162, "x": 1416480000000}, {"y": 172, "x": 1417480000000}, {"y": 166, "x": 1418480000000}, {"y": 172, "x": 1419480000000}, {"y": 180, "x": 1420480000000}, {"y": 176, "x": 1421480000000}, {"y": 178, "x": 1422480000000}, {"y": 184, "x": 1423480000000}, {"y": 188, "x": 1424480000000}, {"y": 176, "x": 1425480000000}, {"y": 178, "x": 1426480000000}, {"y": 194, "x": 1427480000000}, {"y": 192, "x": 1428480000000}, {"y": 194, "x": 1429480000000}, {"y": 202, "x": 1430480000000}, {"y": 206, "x": 1431480000000}, {"y": 202, "x": 1432480000000}, {"y": 196, "x": 1433480000000}, {"y": 196, "x": 1434480000000}, {"y": 200, "x": 1435480000000}, {"y": 198, "x": 1436480000000}, {"y": 212, "x": 1437480000000}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.cumulativeLineChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_cumulativelinechart;
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.1%'));
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d %b %Y")(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key == 'Count'){
var y = String(e) + ' Calls';
}
if(key == 'Duration'){
var y = String(e) + ' Min';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#cumulativelinechart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>multiBarHorizontalChart</h2>
<div id="multibarhorizontalchart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_multibarhorizontalchart=[{"values": [{"y": 6, "x": 0}, {"y": -1, "x": 1}, {"y": 2, "x": 2}, {"y": -7, "x": 3}, {"y": -1, "x": 4}, {"y": 2, "x": 5}, {"y": -7, "x": 6}, {"y": -4, "x": 7}, {"y": -8, "x": 8}, {"y": 6, "x": 9}], "key": "Count", "yAxis": "1"}, {"values": [{"y": 12, "x": 0}, {"y": -2, "x": 1}, {"y": 4, "x": 2}, {"y": -14, "x": 3}, {"y": -2, "x": 4}, {"y": 4, "x": 5}, {"y": -14, "x": 6}, {"y": -8, "x": 7}, {"y": -16, "x": 8}, {"y": 12, "x": 9}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.multiBarHorizontalChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_multibarhorizontalchart;
chart.xAxis
.tickFormat(d3.format(',.2f'));
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = String(graph.point.x);
var y = String(graph.point.y);
if(key == 'Count'){
var y = String(graph.point.y) + ' Calls';
}
if(key == 'Duration'){
var y = String(graph.point.y) + ' Min';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#multibarhorizontalchart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>multiBarChart</h2>
<div id="multibarchart"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_multibarchart=[{"values": [{"y": 9, "x": 0}, {"y": 1, "x": 1}, {"y": 10, "x": 2}, {"y": 7, "x": 3}, {"y": 2, "x": 4}, {"y": 10, "x": 5}, {"y": 4, "x": 6}, {"y": 3, "x": 7}, {"y": 7, "x": 8}, {"y": 4, "x": 9}], "key": "Count", "yAxis": "1"}, {"values": [{"y": 18, "x": 0}, {"y": 2, "x": 1}, {"y": 20, "x": 2}, {"y": 14, "x": 3}, {"y": 4, "x": 4}, {"y": 20, "x": 5}, {"y": 8, "x": 6}, {"y": 6, "x": 7}, {"y": 14, "x": 8}, {"y": 8, "x": 9}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_multibarchart;
chart.xAxis
.tickFormat(d3.format(',.2f'));
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = String(graph.point.x);
var y = String(graph.point.y);
if(key == 'Count'){
var y = String(graph.point.y) + ' call';
}
if(key == 'Duration'){
var y = String(graph.point.y) + ' min';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' at ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#multibarchart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>multiBarChartDate</h2>
<div id="multibarchartdate"><svg style="width:800px;height:400px;"></svg></div>
<script>
$(function(){
data_multibarchartdate=[{"values": [{"y": 9, "x": 1338480000000}, {"y": 5, "x": 1339480000000}, {"y": 10, "x": 1340480000000}, {"y": 6, "x": 1341480000000}, {"y": 5, "x": 1342480000000}, {"y": 9, "x": 1343480000000}, {"y": 10, "x": 1344480000000}, {"y": 13, "x": 1345480000000}, {"y": 13, "x": 1346480000000}, {"y": 12, "x": 1347480000000}, {"y": 13, "x": 1348480000000}, {"y": 17, "x": 1349480000000}, {"y": 18, "x": 1350480000000}, {"y": 21, "x": 1351480000000}, {"y": 22, "x": 1352480000000}, {"y": 23, "x": 1353480000000}, {"y": 23, "x": 1354480000000}, {"y": 23, "x": 1355480000000}, {"y": 25, "x": 1356480000000}, {"y": 21, "x": 1357480000000}, {"y": 21, "x": 1358480000000}, {"y": 31, "x": 1359480000000}, {"y": 27, "x": 1360480000000}, {"y": 32, "x": 1361480000000}, {"y": 32, "x": 1362480000000}, {"y": 29, "x": 1363480000000}, {"y": 27, "x": 1364480000000}, {"y": 34, "x": 1365480000000}, {"y": 31, "x": 1366480000000}, {"y": 36, "x": 1367480000000}, {"y": 38, "x": 1368480000000}, {"y": 38, "x": 1369480000000}, {"y": 41, "x": 1370480000000}, {"y": 43, "x": 1371480000000}, {"y": 38, "x": 1372480000000}, {"y": 44, "x": 1373480000000}, {"y": 42, "x": 1374480000000}, {"y": 40, "x": 1375480000000}, {"y": 45, "x": 1376480000000}, {"y": 47, "x": 1377480000000}, {"y": 47, "x": 1378480000000}, {"y": 51, "x": 1379480000000}, {"y": 43, "x": 1380480000000}, {"y": 47, "x": 1381480000000}, {"y": 50, "x": 1382480000000}, {"y": 52, "x": 1383480000000}, {"y": 54, "x": 1384480000000}, {"y": 52, "x": 1385480000000}, {"y": 53, "x": 1386480000000}, {"y": 59, "x": 1387480000000}, {"y": 51, "x": 1388480000000}, {"y": 58, "x": 1389480000000}, {"y": 59, "x": 1390480000000}, {"y": 56, "x": 1391480000000}, {"y": 58, "x": 1392480000000}, {"y": 58, "x": 1393480000000}, {"y": 57, "x": 1394480000000}, {"y": 60, "x": 1395480000000}, {"y": 68, "x": 1396480000000}, {"y": 69, "x": 1397480000000}, {"y": 65, "x": 1398480000000}, {"y": 65, "x": 1399480000000}, {"y": 65, "x": 1400480000000}, {"y": 72, "x": 1401480000000}, {"y": 69, "x": 1402480000000}, {"y": 75, "x": 1403480000000}, {"y": 68, "x": 1404480000000}, {"y": 70, "x": 1405480000000}, {"y": 78, "x": 1406480000000}, {"y": 75, "x": 1407480000000}, {"y": 77, "x": 1408480000000}, {"y": 79, "x": 1409480000000}, {"y": 82, "x": 1410480000000}, {"y": 83, "x": 1411480000000}, {"y": 80, "x": 1412480000000}, {"y": 76, "x": 1413480000000}, {"y": 80, "x": 1414480000000}, {"y": 84, "x": 1415480000000}, {"y": 80, "x": 1416480000000}, {"y": 88, "x": 1417480000000}, {"y": 83, "x": 1418480000000}, {"y": 91, "x": 1419480000000}, {"y": 85, "x": 1420480000000}, {"y": 91, "x": 1421480000000}, {"y": 88, "x": 1422480000000}, {"y": 92, "x": 1423480000000}, {"y": 90, "x": 1424480000000}, {"y": 91, "x": 1425480000000}, {"y": 96, "x": 1426480000000}, {"y": 99, "x": 1427480000000}, {"y": 100, "x": 1428480000000}, {"y": 101, "x": 1429480000000}, {"y": 94, "x": 1430480000000}, {"y": 95, "x": 1431480000000}, {"y": 96, "x": 1432480000000}, {"y": 99, "x": 1433480000000}, {"y": 99, "x": 1434480000000}, {"y": 106, "x": 1435480000000}, {"y": 108, "x": 1436480000000}, {"y": 109, "x": 1437480000000}], "key": "Count", "yAxis": "1"}, {"values": [{"y": 18, "x": 1338480000000}, {"y": 10, "x": 1339480000000}, {"y": 20, "x": 1340480000000}, {"y": 12, "x": 1341480000000}, {"y": 10, "x": 1342480000000}, {"y": 18, "x": 1343480000000}, {"y": 20, "x": 1344480000000}, {"y": 26, "x": 1345480000000}, {"y": 26, "x": 1346480000000}, {"y": 24, "x": 1347480000000}, {"y": 26, "x": 1348480000000}, {"y": 34, "x": 1349480000000}, {"y": 36, "x": 1350480000000}, {"y": 42, "x": 1351480000000}, {"y": 44, "x": 1352480000000}, {"y": 46, "x": 1353480000000}, {"y": 46, "x": 1354480000000}, {"y": 46, "x": 1355480000000}, {"y": 50, "x": 1356480000000}, {"y": 42, "x": 1357480000000}, {"y": 42, "x": 1358480000000}, {"y": 62, "x": 1359480000000}, {"y": 54, "x": 1360480000000}, {"y": 64, "x": 1361480000000}, {"y": 64, "x": 1362480000000}, {"y": 58, "x": 1363480000000}, {"y": 54, "x": 1364480000000}, {"y": 68, "x": 1365480000000}, {"y": 62, "x": 1366480000000}, {"y": 72, "x": 1367480000000}, {"y": 76, "x": 1368480000000}, {"y": 76, "x": 1369480000000}, {"y": 82, "x": 1370480000000}, {"y": 86, "x": 1371480000000}, {"y": 76, "x": 1372480000000}, {"y": 88, "x": 1373480000000}, {"y": 84, "x": 1374480000000}, {"y": 80, "x": 1375480000000}, {"y": 90, "x": 1376480000000}, {"y": 94, "x": 1377480000000}, {"y": 94, "x": 1378480000000}, {"y": 102, "x": 1379480000000}, {"y": 86, "x": 1380480000000}, {"y": 94, "x": 1381480000000}, {"y": 100, "x": 1382480000000}, {"y": 104, "x": 1383480000000}, {"y": 108, "x": 1384480000000}, {"y": 104, "x": 1385480000000}, {"y": 106, "x": 1386480000000}, {"y": 118, "x": 1387480000000}, {"y": 102, "x": 1388480000000}, {"y": 116, "x": 1389480000000}, {"y": 118, "x": 1390480000000}, {"y": 112, "x": 1391480000000}, {"y": 116, "x": 1392480000000}, {"y": 116, "x": 1393480000000}, {"y": 114, "x": 1394480000000}, {"y": 120, "x": 1395480000000}, {"y": 136, "x": 1396480000000}, {"y": 138, "x": 1397480000000}, {"y": 130, "x": 1398480000000}, {"y": 130, "x": 1399480000000}, {"y": 130, "x": 1400480000000}, {"y": 144, "x": 1401480000000}, {"y": 138, "x": 1402480000000}, {"y": 150, "x": 1403480000000}, {"y": 136, "x": 1404480000000}, {"y": 140, "x": 1405480000000}, {"y": 156, "x": 1406480000000}, {"y": 150, "x": 1407480000000}, {"y": 154, "x": 1408480000000}, {"y": 158, "x": 1409480000000}, {"y": 164, "x": 1410480000000}, {"y": 166, "x": 1411480000000}, {"y": 160, "x": 1412480000000}, {"y": 152, "x": 1413480000000}, {"y": 160, "x": 1414480000000}, {"y": 168, "x": 1415480000000}, {"y": 160, "x": 1416480000000}, {"y": 176, "x": 1417480000000}, {"y": 166, "x": 1418480000000}, {"y": 182, "x": 1419480000000}, {"y": 170, "x": 1420480000000}, {"y": 182, "x": 1421480000000}, {"y": 176, "x": 1422480000000}, {"y": 184, "x": 1423480000000}, {"y": 180, "x": 1424480000000}, {"y": 182, "x": 1425480000000}, {"y": 192, "x": 1426480000000}, {"y": 198, "x": 1427480000000}, {"y": 200, "x": 1428480000000}, {"y": 202, "x": 1429480000000}, {"y": 188, "x": 1430480000000}, {"y": 190, "x": 1431480000000}, {"y": 192, "x": 1432480000000}, {"y": 198, "x": 1433480000000}, {"y": 198, "x": 1434480000000}, {"y": 212, "x": 1435480000000}, {"y": 216, "x": 1436480000000}, {"y": 218, "x": 1437480000000}], "key": "Duration", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.multiBarChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_multibarchartdate;
chart.xAxis
.tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
);
chart.yAxis
.tickFormat(d3.format(',.2f'));
chart.tooltipContent(function(key, y, e, graph) {
var x = d3.time.format("%d %b %Y %H:%M:%S %p")(new Date(parseInt(graph.point.x)));
var y = String(graph.point.y);
if(key == 'Count'){
var y = 'There are ' + String(graph.point.y) + ' calls';
}
if(key == 'Duration'){
var y = 'There are ' + String(graph.point.y) + ' duration';
}
tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
return tooltip_str;
});
chart.showLegend(true);
d3.select('#multibarchartdate svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 400)
.call(chart);
});
});
</script>
<h2>scatterChart</h2>
<div id="scatterchart"><svg style="width:800px;height:350px;"></svg></div>
<script>
data_scatterchart=[{"values": [{"y": 0, "x": 10, "shape": "circle", "size": "1"}, {"y": 9, "x": 11, "shape": "circle", "size": "1"}, {"y": 12, "x": 7, "shape": "circle", "size": "1"}, {"y": 18, "x": 11, "shape": "circle", "size": "1"}, {"y": 28, "x": 7, "shape": "circle", "size": "1"}, {"y": 10, "x": 15, "shape": "circle", "size": "1"}, {"y": 54, "x": 12, "shape": "circle", "size": "1"}, {"y": 28, "x": 12, "shape": "circle", "size": "1"}, {"y": 48, "x": 14, "shape": "circle", "size": "1"}, {"y": 90, "x": 16, "shape": "circle", "size": "1"}, {"y": 90, "x": 19, "shape": "circle", "size": "1"}, {"y": 11, "x": 20, "shape": "circle", "size": "1"}, {"y": 36, "x": 18, "shape": "circle", "size": "1"}, {"y": 65, "x": 23, "shape": "circle", "size": "1"}, {"y": 140, "x": 19, "shape": "circle", "size": "1"}, {"y": 150, "x": 21, "shape": "circle", "size": "1"}, {"y": 160, "x": 19, "shape": "circle", "size": "1"}, {"y": 68, "x": 21, "shape": "circle", "size": "1"}, {"y": 90, "x": 21, "shape": "circle", "size": "1"}, {"y": 114, "x": 22, "shape": "circle", "size": "1"}, {"y": 180, "x": 26, "shape": "circle", "size": "1"}, {"y": 84, "x": 22, "shape": "circle", "size": "1"}, {"y": 66, "x": 26, "shape": "circle", "size": "1"}, {"y": 207, "x": 24, "shape": "circle", "size": "1"}, {"y": 168, "x": 34, "shape": "circle", "size": "1"}, {"y": 225, "x": 34, "shape": "circle", "size": "1"}, {"y": 234, "x": 35, "shape": "circle", "size": "1"}, {"y": 189, "x": 32, "shape": "circle", "size": "1"}, {"y": 168, "x": 31, "shape": "circle", "size": "1"}, {"y": 116, "x": 38, "shape": "circle", "size": "1"}, {"y": 180, "x": 40, "shape": "circle", "size": "1"}, {"y": 217, "x": 36, "shape": "circle", "size": "1"}, {"y": 320, "x": 37, "shape": "circle", "size": "1"}, {"y": 264, "x": 38, "shape": "circle", "size": "1"}, {"y": 136, "x": 35, "shape": "circle", "size": "1"}, {"y": 175, "x": 44, "shape": "circle", "size": "1"}, {"y": 324, "x": 43, "shape": "circle", "size": "1"}, {"y": 222, "x": 47, "shape": "circle", "size": "1"}, {"y": 152, "x": 43, "shape": "circle", "size": "1"}, {"y": 195, "x": 46, "shape": "circle", "size": "1"}, {"y": 400, "x": 48, "shape": "circle", "size": "1"}, {"y": 369, "x": 47, "shape": "circle", "size": "1"}, {"y": 42, "x": 50, "shape": "circle", "size": "1"}, {"y": 258, "x": 50, "shape": "circle", "size": "1"}, {"y": 440, "x": 49, "shape": "circle", "size": "1"}, {"y": 270, "x": 52, "shape": "circle", "size": "1"}, {"y": 184, "x": 47, "shape": "circle", "size": "1"}, {"y": 94, "x": 56, "shape": "circle", "size": "1"}, {"y": 432, "x": 58, "shape": "circle", "size": "1"}, {"y": 147, "x": 50, "shape": "circle", "size": "1"}], "key": "serie 1", "yAxis": "1"}, {"values": [{"y": 0, "x": 10, "shape": "cross", "size": "10"}, {"y": 18, "x": 11, "shape": "cross", "size": "10"}, {"y": 24, "x": 7, "shape": "cross", "size": "10"}, {"y": 36, "x": 11, "shape": "cross", "size": "10"}, {"y": 56, "x": 7, "shape": "cross", "size": "10"}, {"y": 20, "x": 15, "shape": "cross", "size": "10"}, {"y": 108, "x": 12, "shape": "cross", "size": "10"}, {"y": 56, "x": 12, "shape": "cross", "size": "10"}, {"y": 96, "x": 14, "shape": "cross", "size": "10"}, {"y": 180, "x": 16, "shape": "cross", "size": "10"}, {"y": 180, "x": 19, "shape": "cross", "size": "10"}, {"y": 22, "x": 20, "shape": "cross", "size": "10"}, {"y": 72, "x": 18, "shape": "cross", "size": "10"}, {"y": 130, "x": 23, "shape": "cross", "size": "10"}, {"y": 280, "x": 19, "shape": "cross", "size": "10"}, {"y": 300, "x": 21, "shape": "cross", "size": "10"}, {"y": 320, "x": 19, "shape": "cross", "size": "10"}, {"y": 136, "x": 21, "shape": "cross", "size": "10"}, {"y": 180, "x": 21, "shape": "cross", "size": "10"}, {"y": 228, "x": 22, "shape": "cross", "size": "10"}, {"y": 360, "x": 26, "shape": "cross", "size": "10"}, {"y": 168, "x": 22, "shape": "cross", "size": "10"}, {"y": 132, "x": 26, "shape": "cross", "size": "10"}, {"y": 414, "x": 24, "shape": "cross", "size": "10"}, {"y": 336, "x": 34, "shape": "cross", "size": "10"}, {"y": 450, "x": 34, "shape": "cross", "size": "10"}, {"y": 468, "x": 35, "shape": "cross", "size": "10"}, {"y": 378, "x": 32, "shape": "cross", "size": "10"}, {"y": 336, "x": 31, "shape": "cross", "size": "10"}, {"y": 232, "x": 38, "shape": "cross", "size": "10"}, {"y": 360, "x": 40, "shape": "cross", "size": "10"}, {"y": 434, "x": 36, "shape": "cross", "size": "10"}, {"y": 640, "x": 37, "shape": "cross", "size": "10"}, {"y": 528, "x": 38, "shape": "cross", "size": "10"}, {"y": 272, "x": 35, "shape": "cross", "size": "10"}, {"y": 350, "x": 44, "shape": "cross", "size": "10"}, {"y": 648, "x": 43, "shape": "cross", "size": "10"}, {"y": 444, "x": 47, "shape": "cross", "size": "10"}, {"y": 304, "x": 43, "shape": "cross", "size": "10"}, {"y": 390, "x": 46, "shape": "cross", "size": "10"}, {"y": 800, "x": 48, "shape": "cross", "size": "10"}, {"y": 738, "x": 47, "shape": "cross", "size": "10"}, {"y": 84, "x": 50, "shape": "cross", "size": "10"}, {"y": 516, "x": 50, "shape": "cross", "size": "10"}, {"y": 880, "x": 49, "shape": "cross", "size": "10"}, {"y": 540, "x": 52, "shape": "cross", "size": "10"}, {"y": 368, "x": 47, "shape": "cross", "size": "10"}, {"y": 188, "x": 56, "shape": "cross", "size": "10"}, {"y": 864, "x": 58, "shape": "cross", "size": "10"}, {"y": 294, "x": 50, "shape": "cross", "size": "10"}], "key": "serie 2", "yAxis": "1"}, {"values": [{"y": 0, "x": 10, "shape": "triangle-up", "size": "100"}, {"y": 45, "x": 11, "shape": "triangle-up", "size": "100"}, {"y": 60, "x": 7, "shape": "triangle-up", "size": "100"}, {"y": 90, "x": 11, "shape": "triangle-up", "size": "100"}, {"y": 140, "x": 7, "shape": "triangle-up", "size": "100"}, {"y": 50, "x": 15, "shape": "triangle-up", "size": "100"}, {"y": 270, "x": 12, "shape": "triangle-up", "size": "100"}, {"y": 140, "x": 12, "shape": "triangle-up", "size": "100"}, {"y": 240, "x": 14, "shape": "triangle-up", "size": "100"}, {"y": 450, "x": 16, "shape": "triangle-up", "size": "100"}, {"y": 450, "x": 19, "shape": "triangle-up", "size": "100"}, {"y": 55, "x": 20, "shape": "triangle-up", "size": "100"}, {"y": 180, "x": 18, "shape": "triangle-up", "size": "100"}, {"y": 325, "x": 23, "shape": "triangle-up", "size": "100"}, {"y": 700, "x": 19, "shape": "triangle-up", "size": "100"}, {"y": 750, "x": 21, "shape": "triangle-up", "size": "100"}, {"y": 800, "x": 19, "shape": "triangle-up", "size": "100"}, {"y": 340, "x": 21, "shape": "triangle-up", "size": "100"}, {"y": 450, "x": 21, "shape": "triangle-up", "size": "100"}, {"y": 570, "x": 22, "shape": "triangle-up", "size": "100"}, {"y": 900, "x": 26, "shape": "triangle-up", "size": "100"}, {"y": 420, "x": 22, "shape": "triangle-up", "size": "100"}, {"y": 330, "x": 26, "shape": "triangle-up", "size": "100"}, {"y": 1035, "x": 24, "shape": "triangle-up", "size": "100"}, {"y": 840, "x": 34, "shape": "triangle-up", "size": "100"}, {"y": 1125, "x": 34, "shape": "triangle-up", "size": "100"}, {"y": 1170, "x": 35, "shape": "triangle-up", "size": "100"}, {"y": 945, "x": 32, "shape": "triangle-up", "size": "100"}, {"y": 840, "x": 31, "shape": "triangle-up", "size": "100"}, {"y": 580, "x": 38, "shape": "triangle-up", "size": "100"}, {"y": 900, "x": 40, "shape": "triangle-up", "size": "100"}, {"y": 1085, "x": 36, "shape": "triangle-up", "size": "100"}, {"y": 1600, "x": 37, "shape": "triangle-up", "size": "100"}, {"y": 1320, "x": 38, "shape": "triangle-up", "size": "100"}, {"y": 680, "x": 35, "shape": "triangle-up", "size": "100"}, {"y": 875, "x": 44, "shape": "triangle-up", "size": "100"}, {"y": 1620, "x": 43, "shape": "triangle-up", "size": "100"}, {"y": 1110, "x": 47, "shape": "triangle-up", "size": "100"}, {"y": 760, "x": 43, "shape": "triangle-up", "size": "100"}, {"y": 975, "x": 46, "shape": "triangle-up", "size": "100"}, {"y": 2000, "x": 48, "shape": "triangle-up", "size": "100"}, {"y": 1845, "x": 47, "shape": "triangle-up", "size": "100"}, {"y": 210, "x": 50, "shape": "triangle-up", "size": "100"}, {"y": 1290, "x": 50, "shape": "triangle-up", "size": "100"}, {"y": 2200, "x": 49, "shape": "triangle-up", "size": "100"}, {"y": 1350, "x": 52, "shape": "triangle-up", "size": "100"}, {"y": 920, "x": 47, "shape": "triangle-up", "size": "100"}, {"y": 470, "x": 56, "shape": "triangle-up", "size": "100"}, {"y": 2160, "x": 58, "shape": "triangle-up", "size": "100"}, {"y": 735, "x": 50, "shape": "triangle-up", "size": "100"}], "key": "serie 3", "yAxis": "1"}];
nv.addGraph(function() {
var chart = nv.models.scatterChart();
chart.margin({top: 30, right: 60, bottom: 20, left: 60});
var datum = data_scatterchart;
chart.xAxis
.tickFormat(d3.format(',.02f'));
chart.yAxis
.tickFormat(d3.format(',.02f'));
chart.showLegend(true);
chart
.showDistX(true)
.showDistY(true)
.color(d3.scale.category10().range());
d3.select('#scatterchart svg')
.datum(datum)
.transition().duration(500)
.attr('width', 800)
.attr('height', 350)
.call(chart);
});
</script>
</body></html>