如何根据选定的时间段调整折线图的json数据大小

Question

I am new to manipulating json data for a linechart. I have data to show line-chart of a daily and monthly based. I would like to rearrange json data of 'daily' to 'last 7days' and 'last 4weeks'. Similarly, 'Monthly' data to 'last 6months' and 'last 12months'

when user selects 'last 7days' => I would like to slice/resize the json data to last 7 items from each(successcount, errorcount, dates) of DAILY data. eg:

$elm['datesDAILY']=["2019-04-06","2019-04-07","2019-04-08","2019-04-09","2019-04-10","2019-04-11","2019-04-12"]

when user selects 'last 4weeks' => I would like to slice/resize the json data by skipping alternative items from each(successcount, errorcount, dates) of DAILY data. eg:

$elm['datesDAILY']=["2019-03-29","2019-03-31","2019-04-02","2019-04-04","2019-04-06","2019-04-08","2019-04-10","2019-04-12"]

How can I achieve this kind of resizing json data? can anyone please share your experience?

These are my actual json data: (array data converted to json in PHP file)

$elm['successcountDAILY'] =  ["211","490","193","148","158","91","119","92","102","106","105","97","158","99","95","24"]

$elm['errorcountDAILY'] = ["189","325","37","16","32","13","21","16","12","17","11","13","21","13","20","1"]

$elm['datesDAILY']=["2019-03-28","2019-03-29","2019-03-30","2019-03-31","2019-04-01","2019-04-02","2019-04-03","2019-04-04","2019-04-05","2019-04-06","2019-04-07","2019-04-08","2019-04-09","2019-04-10","2019-04-11","2019-04-12"]

$elm['successcountMONTHLY'] =  ["1042","1246"]

$elm['errorcountMONTHLY'] = ["567","190"]

$elm['datesMONTHLY'] = ["2019-03-01","2019-04-01"]

html:

 <div class="ibox-title">
    <div class="row">
        <div class="col-md-4">
        <strong>Number of queries over time</strong>
        </div>
        <div class="col-md-8 text-right">
        <span>
            <a id="7days">last 7 days</a>
        </span>
        |
        <span>
            <a id="4weeks">last 4 weeks</a>
        </span>
        |
        <span>
            <a id="6months">last 6 months</a>
        </span>
        |
        <span>
            <a id="12months">last 12 months</a>
        </span>
        </div>
    </div>
</div>

<div>
 <canvas id="line-chart" width="800" height="450"></canvas>
</div>

javascript:

<script>

$(document).ready(function () {

var canvas = document.getElementById("line-chart");
var ctx = canvas.getContext('2d');
<!-- DAILY is default -->
var lab = {$elm['datesDAILY']};
var suc = {$elm['successcountDAILY']};
var err = {$elm['errorcountDAILY']};

var data = {
  labels: lab,
    datasets: [{ 
        data: suc, 
        label: "Success",
        borderColor: "#3cba9f",
        fill: false
      }, 
      { 
        data: err, 
        label: "Error",
        borderColor: "#c45850",
        fill: false
      }
    ]
};

var options = {
  scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                },
                scaleLabel: {
                     display: true,
                     labelString: 'Queries',
                     fontSize: 20 
                  }
            }]            
        }  
};
<!-- graph declaration: -->
var mylineChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});


<!--7days and 4 weeks-->
$('#7days,#4weeks').click(function(ev) {
    ev.preventDefault();
    mylineChart.data.labels = {$elm['datesDAILY']};
    mylineChart.data.datasets[0].data ={$elm['successcountDAILY']};
    mylineChart.data.datasets[1].data ={$elm['errorcountDAILY']};
    <!--update chart with new values-->
    mylineChart.update();
});


<!--Monthly-->
$('#6months,#12months').click(function(ev) {
    ev.preventDefault();
    mylineChart.data.labels = {$elm['datesMONTHLY']};
    mylineChart.data.datasets[0].data ={$elm['successcountMONTHLY']};
    mylineChart.data.datasets[1].data ={$elm['errorcountMONTHLY']};
    <!--update chart with new values-->
    mylineChart.update();
});


<!--accordion-->
$("#accordion").accordion({
    <!--allows the accordion panels to keep their native height-->
    heightStyle: "content"
});




} );
</script>