Home › Forums › Chart Support › Downsampling › Reply To: Downsampling
Thank you vishwas r, can you take look my code please, the function intervalTypeChanger is not working properly. also when use rangeChaning:intervaltypechanger, will the load time for the site to be reduced, since it load less data now? code: <!DOCTYPE html> <html lang=”en”> <!– Header Start –> <head> <meta charset=”utf-8″> <meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <!– The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags –> <meta name=”description” content=””> <meta name=”author” content=””>
<title>Sanyo-Panasonic BK-4MCC</title>
<!– Bootstrap core CSS –> <link href=”css/bootstrap.min.css” rel=”stylesheet”> <link href=”css/carousel.css” rel=”stylesheet”> <link href=”css/table_jb.css” rel=”stylesheet”>
<!– HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries –> <!–[if lt IE 9]> <script src=”https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js”></script> <script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script> <![endif]–> </head> <body> <div style=”height:50px;page-break-after:always;” ></div> <div id=”chartContainer7″ style=”height: 800px; width: 100%;border:1px solid #E6E6E6;”></div> <script type=”text/javascript” src=”js/bootstrap.min.js”></script> <script type=”text/javascript” src=”js/runtime.js”></script> <script src=”js/canvasjs.min.js”></script>
<script>
var dps = [ { x: 0, y: 1.3816},{ x: 0.0041, y: 1.3515},{ x: 0.0121, y: 1.3295},{ x: 0.0201, y: 1.316},{ x: 0.0281, y: 1.3059}, { x: 0.0361, y: 1.2973},{ x: 0.0441, y: 1.29},{ x: 0.0521, y: 1.2838},{ x: 0.0601, y: 1.2781},{ x: 0.0681, y: 1.2735}, { x: 0.0761, y: 1.2691},{ x: 0.079443, y: 1.2671},{ x: 0.079447, y: 1.2135},{ x: 0.079458, y: 1.2094},{ x: 0.079469, y: 1.2065}, { x: 0.07948, y: 1.2047},{ x: 0.079491, y: 1.2036},{ x: 0.079502, y: 1.2025},{ x: 0.079514, y: 1.2021},{ x: 0.079525, y: 1.201}, { x: 0.079536, y: 1.2006},{ x: 0.079547, y: 1.2003},{ x: 0.079558, y: 1.1997},{ x: 0.079569, y: 1.1994},{ x: 0.07958, y: 1.1992}, { x: 0.079591, y: 1.1992},{ x: 0.079602, y: 1.1988},{ x: 0.079614, y: 1.1986},{ x: 0.079625, y: 1.1984},{ x: 0.079636, y: 1.1983}, { x: 0.079647, y: 1.1981},{ x: 0.079658, y: 1.1979},{ x: 0.079669, y: 1.1979},{ x: 0.07968, y: 1.1975},{ x: 0.079691, y: 1.1977}, { x: 0.079702, y: 1.1973},{ x: 0.079714, y: 1.1973},{ x: 0.079725, y: 1.1972},{ x: 0.079736, y: 1.197},{ x: 0.079747, y: 1.1972}, { x: 0.079758, y: 1.1968},{ x: 0.079769, y: 1.1966},{ x: 0.07978, y: 1.1964},{ x: 0.079791, y: 1.1964},{ x: 0.079802, y: 1.1964}, { x: 0.079814, y: 1.1964},{ x: 0.079825, y: 1.1962},{ x: 0.079836, y: 1.1962},{ x: 0.079847, y: 1.1961},{ x: 0.079858, y: 1.1962}, { x: 0.079869, y: 1.1961},{ x: 0.07988, y: 1.1959},{ x: 0.079891, y: 1.1959},{ x: 0.079902, y: 1.1957},{ x: 0.079914, y: 1.1957}, { x: 0.079925, y: 1.1957},{ x: 0.079936, y: 1.1953},{ x: 0.079947, y: 1.1951},{ x: 0.079958, y: 1.1953},{ x: 0.079969, y: 1.1953}, { x: 0.07998, y: 1.1953},{ x: 0.079991, y: 1.1953},{ x: 0.079998, y: 1.1951},{ x: 0.08, y: 1.2475},{ x: 0.080002, y: 1.2519}, { x: 0.080004, y: 1.2547},{ x: 0.080006, y: 1.2563},{ x: 0.080008, y: 1.258},{ x: 0.080011, y: 1.2589},{ x: 0.080013, y: 1.2596}, { x: 0.080015, y: 1.2602},{ x: 0.080017, y: 1.2607},{ x: 0.08002, y: 1.2611},{ x: 0.080021, y: 1.2612},{ x: 0.080021, y: 1.2612}, { x: 0.088021, y: 1.2631},{ x: 0.096021, y: 1.2602},{ x: 0.104021, y: 1.2576},{ x: 0.112021, y: 1.255},{ x: 0.120021, y: 1.2528}, { x: 0.128021, y: 1.251},{ x: 0.136021, y: 1.2495},{ x: 0.144021, y: 1.2484},{ x: 0.152021, y: 1.2473},{ x: 0.16002, y: 1.2466}, { x: 0.16802, y: 1.2459},{ x: 0.17602, y: 1.2455},{ x: 0.18402, y: 1.245},{ x: 0.19202, y: 1.2446},{ x: 0.20002, y: 1.2444}, { x: 0.20802, y: 1.2439},{ x: 0.21602, y: 1.2435},{ x: 0.22402, y: 1.2431},{ x: 0.23202, y: 1.2431},{ x: 0.24002, y: 1.2429}, { x: 0.24802, y: 1.2422},{ x: 0.256019, y: 1.2422},{ x: 0.264019, y: 1.2415},{ x: 0.272019, y: 1.2413},{ x: 0.280019, y: 1.2409}, { x: 0.288019, y: 1.2409},{ x: 0.296019, y: 1.24},{ x: 0.304019, y: 1.2396},{ x: 0.312019, y: 1.2393},{ x: 0.320019, y: 1.2385}, { x: 0.328019, y: 1.238},{ x: 0.336019, y: 1.2376},{ x: 0.344018, y: 1.2369},{ x: 0.352018, y: 1.236},{ x: 0.360018, y: 1.2356}, { x: 0.368018, y: 1.2347},{ x: 0.376018, y: 1.2343},{ x: 0.384018, y: 1.2336},{ x: 0.392018, y: 1.2325},{ x: 0.39944, y: 1.232}, { x: 0.399443, y: 1.1823},{ x: 0.399455, y: 1.1789},{ x: 0.399466, y: 1.177},{ x: 0.399477, y: 1.1757},{ x: 0.399488, y: 1.175}, { x: 0.399499, y: 1.1745},{ x: 0.39951, y: 1.1739},{ x: 0.399521, y: 1.1734},{ x: 0.399532, y: 1.173},{ x: 0.399543, y: 1.1726}, { x: 0.399555, y: 1.1723},{ x: 0.399566, y: 1.1721},{ x: 0.399577, y: 1.1719},{ x: 0.399588, y: 1.1715},{ x: 0.399599, y: 1.1715}, { x: 0.39961, y: 1.1715},{ x: 0.399621, y: 1.1713},{ x: 0.399632, y: 1.1712},{ x: 0.399643, y: 1.1712},{ x: 0.399655, y: 1.1708}, { x: 0.399666, y: 1.1708},{ x: 0.399677, y: 1.1704},{ x: 0.399688, y: 1.1706},{ x: 0.399699, y: 1.1704},{ x: 0.39971, y: 1.1701}, { x: 0.399721, y: 1.1701},{ x: 0.399732, y: 1.1702},{ x: 0.399743, y: 1.1699},{ x: 0.399755, y: 1.1695},{ x: 0.399766, y: 1.1697}, { x: 0.399777, y: 1.1695},{ x: 0.399788, y: 1.1695},{ x: 0.399799, y: 1.1695},{ x: 0.39981, y: 1.1691},{ x: 0.399821, y: 1.1691}, { x: 0.399832, y: 1.1691},{ x: 0.399843, y: 1.1691},{ x: 0.399855, y: 1.1688},{ x: 0.399866, y: 1.169},{ x: 0.399877, y: 1.1688}, { x: 0.399888, y: 1.1688},{ x: 0.399899, y: 1.1686},{ x: 0.39991, y: 1.1684},{ x: 0.399921, y: 1.1682},{ x: 0.399932, y: 1.1684}, { x: 0.399943, y: 1.1682},{ x: 0.399955, y: 1.1682},{ x: 0.399966, y: 1.1682},{ x: 0.399977, y: 1.168},{ x: 0.399988, y: 1.168}, { x: 0.399995, y: 1.1679},{ x: 0.399996, y: 1.2168},{ x: 0.399998, y: 1.2204},{ x: 0.400001, y: 1.2222},{ x: 0.400003, y: 1.2237}, { x: 0.400005, y: 1.2246},{ x: 0.400007, y: 1.2252},{ x: 0.400009, y: 1.2255},{ x: 0.400012, y: 1.2261},{ x: 0.400014, y: 1.2263}, { x: 0.400016, y: 1.2265},{ x: 0.400018, y: 1.2266},{ x: 0.400018, y: 1.2266},{ x: 0.408018, y: 1.2309},{ x: 0.416018, y: 1.2299}, { x: 0.424018, y: 1.229},{ x: 0.432018, y: 1.2283},{ x: 0.440017, y: 1.2272},{ x: 0.448017, y: 1.2261},{ x: 0.456017, y: 1.225}, { x: 0.464017, y: 1.2239},{ x: 0.472017, y: 1.2228},{ x: 0.480017, y: 1.2211},{ x: 0.488017, y: 1.2201},{ x: 0.496017, y: 1.2186}, { x: 0.504017, y: 1.2171},{ x: 0.512017, y: 1.2158},{ x: 0.520017, y: 1.2138},{ x: 0.528017, y: 1.2124},{ x: 0.536016, y: 1.2107}, { x: 0.544016, y: 1.2089},{ x: 0.552016, y: 1.207},{ x: 0.560016, y: 1.2049},{ x: 0.568016, y: 1.2027},{ x: 0.576016, y: 1.2006}, { x: 0.584016, y: 1.1979},{ x: 0.592016, y: 1.1953},{ x: 0.600016, y: 1.192},{ x: 0.608016, y: 1.1886},{ x: 0.616016, y: 1.1843}, { x: 0.624015, y: 1.1799},{ x: 0.632015, y: 1.1754},{ x: 0.639437, y: 1.1699},{ x: 0.639441, y: 1.1223},{ x: 0.639452, y: 1.1182}, { x: 0.639463, y: 1.1157},{ x: 0.639474, y: 1.1142},{ x: 0.639485, y: 1.1133},{ x: 0.639496, y: 1.1124},{ x: 0.639508, y: 1.1117}, { x: 0.639519, y: 1.1111},{ x: 0.63953, y: 1.1104},{ x: 0.639541, y: 1.11},{ x: 0.639552, y: 1.1096},{ x: 0.639563, y: 1.1091}, { x: 0.639574, y: 1.1089},{ x: 0.639585, y: 1.1085},{ x: 0.639596, y: 1.1084},{ x: 0.639608, y: 1.108},{ x: 0.639619, y: 1.1076}, { x: 0.63963, y: 1.1074},{ x: 0.639641, y: 1.1074},{ x: 0.639652, y: 1.1071},{ x: 0.639663, y: 1.1071},{ x: 0.639674, y: 1.1063}, { x: 0.639685, y: 1.1063},{ x: 0.639696, y: 1.1062},{ x: 0.639708, y: 1.106},{ x: 0.639719, y: 1.1058},{ x: 0.63973, y: 1.1056}, { x: 0.639741, y: 1.1056},{ x: 0.639752, y: 1.1054},{ x: 0.639763, y: 1.1054},{ x: 0.639774, y: 1.1051},{ x: 0.639785, y: 1.1051}, { x: 0.639796, y: 1.1049},{ x: 0.639808, y: 1.1045},{ x: 0.639819, y: 1.1043},{ x: 0.63983, y: 1.1045},{ x: 0.639841, y: 1.1043}, { x: 0.639852, y: 1.1041},{ x: 0.639863, y: 1.104},{ x: 0.639874, y: 1.1036},{ x: 0.639885, y: 1.1034},{ x: 0.639896, y: 1.1034}, { x: 0.639908, y: 1.103},{ x: 0.639919, y: 1.103},{ x: 0.63993, y: 1.103},{ x: 0.639941, y: 1.1029},{ x: 0.639952, y: 1.1029}, { x: 0.639963, y: 1.1027},{ x: 0.639974, y: 1.1027},{ x: 0.639985, y: 1.1025},{ x: 0.639992, y: 1.1027},{ x: 0.639994, y: 1.1494}, { x: 0.639996, y: 1.1536},{ x: 0.639998, y: 1.1558},{ x: 0.64, y: 1.1571},{ x: 0.640002, y: 1.1585},{ x: 0.640005, y: 1.1593}, { x: 0.640007, y: 1.16},{ x: 0.640009, y: 1.1604},{ x: 0.640011, y: 1.1609},{ x: 0.640014, y: 1.1611},{ x: 0.640015, y: 1.1613}, { x: 0.640015, y: 1.1615},{ x: 0.644015, y: 1.166},{ x: 0.648015, y: 1.1631},{ x: 0.652015, y: 1.1596},{ x: 0.656015, y: 1.1558}, { x: 0.660015, y: 1.1516},{ x: 0.664015, y: 1.1474},{ x: 0.668015, y: 1.1424},{ x: 0.672015, y: 1.1373},{ x: 0.676015, y: 1.1314}, { x: 0.680015, y: 1.1254},{ x: 0.684015, y: 1.1184},{ x: 0.688015, y: 1.1106},{ x: 0.692015, y: 1.1018},{ x: 0.696015, y: 1.0921}, { x: 0.700015, y: 1.0807},{ x: 0.704015, y: 1.0677},{ x: 0.708015, y: 1.0527},{ x: 0.712015, y: 1.0344},{ x: 0.716015, y: 1.0119}, { x: 0.717817, y: 1},{ x: 0.717817, y: 1.0001} ]; var dataPoints = []; for(var i=0; i<dps.length; i += 10){ dataPoints.push(dps[i]); }
var chart = new CanvasJS.Chart(“chartContainer7”, { zoomEnabled:true, zoomType: “x”, rangeChanging: intervalTypeChanger, title:{ text: “MEDIAN VOLTAGE VERSUS DISCHARGE CAPACITY AT DIFFERENT RATES”, fontSize:25, fontFamily:”Arial”, fontWeight:”Bold” }, subtitles:[ { text: “FOR SANYO-PANASONIC BK-4MCC NICKLE METAL HYDRIDE RECHARGEABLE”, fontSize:25, fontFamily:”Arial”, fontWeight:”Bold” }, { text: “CELLS AT 0 \xB0C”, fontSize:25, fontFamily:”Arial”, fontWeight:”Bold” } ], axisX:{ title: “Discharge Capacity (Ah)”, titleFontColor:”black” , titleFontSize: 20, titleFontFamily: “Arial”, labelFontColor:”black”, labelFontSize:15, labelFontFamily: “Arial”, tickColor: “black” , tickThickness: 1, gridColor:”gray” , gridDashType:”dash” , lineColor: “black”, gridThickness: 1, lineThickness: 1, maximum:0.800, minimum:0, interval:0.100, labelFormatter: function (e) { return CanvasJS.formatNumber(e.value, “0.000”); }, }, axisY:{ title: “Voltage (V)”, titleFontColor:”black” , titleFontSize: 20, labelFontSize:15, labelFontFamily: “Arial”, titleFontFamily: “Arial”, labelFontColor:”black”, tickLength: 10, tickColor: “black” , tickThickness: 1, gridColor:”gray” , gridDashType:”dash” , lineColor: “black”, gridThickness: 1, lineThickness: 1, maximum:1.700, minimum:0.800, interval:0.100, includeZero: true, labelFormatter: function (e) { return CanvasJS.formatNumber(e.value, “0.000”); }, stripLines:[
] },
legend:{ fontSize:15, fontFamily: “Arial”, horizontalAlign:”right”, verticalAlign:”top”, dockInsidePlotArea: true, backgroundColor: “white”, maxWidth: 300 }, toolTip:{ borderColor:”gray”, fontFamily: “Arial”, content: “{name}: {x} Ah at {y} V” }, data: [ <!–peterTesting 8 yAxies: 1.7 xAxiesMax 0.8–> { type: “line”, showInLegend: false, lineColor:”#000000″, lineThickness:1.5, markerType:”none”, toolTipContent: null, dataPoints: [ { x:0, y:1.7}, { x:0.8, y:1.7}, ] }, { type: “line”, showInLegend: false, lineColor:”#000000″, lineThickness:1.5, markerType:”none”, toolTipContent: null, dataPoints: [ { x:0.8, y:0.8}, { x:0.8, y:1.7}, ] },
<!– Ubound arr=2 and ture ture2 –> { type: “line”, showInLegend: false, name:”VOLTAGE CUT-OFF = 2.000 V”, lineColor:”#000000″, lineThickness:3, markerType:”none”, lineDashType:”longDash”, toolTipContent: null, dataPoints: [ { x: 0, y: 1},{ x: 0.8, y: 1} ] }, <!– second for loop Ubound arr bigger than1292 –> <!– peterwang change for intervalTypeChanger–> { type: “line”, showInLegend: true, name:”C/10-rate – peter”, lineThickness:3, color:”#000080″, lineColor:”#000080″, markerType:”square”, markerColor:”#000080″, dataPoints: dataPoints }, ] }); chart.render(); <!– End Chart 7 –> <!– Footer Start –>
function intervalTypeChanger(t){ if(t.trigger === “reset”){ chart.options.data[0].datapoints = []; for(var p = 0; p < dps.length; p += 10 ){ chart.options.data[0].dataPoints.push(dps[p]); } } else if(t.trigger === “zoom”){ chart.options.data[0].dataPoints = []; for(var p = 0; p < dps.length; p++ ){ chart.options.data[0].dataPoints.push(dps[p]); } }
}
</script>
</body>