Как использовать значения Date в диаграммах, созданных с помощью gRaphael?

Question

Маленькая предпосылка: Я на диете и пытаюсь составить график потери веса.

Для этого я использую небольшое приложение django для хранения показаний весов и gRaphael (http://g.raphaeljs.com/) библиотеку диаграмм для рисования отчетов). Вы можете посмотреть здесь: http://www.totanus.net/weight/

В настоящее время я печатаю даты по оси X в формате 'ymd', чтобы упорядочить их должным образом, но я не совсем удовлетворен (на самом деле я даже не уверен, что диаграмма верна вообще ... ) и мне интересно, есть ли лучший способ сделать даты.

Основные вопросы:

1. Есть ли способ использовать разные этикетки, отличные от «100610» или '20100610'?
2. Есть ли способ установить фиксированные метки оси X и Y каждый н-дней или н-кг?
3. Можете ли вы предложить мне лучшую практику в рендеринге такого рода диаграммы (мне особенно интересно вычислять мою общую тенденцию)

Заранее спасибо за любую помощь!

Teo

Answer 1

Учитывая x, который является Date объектом, я смог достичь этого, используя следующие шаги:

1. Возьмите самое низкое значение Date и кешируйте значение его getTime() метода в переменной (originX)

2. Для каждого Date (curDate) преобразовать его во временное смещение из originX.

   var timePassed = curDate.getTime() - originX
   

3. Участок x против y.

Выше приведен график, где метки указаны в миллисекундах от времени UTC. Чтобы он выглядел красиво, делайте так, как предлагает @Alastair.

Вот пример кода jQuery. (Обратите внимание, что вам нужно будет предоставить функцию formatDate() для правильного отображения дат)

$.each(chart.axis[0].text.items, function(i, label) {
    var old = label.attr("text");
    if(old) {
        var newLabel = formatDate(originX + x);
        if(newLabel) {
            label.attr({ text: newLabel });
        }
    }
});

Надеюсь, это поможет!

Answer 2

Я не тестировал этот код, но изучал ту же проблему.

Если вы храните целочисленное представление времени (отметки начиная с 01.01.1970) в качестве значений по оси X, вы можете перебирать значения и преобразовывать их в даты.

Я получил эту идею от: http://github.com/DmitryBaranovskiy/g.raphael/issues#issue/8

var canvas = Raphael("holder")
graph = canvas.g.linechart(....)

$.each(this.graph.axis[0].text.items, function (index,label) {
    originalText = label.attr('text'); 
    newText = /* some transformation to originalText */
    label.attr({'text': newText});
});

Где ваш newText представляет собой преобразование из исходного текстового значения (которое является вашим временем в тиках) в строку даты.

Как я уже сказал, я не тестировал этот код, но идея теоретически обоснована.

Answer 3

Я нуб, это то, что я нашел из кода.

graph.axis[0].text.items[0].attr({'text': "Jan 3 2010"}) ;

Answer 4

См. Также: вторая часть http://weblog.bocoup.com/alternate-x-axis-intervals-in-g-raphael-js-linechart. Это то же самое, что решение Аластера, но иногда помогает объяснить то же самое по-другому.