Json to jquery bar chart

Question

Я пытаюсь заполнить данные от json до гистограммы. Я использую that chart и это его структура данных:

var data = { 
labels: ["January", "February", "March", "April", "May", "June", "July"], 
datasets: [ 
    { 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.5)", 
     strokeColor: "rgba(220,220,220,0.8)", 
     highlightFill: "rgba(220,220,220,0.75)", 
     highlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
    }]}; 

, но у меня есть другой формат JSON:

var data = { 
      resultDescription: "SUCCESS", 
      data: [ ["JAN","1048729"], ["FEB","1220608"],["MAR","1299965"],["APR","1288644"],["MAY","1077342"],["JUN","705690"],["JUL","666131"],["AUG","769444"],["SEP","581618"],["OCT","564438"],["NOV","535066"],["DEC","1241228"]]}; 

Так что я подумал, что если я изменю этот формат подобного формата этого графика он будет работа и для этого я разделил этот массив 2d в пределах 2 1d массива, а затем структуру Array, подобный json. JSFIDDLE example which logs that array in console

НО он входит в консоли, а также

Uncaught TypeError: Cannot read property 'length' of undefined

Что случилось?

Answer 1

var data = { 
      resultDescription: "SUCCESS", 
      data: [["JAN","1048729"],["FEB","1220608"],["MAR","1299965"],["APR","1288644"],["MAY","1077342"],["JUN","705690"],["JUL","666131"],["AUG","769444"],["SEP","581618"],["OCT","564438"],["NOV","535066"],["DEC","1241228"]]}; 
var labelsArr = []; 
var dataArr = []; 

$.each(data.data,function(i,v){ 
    labelsArr.push(v[0]); 
    dataArr.push(v[1]); 
}); 

var datas = { 
    labels: labelsArr, 
    datasets: [ 
     { 
      label: "My First dataset", 
      fillColor: "rgba(220,220,220,0.2)", 
      strokeColor: "rgba(220,220,220,1)", 
      pointColor: "rgba(220,220,220,1)", 
      pointStrokeColor: "#fff", 
      pointHighlightFill: "#fff", 
      pointHighlightStroke: "rgba(220,220,220,1)", 
      data: dataArr 
     }, 
    ] 
}; 
    setTimeout(function() { 
     var ctx = $("#barChart").get(0).getContext("2d"); 

     var myBarChart = new Chart(ctx).Bar(datas); 
    }, 1500); 

jsfiddle: http://jsfiddle.net/r3k38d3j/9/

Answer 2

Я чувствую, что вы можете очистить ваш код совсем немного, но только, чтобы заставить его работать, вы должны изменить отображенные данные к этому:

var mappedData = {labels: labelsArr, datasets: [{ data:dataArr} ]}; 

Answer 3

Вы можете сопоставить исходный объект к объекту назначения как это:

var output = { 
    labels: [], 
    datasets: [{ 
    data: [] 
    }] 
}; 

data.data.map(function(dataPoint, index) { 
    output.labels.push(dataPoint[0]); 
    output.datasets[0].data.push(dataPoint[1]); 
}); 

Fiddle: http://jsfiddle.net/r3k38d3j/8/