Home forums Using CanvasJS Downsampling Reply To: Downsampling

#23381

PWang
Member

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>