jqplot dateaxisrendered правильное использование

Question

Я опубликовал аналогичную проблему несколько недель назад, но не получил никакого ответа, поэтому я упростил ее сейчас, а также предоставил jsfiddle демо.

В основном я пытаюсь использовать jqplot с датой даты, а также пытаюсь выполнить обмен диаграммой, изменив входные данные.

здесь является jsfddle ссылки

http://jsfiddle.net/shyampurk/JNTsv/2/

Вот мой Javascript

$.jqplot.config.enablePlugins = true; 

     var Graph; 
     var GraphUpdate; 
     var GraphData = []; 
     var interval = 3000; 
     var npoints = 25; 
     var maxIterations = 200; 
     var niters = 0; 



     function BuildDataArray() { 

      GraphData = []; 
     ; 
           GraphData = [[["2013-07-17 21:11:20",2],["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]]]; 


           Graph = $.jqplot('livechart', GraphData, { 

            stackseries : true, 
            seriesDefaults: { 
             showMarker: false, 
             fill: true, 
             fillAndStroke: true 
            }, 
            axes: { 

              xaxis: { 
               //numberTicks:2, 
               //renderer:$.jqplot.DateAxisRenderer, 
               //pad:0, 
               renderer:$.jqplot.DateAxisRenderer, 
               tickOptions: { 
                angle: -30 
               } 

              }, 
              yaxis: { 
               label: 'Call Count', 
               //min:0, 
               //max:30, 
               tickInterval:2, 
               labelRenderer: $.jqplot.CanvasAxisLabelRenderer 
              } 
             }, 
            cursor:{ 
             zoom:true, 
             looseZoom: true 
            } 
           }); 

     } 

     function UpdateDataArray() { 
          var newData = new Array(); 
          newData = GraphData; 

          newData[0].shift(); 


          Graph.series[0].data = newData[0]; 
          //Graph.data[0] = [["2013-07-17 21:12:20",5],["2013-07-17 21:14:20",7]] ; 


          Graph.replot({resetAxes:true}); 


     } 

     function StartGraphLoop() { 
      BuildDataArray(); 

      GraphUpdate = setInterval(UpdateGraph, interval); 
     } 


     function UpdateGraph() { 
      UpdateDataArray(); 

     } 

     function StopGraphLoop() { 

      clearInterval(GraphUpdate); 
     } 


StartGraphLoop(); 

У меня есть функция StartGraphLoop(), который строит исходный массив данных серии и вычерчивает график. Он также активирует setInterval, который обновляет данные серии и реплицирует график позже.

В моем случае реплика не работает, и jqplot пуст после вызова первого повтора. В примере jsfiddle как начальный график, так и реплика не работают, однако ось обновляется.

Я был бы очень признателен, если кто-то может вести меня с правильным использованием jqplot с dateaxisrendered с Replot

Благодаря

Answer 1

Его не получает обновленные, потому что вы пытаетесь дать обновленные значения на графику с датой/значение времени внутри него. он не понимает эти значения, потому что граф знает каждый тик по оси x на число. как первый тик всегда 1, то 2 и так далее.

Попробуйте использовать хром-отладочный инструмент для наблюдения за тем, что происходит внутри кода, и как график интерпретирует данные, данные ему.

попробовать это: Jsfiddle link

$.jqplot.config.enablePlugins = true; 

var Graph; 
var GraphUpdate; 
var GraphData = []; 
var interval = 3000; 
var npoints = 25; 
var maxIterations = 200; 
var niters = 0; 

function BuildDataArray() { 

    GraphData = []; ; 
    GraphData = [[["2013-07-17 21:11:20", 2], ["2013-07-17 21:12:20", 5], ["2013-07-17 21:14:20", 7]]]; 

    Graph = $.jqplot('livechart', GraphData, { 

      stackseries : true, 
      seriesDefaults : { 
       showMarker : false, 
       fill : true, 
       fillAndStroke : true 
      }, 
      axes : { 

       xaxis : { 
        renderer : $.jqplot.CategoryAxisRenderer, 
        tickOptions : { 
         angle : -30 
        } 

       }, 
       yaxis : { 
        label : 'Call Count', 
        //min:0, 
        //max:30, 
        tickInterval : 2, 
        labelRenderer : $.jqplot.CanvasAxisLabelRenderer 
       } 
      }, 
      cursor : { 
       zoom : true, 
       looseZoom : true 
      } 
     }); 

} 

function UpdateDataArray() { 
    var newData = new Array(); 
    newData = Graph.series[0].data; 

    newData.shift(); 
    newData.push([1,Math.floor((Math.random()*10)+1)]); 
    Graph.series[0].data = newData; 


    Graph.replot({ 
     resetAxes : true 
    }); 

} 

function StartGraphLoop() { 
    BuildDataArray(); 

    GraphUpdate = setInterval(UpdateGraph, interval); 
} 

function UpdateGraph() { 
    UpdateDataArray(); 

} 

function StopGraphLoop() { 

    clearInterval(GraphUpdate); 
} 

StartGraphLoop();