csvファイルをjQueryにロードしていますか？

Question

jQueryのフロートグラフのソースデータとして使用したいCSVファイルがあります。

はI必要があります。

1. は直接CSVファイルをロードするjQueryプラグインを探しますか？
2. CSVファイルをJSONに変換して代わりに使用しますか？
3. 完全に異なるものを実行しますか？

外部のCSVファイルに対処できるjQueryプラグインが見つかりませんでしたが、何か不足している可能性があります。

Answer 1

jQuery CSVプラグインを使用して配列を取得します。チャートを必要とするが、配列をビルド/ソートする。

jQuery CSV Plugin

ちょうどあなたがjQueryを使ってフラットCSVファイルを読み込むことを考えてすることができる私に発生しました。それは可能ではありません。ファイルシステムへのjavascriptアクセスを与えることは恐ろしいアイデアのように聞こえる。しかし、いつでも$.get()を使ってサーバー上のファイルを読み込むことができます。あなたはちょっとした工夫を採用する場合

Answer 2

ませんサーバーに必要な...

これは、サーバーなしに達成することができます。

あなたは2つのことが必要になります：

jqueryの-CSVパーサライブラリはRFC 4180準拠したCSVを解析に特化しjQuery-CSVライブラリ可能HTML5 File APIあるブラウザ、 CSVデータをJavaScriptデータに変換するだけでなく、多くの機能を備えています。このデモンストレーションでは、次の2つの機能を使用します。

最初はtoArrays（）メソッドです。これは、複数行のCSV文字列を取り、2D配列に変換します。

2番目は、出力（すべての文字列）をスカラー（つまり整数/浮動小数点）データに自動的に変換するユーザー定義のパーサーフックです。基本的には、関数コールバックを使用することで、パーサに追加処理をインライン化することができます。

文字列変数にCSVデータを割り当てたら、JavaScriptデータへの変換は非常に簡単です。

var csv = "" // this is the string containing the CSV data 
var data = $.csv.toArray(csv, { 
    onParseValue: $.csv.hooks.castToScalar 
}); 

これはすべてCSV解析のステップです。

---

Flotは、各2D配列に独立したデータセットが含まれている2D配列の配列を想定しています。あなたのデータを構築するには

は、最初に空の配列を作成します。各データのためにその後

var flotData = []; 

をあなたは単にコレクションにデータセットを追加CSVを使用して生成する設定。

var flotData.push(data); 

ファイルをロードするために非同期コールバックを使用するため、HTML5によるファイル処理は難題です。つまり、返信文はありません。物事を単純にするために、私はフロートプロットをグローバルオブジェクトにします。

まず$（ドキュメント）.ready（）中プロットを初期化：

var data = []; 
flot = $.flot($('#plotdiv'), data, options); 

注：グラフを初期化することができるように、ダミーデータオブジェクトが付加されます。

次に、ファイルハンドラを追加します。

// handles csv files 
function handleFileSelect(evt) { 
    var files = evt.target.files; // FileList object 

    // reset the flot dataset 
    flot.setData([]); 
    for(var i=0, len=files.length; i<len; i++) { 
    flotFileData(files[i], i); 
    } 
} 

が、これは一または-以上CSVデータファイルを読み込むことができているとします。これは、ファイルダイアログからファイルを選択した後に呼び出されます。ファイルダイアログが実行されるたびに新しく開始したいので、データは空にリセットされます（つまり[]）。それ以外の場合は、前のデータセットに追加されます。ファイル経由

この意志サイクルはと..ファイルダイアログで選択したファイルごとに（）

をflotFileDataを呼び出すには、ここでは、ファイルのオープン、コールバックを処理するためのコードです：

function flotFileData(file, i) { 
    var reader = new FileReader(); 
    reader.readAsText(file); 
    reader.onload = function(event){ 
    var csv = event.target.result; 
    var newData = $.csv.toArrays(csv, { 
     onParseValue:$.csv.hooks.castToScalar 
    }); 
    var data = flot.getData(); 
    data[i] = newData; 
    flot.setData(data); 
    flot.setupGrid(); 
    flot.draw(); 
    }; 
    reader.onerror = function(){ alert('Unable to read ' + file.fileName); }; 
} 

このファイルをプレーンテキストとして読み込み、event.target.resultでコンテンツを利用できるようにします。 CSVパーサーは、CSVを2次元配列形式のスカラーデータに変換します。複数のデータセットをスタックするには、既にプロット内にあるデータに追加する必要があるため、まずflot.getData（）を使用して既存のデータを保存する必要があります。新しいデータを追加し、flot.setData（）で設定し、最後にプロットを再描画します。

注：グラフの範囲を再計算する必要がない場合は、flot.setupGrid（）呼び出しをスキップできます。

理想的には、再描画はファイルロードフェーズごとに1回しか行われませんが、このデモはまだ最適化されていません。つまり、グラフは読み込まれたすべてのファイルに対して再描画されます（間違いなく理想的ではありません）。

実際に見たい場合は、jquery-csvプロジェクトの「Flot Demonstration」をご覧ください。 analytics1.csvとanalytics2.csvの両方のデータセットを読み込んで、両方のグラフがどのようにオーバーレイされているかを確認することをおすすめします。

CSVファイルを読み込むためにサーバー側のルートに移動する場合は、テキストエリアからCSVをロードする方法を示すより基本的な例もあります。

免責事項：私はjquery-csvの著者です。

更新：原因はGoogle Codeのシャッターに

、jquery-csv has been moved to GitHub