Блог

Главная - Вопросы по программированию - Построение исторической диаграммы флотов между двумя пользовательскими диапазонами дат

Построение исторической диаграммы флотов между двумя пользовательскими диапазонами дат

#javascript #jquery #flot

#javascript #jquery #поток

Вопрос:

Я пытаюсь построить историческую диаграмму флотов между двумя пользовательскими диапазонами дат, пользователь выберет диапазон дат, и на основе выбора я извлеку данные из своей базы данных и собираюсь построить диаграмму флотов. Извлечение данных из базы данных на основе выбора завершено, но отображение этих данных на диаграмме флотов не является результирующим результатом. Ниже приведен мой код, который я пытаюсь построить 

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>  
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>Flot Examples: Real-time updates</title>    
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>   
<script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>   
<script data-require="flot@0.8.2" data-semver="0.8.2" src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>   
<link href="style.css" rel="stylesheet" type="text/css" />   
<script type="text/javascript">

  
$(function() 
{ 
function GetData()
{
var data = []; 
var now = new Date().getTime(); 
var res;    
data.shift(); //to remove first item of array
var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];   
data.push(str); 
$.plot($("#placeholder"), [data], {series: {    
lines: {       
show: true,        
lineWidth: 1.2,        
fill: true
    }
    },        
yaxis: {        
min: 0,        
max: 100      
},       
xaxis: {
mode: "time", minTickSize: [1, "day"]
}
}    
);}
GetData();
});

  
</script>  
</head>  
<body>    
<div id="header">      
<h2>HISTORICAL CHART</h2>    
</div>
<div id="content">      
<div class="demo-container">        
<div id="placeholder" class="demo-placeholder"></div>     
</div>         </div>    
<div id="footer">	
	Copyright © 2007 - 2014 IOLA and Ole Laursen	
</div>  
</body>
</html>

Комментарии:

1. Измените это — $.plot($(«#заполнитель»), [данные], {серия: { на это — $.plot($(«#заполнитель»), данные, {серия: { … Удалить [ ] из данных. Мне также пришлось установить высоту для заполнителя div — <идентификатор div=»заполнитель» class=»demo-заполнитель» style=»высота: 300 пикселей;»></ div>

2. @T.Shah можете ли вы опубликовать это в качестве ответа?

Ответ №1:

         <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>  
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
    <title>Flot Examples: Real-time updates</title>    
    <script  src="https://code.jquery.com/jquery-2.1.3.min.js"></script>   
    <script  src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>   
    <script  src="//cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>   
    <link href="style.css" rel="stylesheet" type="text/css" />   
    <script type="text/javascript">


    $(function() 
    { 
    function GetData()
    {
    var data = []; 
    var now = new Date().getTime(); 
    var res;    
    data.shift(); //to remove first item of array
    var str = [[1475210230423,64.51024424527357],[1475210232423,26.131426274344072]];   

    data.push(str); 
    $.plot($("#placeholder"), data, {series: {    
    lines: {       
    show: true,        
    lineWidth: 1.2,        
    fill: true
        }
        },        
    yaxis: {        
    min: 0,        
    max: 100      
    },       
    xaxis: {
    mode: "time", minTickSize: [1, "day"]
    }
    }    
    );}
    GetData();
    });


    </script>  
    </head>  
    <body>    
    <div id="header">      
    <h2>HISTORICAL CHART</h2>    
    </div>
    <div id="content">      
    <div class="demo-container">        
    <div id="placeholder" class="demo-placeholder"  style="height:300px;"></div>     
    </div>         </div>    
    <div id="footer">   
            Copyright © 2007 - 2014 IOLA and Ole Laursen    
    </div>  

    </body>
    </html>