チャートの日付範囲セレクタ付き

Question

日付とajaxで選択したシフトに応じてチャートを更新しようとしています。私のAJAX呼び出しは、このような配列を返します。

問題1：チャートはそれほど破壊されていない私はこれで2つの問題を抱えている

// on change event 
var request; 
$('input').on('change', function(event) { 
    console.log('changed'); 
    event.preventDefault(); 

    // Abort any pending request 
    if (request) { 
     request.abort(); 
    } 

    var rangeStart = moment($('#daterange').data('daterangepicker').startDate).unix(); 
    var rangeEnd = moment($('#daterange').data('daterangepicker').endDate).unix(); 
    var shift = 'all'; 
    request = $.ajax({ 
     url: "report_availability.php", 
     type: "post", 
     data: { 
      rangeStart: rangeStart, 
      rangeEnd: rangeEnd, 
      shift: shift 
     } 
    }); 

    request.done(function (response, textStatus){ 
     drawChart(response); 
    }); 

    request.fail(function (textStatus, errorThrown){ 
     // Log the error to the console 
     console.error(
      "The following error occurred: "+ 
      textStatus, errorThrown 
     ); 
    }); 

    request.always(function() { 
     console.log('request finished'); 
    }); 
}); 

function drawChart(data) { 
    var dates = []; 
    var shift1Score = []; 
    var shift2Score = []; 
    for(var i in data) { 
     var found = jQuery.inArray(data[i].date, dates); 
     if (found < 0) { 
      dates.push(data[i].date); 
     } 
     if(data[i].shift == 'Day Shift') { 
      shift1Score.push(data[i].availability); 
     } else { 
      shift2Score.push(data[i].availability); 
     } 
    } 

    // Destroy the chart if it already exists 
    // NOT WORKING 
    if(myChart!=null){ 
     myChart.destroy(); 
     console.log('destroy'); 
    } 

    var ctx = document.getElementById("myChart").getContext('2d'); 
    ctx.canvas.height = 50; 
    var myChart = new Chart(ctx, { 
     type: 'bar', 
     data: { 
      labels: dates, 
      datasets: [ 
      { 
       label: "Day Shift", 
       backgroundColor: "#3e95cd", 
       data: shift1Score 
      }, { 
       label: "Night Shift", 
       backgroundColor: "#8e5ea2", 
       data: shift2Score 
      } 
      ] 
     }, 
     options: { 
      scales: { 
       yAxes: [{ 
        ticks: { 
         beginAtZero:true 
        } 
       }] 
      }, 
      responsive: true, 
      maintainAspectRatio: false 
     } 
    }); 
} 

：

0 
date "2017-11-20" 
shift "Day Shift" 
availability 100 
1 
date "2017-11-21" 
shift "Day Shift" 
availability 63.63636363636363 
2 
date "2017-11-22" 
shift "Day Shift" 
availability 63.63636363636363 
3 
date "2017-11-23" 
shift "Day Shift" 
availability 63.63636363636363 
4 
date "2017-11-24" 
shift "Day Shift" 
availability 14.285714285714285 
5 
date "2017-11-20" 
shift "Night Shift" 
availability 67.56756756756756 
6 
date "2017-11-21" 
shift "Night Shift" 
availability 67.56756756756756 
7 
date "2017-11-22" 
shift "Night Shift" 
availability 67.56756756756756 
8 
date "2017-11-23" 
shift "Night Shift" 
availability 67.56756756756756 

私のjavascriptのは、このようになります私はそれを再描画すると、ホバーイベントに問題を引き起こす古いチャートの上に再描画されます。私はこの問題を解決するためにchart.update（）を使用しようとしましたが、これは元のデータを置き換える代わりに追加するようです。

編集： - 私はキャンバスを削除してから、新しいキャンバスを作成することによって、問題1を解決した： -

$('#myChart').remove(); 
$('#chartBar').append('<canvas id="myChart"></canvas>'); 

問題2：あり5件までいつか..以上の2つのシフトであると私はしたくありませんこれらのすべてをハードコードします。どのように多くのシフトが配列に返されるかに応じて各データセットを描画したいと思いますが、PHPまたはJavaScriptの配列構造を変更することはできますが、正しい配列構造体や動的データセット配列を作成する方法チャート。

2つのシフトのために、このようなチャートを出力する必要があり：

すべてのヘルプは、私はあなたが持っている同じ問題を抱えていた偉大なおかげ

Answer 1

だろう。私は2つの機能を使用していますグラフを更新するために

：

は現在、グラフ内のすべてのデータセットを削除します。

function removeDataset(chart) { 
    chart.data.datasets = []; 
}; 

は、グラフに新しいデータセットを追加します。

function addDataset(chart, name, data, background, border, fill) { 
    var newDataset = { 
     label: name, 
     data: [], 
     backgroundColor: background, 
     borderColor: border, 
     fill: fill 
    }; 
    for (var index = 0; index < data.length; ++index) { 
     newDataset.data.push(data[index]); 
    } 
    chart.data.datasets.push(newDataset); 
}; 

ので、 、私は、このように使用する：私は、このように使用すると、アヤックスがある：

removeDataset(ctx1); 
addDataset(ctx1, "Dataset Name", resp.dataset_data_json, "#007bff", "#007bff", true); 
ctx1.update(); 

グラフを宣言するために、私が使用します。

var ctx1; 
$(document).ready(function() { 
    var canvas1 = $("#canvas1")[0]; 
    canvas1.height = "300";    
    ctx1 = new Chart(canvas1, config_ctx1); 
}); 

私はそれが役に立てば幸い。