Flot mit Datum?

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Flot mit Datum?

    Hallo zusammen,

    ich habe jetzt in meine Seite ein jquery flot eingebunden (code.google.com/p/flot/), klappt auch soweit gut, nur wird kein Datum angezeigt stattdessen irgendwelche zahlen (z.B. "1310000000"). So sieht es aus:




    So sieht der Code aus:

    Quellcode

    1. <?php
    2. echo '<script id="source">
    3. $(function () {
    4. var d = [';
    6. $result=mysql_query("SELECT * FROM tabelle WHERE user=$userid ORDER BY datum ASC");
    8. while($row=mysql_fetch_array($result))
    9. {
    10. $timestamp = strtotime(''.$row[datum].'');
    12. echo '[';
    13. echo $timestamp;
    14. echo ',';
    15. echo $row[wert];
    16. echo '],';
    17. }
    19. echo '];';
    22. echo '
    23. for (var i = 0; i < d.length; ++i)
    24. d[i][0] += 60 * 60 * 1000;
    26. function weekendAreas(axes) {
    27. var markings = [];
    28. var d = new Date(axes.xaxis.min);
    29. d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
    30. d.setUTCSeconds(0);
    31. d.setUTCMinutes(0);
    32. d.setUTCHours(0);
    33. var i = d.getTime();
    34. do {
    35. markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
    36. i += 7 * 24 * 60 * 60 * 1000;
    37. } while (i < axes.xaxis.max);
    39. return markings;
    40. }
    42. var options = {
    43. xaxis: { mode: "time" },
    44. selection: { mode: "x" },
    45. grid: { markings: weekendAreas }
    46. };
    48. var plot = $.plot($("#placeholder"), [{ data: d, label: "Gewicht", color: "green", lineWidth: 12}], [d], options);
    50. var overview = $.plot($("#overview"), [d], {
    51. series: {
    52. lines: { show: true, lineWidth: 1 , fill: true},
    53. shadowSize: 0
    54. },
    55. xaxis: { ticks: [], mode: "time" },
    56. yaxis: { ticks: [], min: 0, autoscaleMargin: 0.1 },
    57. selection: { mode: "x" }
    58. });
    61. $("#placeholder").bind("plotselected", function (event, ranges) {
    62. plot = $.plot($("#placeholder"), [d],
    63. $.extend(true, {}, options, {
    64. xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to }
    65. }));
    67. overview.setSelection(ranges, true);
    68. });
    70. $("#overview").bind("plotselected", function (event, ranges) {
    71. plot.setSelection(ranges);
    72. });
    73. });
    74. </script>';
    Alles anzeigen

  • ich kanns leider immernoch nicht selber testen, aber eventuell kommt strtotime mit dem Attribut nicht klar? Je nachdem ob dein Timestamp als UNIX-Timestamp vorliegt oder als einfaches Datum?
    anstatt:

    Quellcode

    1. $timestamp = strtotime(''.$row[datum].'');

    einfach nur:

    Quellcode

    1. $timestamp = strtotime($row[datum]);


    eine Frage am Rande:
    Was bewirkt diese Zeile (24) bei dir? Ich kapier grad nicht, auf was du da hinauswillst

    Quellcode

    1. d[i][0] += 60 * 60 * 1000;

  • Dein ersten Tipp hatte ich auch schon ausprobiert, gibt leider die gleiche Ausgabe :(

    Die Zeile habe ich hiervon (Kommentierung gerade im Netz gefunden):

    Quellcode

    1. // first correct the timestamps - they are recorded as the daily
    2. 27 // midnights in UTC+0100, but Flot always displays dates in UTC
    3. 28 // so we have to add one hour to hit the midnights in the plot
    4. 29 for (var i = 0; i < d.length; ++i)
    5. 30 d[i][0] += 60 * 60 * 1000;
    6. 31
    7. 32 // helper for returning the weekends in a period
    8. 33 function weekendAreas(axes) {
    9. 34 var markings = [];
    10. 35 var d = new Date(axes.xaxis.min);
    11. 36 // go to the first Saturday
    12. 37 d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
    13. 38 d.setUTCSeconds(0);
    14. 39 d.setUTCMinutes(0);
    15. 40 d.setUTCHours(0);
    16. 41 var i = d.getTime();
    17. 42 do {
    18. 43 // when we don't set yaxis, the rectangle automatically
    19. 44 // extends to infinity upwards and downwards
    20. 45 markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
    21. 46 i += 7 * 24 * 60 * 60 * 1000;
    22. 47 } while (i < axes.xaxis.max);
    23. 48
    24. 49 return markings;
    25. 50 }
    Alles anzeigen

  • Zeig doch mal deinen geänderten Code. Ich habs ausprobiert und vince hat die die Antwort eigentlich schon gepostet.
    Und hast du den Zeitstempel mit tausend multipliziert?

    Siehe dazu auch flot.googlecode.com/svn/trunk/API.txt Kapitel Time Series Data
    Time series data
    ================

    Time series are a bit more difficult than scalar data because
    calendars don't follow a simple base 10 system. For many cases, Flot
    abstracts most of this away, but it can still be a bit difficult to
    get the data into Flot. So we'll first discuss the data format.

    The time series support in Flot is based on Javascript timestamps,
    i.e. everywhere a time value is expected or handed over, a Javascript
    timestamp number is used. This is a number, not a Date object. A
    Javascript timestamp is the number of milliseconds since January 1,
    1970 00:00:00 UTC. This is almost the same as Unix timestamps, except it's
    in milliseconds, so remember to multiply by 1000!

    You can see a timestamp like this

    alert((new Date()).getTime())


    Hier meine Lösung in der fiddle

    Quellcode

    1. var data = [[1325349710000,49],[1325436110000,36],[1325522510000,25],[1325608910000,16],[1325695310000,9]];
    2. $.plot($("#placeholder"), [data], {
    3. xaxis: {
    4. mode: "time",
    5. timeformat: "%d.%m.%y"
    6. }
    7. });


    [jsfiddle]TorbenBrodt/5NqD8/3[/jsfiddle]

  • Dankeschön! Dein Script funktioniert aber komischerweise nur mit deinen Werten und ich finde meinen Fehler nicht? Wie kommst du auf deine Timestamps?

    Folgende Werte liegen beispielsweise in der Datenbank vor:
    2012-01-04 27.9
    2012-01-05 27.4
    2012-01-06 56.2
    2012-01-07 97.1
    2012-01-08 107

    Der Code zur Ausgabe lautet wie oben schon gezeigt:

    Quellcode

    1. echo '<script id="source">
    2. $(function () {
    4. var data = [';
    6. $result=mysql_query("SELECT * FROM tabelle WHERE user=$userid ORDER BY datum DESC LIMIT 5");
    8. while($row=mysql_fetch_array($result))
    9. {
    10. $timestamp = strtotime($row[datum]);
    12. echo '[';
    13. echo $timestamp;
    14. echo ',';
    15. echo $row[wert];
    16. echo '],';
    17. }
    19. echo '];';
    21. echo '
    22. $.plot($("#placeholder"), [data], {
    23. xaxis: {
    24. mode: "time",
    25. timeformat: "%d.%m.%y"
    26. }
    27. });
    28. });
    29. </script>';
    Alles anzeigen


    Lass ich mir das Ergebnis ausgeben bekomme ich folgende Ausgabe im Code:
    var data= [[1325977200,107],[1325890800,97.1],[1325804400,56.2],[1325718000,27.4],[1325631600,27.9]];

    Dann habe ich mal bei einem Generator überprüfen lassen, ob ein Timestamp (Beispielsweise "1325977200") überhaupt korrekt ist. Laut aritso.net/index.php ist 1325977200 = 08.01.2012 um 00:00:00 Uhr - Würde also logischerweise klappen.

    Angezeigt wird jedoch folgendes:


    Was mache ich falsch?

  • Siehe dazu flot.googlecode.com/svn/trunk/API.txt Kapitel Time Series Data

    The following
    specifiers are supported

    %h: hours
    %H: hours (left-padded with a zero)
    %M: minutes (left-padded with a zero)
    %S: seconds (left-padded with a zero)
    %d: day of month (1-31), use %0d for zero-padding
    %m: month (1-12), use %0m for zero-padding
    %y: year (four digits)
    %b: month name (customizable)
    %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
    %P: AM/PM (uppercase version of %p)

    Inserting a zero like %0m or %0d means that the specifier will be
    left-padded with a zero if it's only single-digit. So %y-%0m-%0d
    results in unambigious ISO timestamps like 2007-05-10 (for May 10th).

    You can customize the month names with the "monthNames" option. For
    instance, for Danish you might specify:

    monthNames: ["jan", "feb", "mar", "apr", "maj", "jun", "jul", "aug", "sep", "okt", "nov", "dec"]

  • Dieser Beitrag hier hat auch mir geholfen... nur mein Datum wird nicht sortiert...

    Moin moin,

    ich habe eine Grafik gebaut, die mir Kennzahlenwwerte darstellt, sie sollten nach Monat-Jahr (11-2012, 10-2012, 09-2012, ...) sortiert ausgegeben werden,
    er sortiert mir allerdings nach den Werten.

    Quellcode

    1. $(function () {
    2. var datasets = {
    3. "Kordfriesland": {
    4. label: "Kordfriesland",
    5. data: [[1351724400000, 0.301], [1349046000000, -2.41], [1346454000000, -1.416], [1343775600000, -2.01], [1341097200000, -1.132], [1338505200000, -1.157], [1335826800000, -1.365], [1333234800000, -0.497], [1330556400000, 1.047], [1328050800000, 4.453], [1325372400000, 16.03], [1322694000000, 11.259], [1320102000000, 13.089]]
    6. },
    7. "Dithmarschen": {
    8. label: "Dithmarschen",
    9. data: [[1351724400000, 1.33], [1349046000000, 2.836], [1346454000000, 2.272], [1343775600000, 1.102], [1341097200000, 1.314], [1338505200000, 1.188], [1335826800000, -0.281], [1333234800000, -0.383], [1330556400000, 0.713], [1328050800000, 0.627], [1325372400000, 0.225], [1322694000000, -2.486], [1320102000000, -2.916]]
    10. },
    11. "Schleswig-Flensburg": {
    12. label: "Schleswig-Flensburg",
    13. data: [[1351724400000, 1.541], [1349046000000, 2.335], [1346454000000, 1.367], [1343775600000, 1.346], [1341097200000, 1.752], [1338505200000, 3.329], [1335826800000, 2.8], [1333234800000, 3.139], [1330556400000, 3.956], [1328050800000, 4.675], [1325372400000, 6.725], [1322694000000, 3.843], [1320102000000, 3.447]]
    14. },
    15. };
    16. var options = {
    17. canvas: true,
    18. xaxes: [ { mode: "time", timeformat: "%0m-%y"} ],
    19. yaxes: [ { min: -5 }, {
    20. position: "right",
    21. alignTicksWithAxis: 1,
    22. tickFormatter: function(value, axis) {
    23. return value.toFixed(axis.tickDecimals);
    24. }
    25. } ],
    26. legend: { position: "nw" }
    27. }
    29. // hard-code color indices to prevent them from shifting as
    30. // countries are turned on/off
    31. var i = 0;
    32. $.each(datasets, function(key, val) {
    33. val.color = i;
    34. ++i;
    35. });
    37. // insert checkboxes
    38. var choiceContainer = $("#choices");
    39. $.each(datasets, function(key, val) {
    40. choiceContainer.append('<br/><input type="checkbox" name="' + key +
    41. '" checked="checked" id="id' + key + '">' +
    42. '<label for="id' + key + '">'
    43. + val.label + '</label>');
    44. });
    45. choiceContainer.find("input").click(plotAccordingToChoices);
    47. function plotAccordingToChoices() {
    48. var data = [];
    50. choiceContainer.find("input:checked").each(function () {
    51. var key = $(this).attr("name");
    52. if (key && datasets[key])
    53. data.push(datasets[key]);
    54. });
    56. if (data.length > 0)
    57. $.plot($("#placeholder"), data, options);
    58. }
    60. plotAccordingToChoices();
    61. });
    Alles anzeigen


    Dann würde ich auch noch gerne den Abstand zwischen den Monaten verkleinern, es wird zur Zeit sehr weit auseinander dargestellt... (passt dann nicht 12 Monate hin!).

    Ich hoffe hier kann mir jemand helfen...

    cu