| OLD | NEW |
|---|
| (Empty) |
| 1 <!doctype html> | |
| 2 | |
| 3 <!--[if lte IE 8]><SCRIPT src='source/excanvas.js'></script><![endif]--><SCRIPT
src='../ChartNew.js'></script> | |
| 4 <SCRIPT src='../Add-ins/format.js'></script> | |
| 5 | |
| 6 <SCRIPT> | |
| 7 | |
| 8 function setColor(area,data,config,i,j,animPct,value) | |
| 9 { | |
| 10 if(value > 35)return("rgba(220,0,0,"+animPct); | |
| 11 else return("rgba(0,220,0,"+animPct); | |
| 12 | |
| 13 } | |
| 14 | |
| 15 var charJSPersonnalDefaultOptions = { decimalSeparator : "," , thousandSeparator
: ".", roundNumber : "none", graphTitleFontSize: 2 }; | |
| 16 | |
| 17 defCanvasWidth=600; | |
| 18 defCanvasHeight=300; | |
| 19 | |
| 20 | |
| 21 | |
| 22 | |
| 23 | |
| 24 var mydata = { | |
| 25 labels : [], | |
| 26 datasets : [ | |
| 27 { | |
| 28 fillColor : "rgba(220,220,220,0.5)", | |
| 29 strokeColor : "rgba(220,220,220,1)", | |
| 30 pointColor : "rgba(220,220,220,1)", | |
| 31 pointstrokeColor : "yellow", | |
| 32 xPos : [], | |
| 33 data : [], | |
| 34 title : "2014" | |
| 35 } | |
| 36 ] | |
| 37 } | |
| 38 | |
| 39 var startWithDataset =1; | |
| 40 var startWithData =1; | |
| 41 | |
| 42 var opt = { | |
| 43 animationStartWithDataset : startWithDataset, | |
| 44 animationStartWithData : startWithData, | |
| 45 // animation : true, | |
| 46 animationLeftToRight : true, | |
| 47 animationSteps : 20, | |
| 48 animationEasing: "linear", | |
| 49 canvasBorders : true, | |
| 50 canvasBordersWidth : 3, | |
| 51 canvasBordersColor : "black", | |
| 52 graphTitle : "animation With Update", | |
| 53 legend : true, | |
| 54 // inGraphDataShow : true, | |
| 55 annotateDisplay : true, | |
| 56 onAnimationComplete : startUpdate, | |
| 57 graphTitleFontSize: 18, | |
| 58 responsive : true, | |
| 59 scaleOverride: true, | |
| 60 scaleSteps: 10, | |
| 61 scaleStepWidth: 10, | |
| 62 scaleStartValue: 0, | |
| 63 fmtXLabel : "fmttime hh:mm:ss", | |
| 64 animationCount: 1, | |
| 65 animationPauseTime : 0, | |
| 66 animationBackward: true | |
| 67 | |
| 68 | |
| 69 }; | |
| 70 | |
| 71 | |
| 72 function startUpdate(ctx, config, data, tp, count) { | |
| 73 console.log("onAnimationComplete Function executed"); | |
| 74 }; | |
| 75 | |
| 76 | |
| 77 function updt(ctx,data,config) { | |
| 78 updtData(data); | |
| 79 config.animationSteps = 50*data.datasets[0].xPos.length; | |
| 80 config.animationStartValue=1-(1/data.datasets[0].xPos.length); | |
| 81 updateChart(ctx,data,config,true,true); | |
| 82 setTimeout(function (){updt(ctx,data,config);}, 1000+Math.random()*2000)
; | |
| 83 } | |
| 84 | |
| 85 function updtData(data) { | |
| 86 var i; | |
| 87 | |
| 88 var t=new Date(); | |
| 89 | |
| 90 var coeff = 1000 ; | |
| 91 var rounded = new Date(Math.round(t.getTime() / coeff) * coeff + coeff); | |
| 92 | |
| 93 for(i=0;i<10;i++) | |
| 94 { | |
| 95 var t2 = new Date(rounded - (18-2*i) * 1000); | |
| 96 data.labels[i]=t2; | |
| 97 } | |
| 98 | |
| 99 data.xBegin=data.labels[0]; | |
| 100 data.xEnd=data.labels[9]; | |
| 101 | |
| 102 | |
| 103 data.datasets[0].xPos[data.datasets[0].xPos.length]=t; | |
| 104 vl=Math.random()*100; | |
| 105 data.datasets[0].data[data.datasets[0].data.length]=vl; | |
| 106 | |
| 107 | |
| 108 | |
| 109 // remove data outside first time; | |
| 110 while(data.datasets[0].xPos[0]<data.labels[0]) { | |
| 111 data.datasets[0].xPos.splice(0,1); | |
| 112 data.datasets[0].data.splice(0,1); | |
| 113 } | |
| 114 | |
| 115 | |
| 116 } | |
| 117 | |
| 118 updtData(mydata); | |
| 119 updtData(mydata); | |
| 120 updtData(mydata); | |
| 121 mydata.datasets[0].xPos[0]=new Date(mydata.datasets[0].xPos[0]-2000); | |
| 122 mydata.datasets[0].xPos[1]=new Date(mydata.datasets[0].xPos[1]-1000); | |
| 123 | |
| 124 </SCRIPT> | |
| 125 | |
| 126 | |
| 127 <html> | |
| 128 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> | |
| 129 <head> | |
| 130 <title>Demo ChartNew.js</title> | |
| 131 </head> | |
| 132 <body> | |
| 133 | |
| 134 <center> | |
| 135 <FONT SIZE=6><B>Demo of ChartNew.js !</B></FONT> <BR> | |
| 136 | |
| 137 <script> | |
| 138 | |
| 139 document.write("<canvas id=\"canvas_Line\" height=\""+defCanvasHeight+"\" wi
dth=\""+defCanvasWidth+"\"></canvas>"); | |
| 140 window.onload = function() { | |
| 141 var myLine = new Chart(document.getElementById("canvas_Line").getContext
("2d")).Line(mydata,opt); | |
| 142 setTimeout(function (){updt(document.getElementById("canvas_Line").getCo
ntext("2d"),mydata,opt);}, 2000+Math.random()*2000); | |
| 143 | |
| 144 } | |
| 145 </script> | |
| 146 </body> | |
| 147 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 786953007:
npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions (Closed)
Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master