Javascript PHP MySQL Флот - PullRequest
Новая
       5

Javascript PHP MySQL Флот

2 голосов
/ 23 декабря 2011

Я столкнулся с новой проблемой, связанной с моей осью X. Мое намерение состояло в том, чтобы вывести ось X, которая указывает время, а ось Y указывает мощность. Я решил использовать time[i] и использовать graph.push([time[i], power[i]). Тем не менее, мой график остается пустым. Я сделал предупреждение для функции вывода, и это был результат, который я получил: 

({1:"14:36", 2:"14:39", 3:"14:42", 4:"14:45", 5:"14:48", 6:"14:51", 7:"14:54", 8:"14:57"})

Это в hour: mins. Что я должен изменить, чтобы получить временную ось X? 

$(function () {
var graph = [];
var power = <?php echo json_encode($data);?>;
var time = <?php echo json_encode($times);?>;
var row = <?php echo json_encode($nrow);?>;
//alert(time.toSource());


for (var i = 1; i < row; i += 1) {

    //var test = time[i];
    //alert(test);
    graph.push([time[i], power[i]]);

}

var plot = $.plot($("#placeholder"),
       [ { data: graph, label: "Power" } ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 25 }


         });

Ответы [ 2 ]

1 голос
/ 23 декабря 2011

Вы должны преобразовать время из часа: минуты в число 

for (var i = 1; i < row; i += 1) {

    //var test = time[i];
    //alert(test);

    var hhmm = time[i].split(":");

    var hh = parseInt(hhmm[0]);
    var mm = parseInt(hhmm[1])/60;
    var tt = hh + mm;

    graph.push([tt, power[i]]);

}

РЕДАКТИРОВАТЬ (Юджин Вонг):

// var options = {// xaxis: {ticks: [[1, время [1]], [2, время [2]], [3, время [3]], [4, время [4]], [5, время [5]], [6, время [6]], [7, время [7]], [8, время [8]]]} //};//alert(options.toSource());

var plot = $.plot($("#placeholder"), 
       [ { data: graph, label: "Power" } ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 25 },
           xaxis: { mode: "time", timeformat:"%hh:%mm" }
           //xaxis: { ticks:[[1,time[1]],[2,time[2]],[3,time[3]],[4,time[4]],[5,time[5]],[6,time[6]],[7,time[7]],[8,time[8]]]}


       });

РЕДАКТИРОВАТЬ (Диод):

Несмотря на то, что ранее я создавал временные диаграммы, на этот раз настройка конфигурации оси X не выполняласьРабота.В любом случае, я исправил это, добавив функцию форматирования тиков.Смотрите код ниже.'graph' - это образец массива данных, который я использовал. 

    var graph = [[14.5, 10], [16.45, 15], [18.45, 20]];


    var plot = $.plot($("#placeholder"),
       [ { data: graph, label: "Power" } ], {
           series: {
               lines: { show: true },
               points: { show: true }
           },
           grid: { hoverable: true, clickable: true },
           yaxis: { min: 0, max: 25 },
           xaxis: {
                        min:14,
                        max:20,
                        tickSize:0.5,
                        tickFormatter: function(value){
                            var hours = Math.floor(value);
                            hours = (hours < 10)?"0"+hours:hours;
                            var minutes = (value - hours) * 60;
                            minutes = (minutes < 10)?"0"+minutes:minutes;
                            return hours + ":" + minutes;
                        }
                     }



         });
0 голосов
/ 23 декабря 2011

Пусть PHP выведет метку времени Javascript вместо уже отформатированной даты / времени.Просто запомните несколько предостережений о временных метках:

  • PHP-метки времени - это секунды, тогда как javascript-метки - миллисекунды, поэтому умножьте их на 1000
  • графиков во времени UTC,поэтому перед выводом
  • может потребоваться преобразовать временную метку в UTC. На веб-сайте flot .

есть хороший пример данных. Не забудьте указатьxaxis: { mode: "time" } в ваших опциях flot.

...