ajaxを使いグラフを再描画できない

Question

laravelで開発をしております。
ajaxでとってきた値を、Chart.jsに渡し、グラフを再描画しようとしていますが、真っ白になり何も表示されません。

まず、画面読み込み時では、
$(document).ready(function(){
var doughnutData = [{!! $data['graph2'] !!}];
var myDoughnut = new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
});

として、ドーナツグラフが表示されます。

そして、okBtnをクリックすると、選択データが指定urlにpostされ、データをとってきます。
console.logに表示すると、確かにデータは取れています。
ですが、画面にはドーナツグラフが表示されません。
$('.okBtn').on('click', function(){
var url = $('#actionUrl').text();
var column = $('[name=column]:checked').val();
var get_data="";
$.ajax({
type: "POST",
url: url,
data: {"column":column},
success: function(data, dataType)
{
get_data = data;
console.log(get_data);
var doughnutData = [get_data];
var myDoughnut = new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
}
});
});

試しに、
var doughnutData = [get_data];
上記のget_data部分をconsole.logで表示された値に変更すると、グラフは表示されます。
ただ、グラフの上にマウスポインタが乗ると、画面読み込み時のグラフが一瞬表示されたりするので、挙動はおかしいのですが。。。

そもそもグラフを描画する部分が二つあることがおかしいのでしょうか？
エラーも出ないので、途方に暮れています。
有識者の方、どうぞよろしくお願い致します。

Answer 1

ajaxでとってくる値をデータの羅列（1,2,3,5:10,20,30...）などの形にし、jquery側で再形成し、Chart.jsに渡すことで動くようになりました。

          $.ajax({
                      type: "POST",
                      url: url,
                      data: {"column":column,"type":type},
                      success: function(data)
                      {
                        //alert(data);
                       get_data = data;
                        var colors = ["#1d2b38","#2b4055","#385572","#476a8d","#5580aa","#7295b8","#8daac7","#aabfd5","#c7d5e2","#e2eaf1"];
                        var datas = get_data.split(":");
                        var vals = datas[0].split(",");
                        var labels = datas[1].split(",");
                        $('#chart_view').html("<canvas id='doughnut' height='200' width='200'></canvas>");
                        var doughnutData = [];
                        for (var i=0;i<vals.length;i++){
                          doughnutData.push({label:labels[i],value:vals[i],color:colors[i]});
                        }
                        var myDoughnut = new Chart(document.getElementById("doughnut").getContext("2d")).Doughnut(doughnutData);
                      }
            });

Answer 2

console.log(get_data); 
var doughnutData = [get_data]; 

console.logで出力したデータは

[aaa:123,bbb:345]みたいになってませんか？
なっているようなら、

var doughnutData = get_data; 

でよさそうだけど。

Comments

[mizutama72]

shi_ueさま

ご回答ありがとうございます。
console.logで出力したデータは、
{label:'43.9-53.46',value:7.1,color:'#1d2b38'},{label:'53.46-63.02',value:2.4,color:'#2b4055'},...
という文字列です。
var doughnutData = get_data;
とやってみましたが、グラフは表示されず、エラーも表示されませんでした。