web-dev-qa-db-ja.com

Google Chart APIでX軸の日付を使用する方法は？

X軸の値が月の日になるように、GoogleチャートAPIでチャートをプロットする方法はありますか？

同じ頻度で提供されないデータポイントがあります。例えば：

Date - Value
1/1/2009 - 100
1/5/2009 - 150
1/6/2009 - 165
1/13/2009 - 200
1/20/2009 - 350
1/30/2009 - 500

1か月の時間に基づいて相対的な距離で各データポイントを分離するグラフを作成したいと思います。これはExcelで実行できますが、Googleグラフで計算して表示するにはどうすればよいですか？

GoogleチャートやASP.NETで使用できる無料のライブラリに類似した他の無料のソリューションも歓迎します。

javascriptasp.netvb.netgoogle-visualization
37
jvanderh

[〜＃〜] update [〜＃〜]これは、高度なグラフ「注釈付きグラフ」機能を使用して、グラフAPIで直接サポートされるようになりました-- https://developers.google.com/chart/interactive/docs/gallery/annotationchart

私はこれをやった ReHashデータベース統計 チャート（日付が等間隔であることが判明したにもかかわらず、これが行われていることを正確に示していません）。

まず、全体の期間を取得します。これは、チャートの幅全体に類似しています。これを行うには、最新の日付から最も古い日付を減算します。 Unix-Epochタイムスタンプは整数であり、この方法で比較しやすいため、使用することを好みますが、秒数などを簡単に計算できます。

次に、データをループします。日付ごとに、日付が最初からの全期間のパーセンタイルが必要です（つまり、最も早い日付が0で、最新の日付が100です）。日付ごとに、最初にデータセットの最も早い日付から現在の日付の距離を計算します。本質的に、「最初からどれくらい離れているか」。したがって、現在の日付から最も早い日付を減算します。次に、パーセンタイルを見つけるために、現在の日付の距離を全体の期間、その後、100を乗算し、小数を切り捨てまたは丸めて、積分x-coordinateを求めます。

そして、それはそれと同じくらい簡単です！ x値の範囲は0（グラフの左側）から100（右側）で、各データポイントは実際の時間的距離の開始点からの距離にあります。

ご質問がある場合は、お気軽にお問い合わせください！必要に応じて、擬似コードまたはPHPを投稿できます。

20
defines

私は同じ問題を抱えていましたが、Google Chartで 散布図 が見つかりました、それはまさに必要なことをします。

ここに私が終わったコードがあります（出発点として彼らのものを取りました）：

function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Quantity');
    data.addRow([new Date(2011, 0, 1), 10])
    data.addRow([new Date(2011, 1, 1), 15])
    data.addRow([new Date(2011, 3, 1), 40])
    data.addRow([new Date(2011, 6, 1), 50])


    // Create and draw the visualization.
    var chart = new google.visualization.ScatterChart(
        document.getElementById('visualization'));
    chart.draw(data, {title: 'Test',
                      width: 600, height: 400,
                      vAxis: {title: "cr", titleTextStyle: {color: "green"}},
                      hAxis: {title: "time", titleTextStyle: {color: "green"}},
                      lineWidth: 1}
              );
}

月は0からカウントされるように見えることに注意してください。つまり、1月は0、2月は1、...、12月は11です。

11
egor83

高度なグラフでこれを実行できるようになりました：

http://code.google.com/apis/visualization/documentation/gallery/annotatedtimeline.html

8
Brian Adkins

これはGoogleチャートで非常に簡単に行うことができますが、アプリケーションはラベルを計算する必要があります

Chxl chart x labelパラメーターが必要です。次の例では、y軸に50ステップの数字でラベルを付け、下部に日付を付けます

chxl=0:|0|50|100|150|200|250|300|350|400|450|500|1:|16/01/2009|26/01/2009|6/02/2009
1
David Snabel-Caunt

ハイ。私はあなたと同じ線に沿って考えています。ラベルが互いに上書きする問題を予見でき、2つのアプローチしか考えられません。

1）形式（月/火、月/火、1月1日、2月1日、1月1日、2月29日、2010年2月14日など）に応じて、各日付の文字数を計算し、ラベルの数を計算するグラフの幅に合わせて調整できます（ピクセル単位のchar幅（固定フォントの場合は簡単）、またはいくつかの試行錯誤を含む、厄介な場合があります）。

もちろん、ラベルは任意のデータと直接一致する場合があります。

2）複数のX軸ラベルを使用して、日付を垂直に配置します。

0
Mawg