рендеринг в реальном времени с использованием JSPlot

Я начал использовать JQPlot для рисования графика в режиме реального времени. У меня есть один пример, образец, работающий в котором он будет рисовать график с двумя данными только-рендеринг в реальном времени с использованием JSPlot

var storedData = [70, 10];

Затем я добавил кнопку, если нажать на эту кнопку, он начнет рендеринг еще некоторые данные. В принципе, вы можете сказать точно так же, как данные в реальном времени с сервера.

Но проблема, с которой я столкнулся сейчас, - это как только я нажал на кнопку Start Updates, она ничего не рисует. Поэтому я верю, что я перепутал что-то с кнопкой. Я долго работал над Javascript и HTML, поэтому я забыл много вещей.

Ниже мой код-

<!DOCTYPE html> 

<html> 
<head> 

    <title>Line Charts and Options</title> 

    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" /> 
    <link rel="stylesheet" type="text/css" href="examples.min.css" /> 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" /> 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" /> 

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]--> 
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


</head> 
<body> 
    <div class="colmask leftmenu"> 
     <div class="colleft"> 
     <div class="col1" id="example-content"> 

<div id="chart1" style="height: 300px; width: 500px; position: relative;"></div> 
<button>Start Updates</button> 



<script class="code" type="text/javascript"> 
$(document).ready(function(){ 
    var storedData = [70, 10]; 
    var plot1; 
    renderGraph(); 


$('button').click(function(){ 
    doUpdate(); 
    $(this).hide(); 
}); 

function renderGraph() { 
    if (plot1) { 
     plot1.destroy(); 
    } 
    plot1 = $.jqplot('chart1', [storedData]); 
} 

var newData = [9, 1, 4, 6, 8, 2, 5]; 


function doUpdate() { 
    if (newData.length) { 
     var val = newData.shift(); 
     $.post('/echo/html/', { 
      html: val 
     }, function(response) { 
      var newVal = new Number(response); /* update storedData array*/ 
      storedData.push(newVal); 
      renderGraph(); 
      log('New Value '+ newVal+' added') 
      setTimeout(doUpdate, 3000) 
     }) 

    } else { 
     log("All Done") 
    } 
} 

function log(msg) { 
$('body').append('<div>'+msg+'</div>') 
} 
}); 
</script> 


    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script> 

    <script class="include" type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script> 
    <script class="include" type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 


</body> 


</html>

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

Я попытался сделать это рендеринг в реальное время работы вещи из этого jsfiddle

я скопировал же кучу кода из выше JSFiddle в моем HTML, но это не работает для меня. Может ли кто-нибудь помочь мне в этом?

источник

2013-04-17 ferhan

Какое сообщение, если оно есть, вы видите на своей консоли javascript? – Fergus

@ Fergus, я не вижу никакого сообщения. Я считаю, что я перепутал с тем, как работает кнопка, и с тем, как я добавил в тег скриптов. – ferhan

Здесь вы идете - вам нужно будет обновить ваше местоположение jqplot в тегах скриптов. Кроме того, мне пришлось изменить doUpdate на doUpdate2, поскольку $ .post не будет работать без jfiddle, насколько я знаю.

<!DOCTYPE html> 

<html> 
<head> 

    <title>Line Charts and Options</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script type="text/javascript" src="jqplot/jquery.jqplot.min.js"></script> 
    <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> 
    <script type="text/javascript" src="jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script> 
    <script type="text/javascript" src="jqplot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script> 
    <script type="text/javascript" src="jqplot/plugins/jqplot.cursor.min.js"></script> 
    <script type="text/javascript" src="jqplot/plugins/jqplot.pointLabels.min.js"></script> 
    <script type="text/javascript" src="jqplot/plugins/jqplot.highlighter.min.js"></script> 
    <script type="text/javascript"> 



     $(function(){ 

       /* store empty array or array of original data to plot on page load */ 

        var storedData = [70, 10]; 

        /* initialize plot*/ 

        var plot1; 
        renderGraph(); 

        $('button').click(function(){ 
        doUpdate2(); 
        $(this).hide(); 
        }); 

        function renderGraph() { 
        if (plot1) { 
         plot1.destroy(); 
        } 
        plot1 = $.jqplot('chart1', [storedData]); 
        } 

        var newData = [9, 1, 4, 6, 8, 2, 5]; 
        var cp = 0; 
        function doUpdate2() { 
         var newVal = new Number(newData[cp]); /* update storedData array*/ 
         storedData.push(newVal); 
         renderGraph(); 
         log('New Value '+ newVal+' added') 
         if (cp < newData.length-1) setTimeout(doUpdate2, 3000) 
         cp++; 
        } 

        function doUpdate() { 
        if (newData.length) { 
         var val = newData.shift(); 
         $.post('/echo/html/', { 
         html: val 
         }, function(response) { 
         var newVal = new Number(response); /* update storedData array*/ 
         storedData.push(newVal); 
         renderGraph(); 
         log('New Value '+ newVal+' added') 
         setTimeout(doUpdate, 3000) 
         }) 

        } else { 
         log("All Done") 
        } 
        } 

        function log(msg) { 
        $('body').append('<div>'+msg+'</div>') 
    } 

     }); 



    </script> 


</head> 
<body> 
    <div id="chart1" style="height: 300px; width: 500px; position: relative;"></div> 
    <button>Start Updates</button> 

</body> 

</html>

источник

2013-04-17 05:47:36 Fergus

Yup..Thanks Fergus, это сработало. – ferhan

рендеринг в реальном времени с использованием JSPlot

ответ

Смежные вопросы