Home › Forums › Chart Support › Downsampling

Downsampling

Viewing 4 posts - 1 through 4 (of 4 total)

Tagged: 

  • November 8, 2018 at 4:00 am #23354

    FRodriguez

    I have a lot data for one graph, So I try to downsampling the data. But I can’t find the function for downsampling. Does CanvasJS has downsampling function?
    if they do can you give the command for it please. (by downsampling I mean max number of points to display per dataset)

    November 8, 2018 at 11:07 am #23357

    Vishwas R

    @pwang,

    We don’t have down-sampling function built-in, as of now. However on rangeChanging event you can update number of dataPoints to be displayed as shown in this JSFiddle.

    —
    Vishwas R
    Team CanvasJS

    November 10, 2018 at 4:09 am #23381

    FRodriguez

    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&gt;
    <script src=”https://oss.maxcdn.com/respond/1.4.2/respond.min.js”></script&gt;
    <![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>

    November 12, 2018 at 1:07 pm #23390

    Vishwas R

    @pwang,

    Updating the index of dataSeries in intervalTypeChanger should work fine in your case. You are updating the dataPoints of first series in intervalTypeChanger instead of fourth series. Please take a look at this updated JSFiddle.

    —
    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

Tagged: 

You must be logged in to reply to this topic.