Flot mit Datum?

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

  • 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:

    Source Code

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

    Source Code

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

    einfach nur:

    Source Code

    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

    Source Code

    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):

    Source Code

    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 }
    Display All
  • 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

    Source Code

    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:

    Source Code

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


    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.

    Source Code

    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. }
    28. // hard-code color indices to prevent them from shifting as
    29. // countries are turned on/off
    30. var i = 0;
    31. $.each(datasets, function(key, val) {
    32. val.color = i;
    33. ++i;
    34. });
    35. // insert checkboxes
    36. var choiceContainer = $("#choices");
    37. $.each(datasets, function(key, val) {
    38. choiceContainer.append('<br/><input type="checkbox" name="' + key +
    39. '" checked="checked" id="id' + key + '">' +
    40. '<label for="id' + key + '">'
    41. + val.label + '</label>');
    42. });
    43. choiceContainer.find("input").click(plotAccordingToChoices);
    44. function plotAccordingToChoices() {
    45. var data = [];
    46. choiceContainer.find("input:checked").each(function () {
    47. var key = $(this).attr("name");
    48. if (key && datasets[key])
    49. data.push(datasets[key]);
    50. });
    51. if (data.length > 0)
    52. $.plot($("#placeholder"), data, options);
    53. }
    54. plotAccordingToChoices();
    55. });
    Display All


    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