Как использовать даты по оси X с API Google Chart?

Question

Есть ли способ построить диаграмму с помощью Google chart API, чтобы значения по оси X были днями в месяце?

У меня есть данные, которые не имеют одинаковую частоту. Например:

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

Я хочу создать диаграмму, которая будет разделять каждую точку данных с относительным расстоянием, основанным на времени в течение месяца. Это можно сделать с помощью Excel, но как я могу рассчитать и отобразить его с помощью диаграммы Google?

Также приветствуются другие бесплатные решения, подобные диаграммам Google или бесплатной библиотеке, которая может использоваться с ASP.NET.

Answer 1

ОБНОВЛЕНИЕ Это теперь поддерживается непосредственно в API-интерфейсе диаграммы с использованием расширенной функции «аннотированный график» - https://developers.google.com/chart/interactive/docs/gallery/annotationchart

Я сделал это на моем Статистика базы данных ReHash (даже несмотря на то, что даты оказались равномерно распределенными, поэтому это не совсем показывает, что это происходит).

Сначала вы хотите получить общий период времени , который будет аналогичен общей ширине вашего графика. Для этого мы вычитаем самую раннюю дату из самой последней. Я предпочитаю использовать временные метки эпохи Unix, так как они являются целыми числами и их легко сравнивать, но вы можете легко рассчитать количество секунд и т. Д.

Теперь переберите ваши данные. Для каждой даты мы хотим получить процентиль в общем периоде, в котором дата начинается с начала (т.е. самая ранняя дата равна 0, самая поздняя - 100). Для каждой даты сначала необходимо вычислить расстояние от текущей даты от самой ранней даты в наборе данных. По сути, «как далеко мы с самого начала». Итак, вычтите самую раннюю дату из текущей даты. Затем, чтобы найти процентиль, мы делим расстояние текущей даты на общий период времени , а затем умножаем на 100 и усекаем или округляем любое десятичное число, чтобы получить наш интеграл координаты х .

И это так просто! Ваши значения x будут в диапазоне от 0 (левая сторона диаграммы) до 100 (правая сторона), и каждая точка данных будет находиться на расстоянии от начала, соответствующем истинному временному расстоянию.

Если у вас есть какие-либо вопросы, не стесняйтесь спрашивать! При желании я могу опубликовать pesudocode или PHP.

Answer 2

У меня была такая же проблема, нашел точечные диаграммы в Google Charts, он делает именно то, что нужно.

Вот код, с которым я закончил (взяли их в качестве отправной точки):

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, т. Е. Январь равен 0, февраль равен 1, ..., декабрь равен 11.

Answer 3

Похоже, что теперь вы можете сделать это с помощью расширенных графиков:

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

Answer 4

Это можно сделать с помощью карт 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

Answer 5

Hai. Я думаю в том же духе, что и вы. Я могу предвидеть проблемы, когда метки перезаписывают друг друга, и могу придумать только два подхода.

1) определите, сколько символов в каждой дате, в зависимости от формата (понедельник / вторник, понедельник / вторник, 1 января / 1 февраля, 1 января, 29 февраля, 14/2/2010 .. и т. Д.), А затем рассчитайте сколько меток вы можете разместить по всей ширине диаграммы (что может оказаться грубым, включая ширину символа в пикселях (проще для фиксированных шрифтов) или всего несколько проб и ошибок).

Конечно, ваши ярлыки могут быть выровнены напрямую с любыми данными.

2) используйте несколько меток оси X и размещайте даты вертикально.