2012-04-23 10 views
1

FlotチャートとAJAXからのデータに問題があります。基本的にグラフを表示するための配列を作成しましたが、何とか軸ラベルは表示されますがデータは表示されません。また、スタックグラフや棒グラフを行うにはどうしたらいいですか?AJAXデータの棒グラフ

編集:または、誰でも私はX軸上にラベル付きAJAXを使用してフロートでデータを表示する方法を教えてください。ここにコードhttp://jsfiddle.net/DaG5W/284/を見ることができます。誰でも私がここで間違っていることを教えてください?

ここに私が使用したコードがあります。

$.getJSON(url, function(output) { 
    var calendar, count, fieldNames, i, j, values, xAxis; 
    fieldNames = new Array(); 
    i = 0; 
    while (i < output.length) { 
     if (fieldNames.indexOf(output[i].FieldName) < 0) { 
     fieldNames.push(output[i].FieldName); 
     } 
     i++; 
    } 
    calendar = new Array(); 
    i = 0; 
    while (i < output.length) { 
     if (calendar.indexOf(output[i].Calendar) < 0) { 
     calendar.push(output[i].Calendar); 
     } 
     i++; 
    } 
    xAxis = []; 
    i = 0; 
    while (i < calendar.length) { 
     xAxis.push([parseInt(i + 1), calendar[i]]); 
     i++; 
    } 
    data = []; 
    i = 0; 
    while (i < fieldNames.length) { 
     values = []; 
     count = 0; 
     j = 0; 
     while (j < output.length) { 
     if (fieldNames[i] === output[j].FieldName) { 
      count++; 
      values.push([parseInt(count), parseInt(output[j].Totals)]); 
     } 
     j++; 
     } 
     data.push([ 
     { 
      label: fieldNames[i].toString(), 
      data: values, 
      bars: { 
      show: true 
      }, 
      lines: { 
      show: false 
      } 
     } 
     ]); 
    } 
    return i++; 
    }); 
    options = { 
    xaxis: { 
     ticks: xAxis 
    } 
    }; 
    plot = $.plot($("#div"), [data], options); 

} 

答えて

5

あなたは実際の解決策に非常に近いです。あなたの系列オブジェクトの周り[]の必要はありませ

data.push([ 
    { 
     label: fieldNames[i].toString(), 
     data: values, 
     bars: { 
     show: true 
     }, 
     lines: { 
     show: false 
     } 
    } 
    ]); 

:あなたは間違ってやったすべてが巣に2ヶ所のいくつかの非常に多くの配列ではありません。同様に、ここで

plot = $.plot($("#div"), [data], options); 

data周り[]は必要ありません。その後、それはグラフになります。ここをクリックしてください:http://jsfiddle.net/ryleyb/DaG5W/291/

+0

すごくいいです。助けてくれてありがとう – user1284460