Wie erhalte ich eine genauere Dauer mit der Google Charts Timeline?

Question

Also, ich benutze den folgenden Code, um eine Zeitachse von Google Charts zu erstellen.

google.setOnLoadCallback(drawChart);

function drawChart() {
    var container = document.getElementById("example1");

    var chart = new google.visualization.Timeline(container);

    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: "string", id: "RowName" });
    dataTable.addColumn({ type: "string", id: "Label" });
    dataTable.addColumn({ type: "date", id: "Start" });
    dataTable.addColumn({ type: "date", id: "End" });

    dataTable.addRows([
      ["Row1", "Schritt 1", new Date(2013, 11, 4, 2, 45, 0), new Date(2013, 11, 4, 4, 5, 15)],
      ["Row1", "Schritt 2", new Date(2013, 11, 4, 4, 5, 15), new Date(2013, 11, 7, 8, 34, 55)],
      ["Row1", "Schritt 3", new Date(2013, 11, 7, 8, 34, 55), new Date(2013, 11, 12, 11, 28, 49)],
      ["Row1", "Schritt 4", new Date(2013, 11, 12, 11, 28, 49), new Date(2013, 11, 14, 9, 27, 17)]
    ]);

    var options = {
        timeline: {
            groupByRowLabel: true,
            showRowLabels: true
        }
    };

    chart.draw(dataTable, options);
}

Ich möchte genauer werden mit dem Mouse-Over-Popup-Dauer. Wenn Sie sich Schritt 1 ansehen, steht dort nur Dauer: 1 Tag. Aber wenn Sie den Code betrachten, waren es nur eine Stunde 20 Minuten und 15 Sekunden. Gibt es eine Möglichkeit, dies anzuzeigen?

Link zum laufenden Code: http://jsfiddle.net/ifandelse/FdFM3/

Answer 1

Es ist korrekt, was Benutzer asgallant sagte. Aber trotzdem kannst du einige Informationen bekommen.

Füge ein Element nach deinem Diagramm div hinzu:

Füge einen Event-Listener hinzu, bevor du das Diagramm zeichnest:

google.visualization.events.addListener(chart, 'onmouseover', function (obj) {

    var startDate = dataTable.getValue(obj.row, 2);
    var endDate   = dataTable.getValue(obj.row, 3);

    var timeDiff = Math.abs(startDate.getTime() - endDate.getTime());
    var diffDays = (timeDiff / (1000 * 3600 * 24)); 

    var durationEl = document.getElementById('duration');
    durationEl.innerHTML = 'Dauer: ' + diffDays.toFixed(4);
});

chart.draw(dataTable, options);

Jetzt erhältst du für den 1. Schritt 0.0557. Diese Lösung ist etwas hässlich, aber zumindest bekommst du eine Idee. Du kannst sogar Stunden berechnen, wenn du willst und etwas Styling machen.

Sieh dir das Beispiel bei jsBin an.