Highchart grafikas neina padaryti laiko pasirinkimo

Liepos 17, 2017

Sveiki visi. Reikia jūsų pagalbos. Neišeina pasidaryti laiko nustatymu kokiu laikotarpiu noriu peržiūrėti savo garfiko data.

Norėtusi pasidaryti kaip čia yra:Grafikas

Kol kas mano padarytas kodas:

<!DOCTYPE html>
<html>
   <head>
           <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

       <title>Arduino SD Card Web Page using Ajax</title>
<style>
body {
background-color: #cccccc;
}

#linkas:link, #linkas:visited {
   background-color: #f44336;
   color: white;
   padding: 14px 25px;
   text-align: center;
   text-decoration: none;
   display: inline-block;
}


#linkas:hover, #linkas:active {
   background-color: blue;
}
</style>		

	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<script>



       var chart;
       function GetArduinoInputs()
       {

           nocache = "&nocache=" + Math.random() * 1000000;
           var request = new XMLHttpRequest();
           request.onreadystatechange = function()
           {
               if (this.readyState == 4) {
                   if (this.status == 200) {
                       if (this.responseText != null) {
                      var kolektorio_temp=parseFloat(this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue,10)
				   var boilerio_temp=parseFloat(this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue,10)

                       var d = new Date();
                       var date = d.getTime() - d.getTimezoneOffset() * 60000;
                       var point = [date, kolektorio_temp];
					var point2 = [date, boilerio_temp];


                       var series = chart.series[0], 

                      shift = series.data.length > 10; // shift if the series is 



           // add the point
           chart.series[1].addPoint(point,point2, true, shift,);




                       }
                   }
               }
           }
           request.open("GET", "ajax_inputs" + nocache, true);
           request.send(null);
           setTimeout('GetArduinoInputs()', 5000);
       }
       $(document).ready(function() {
           chart = new Highcharts.Chart({
               chart: {
                   renderTo: 'container',
                   defaultSeriesType: 'spline',
		    events: {
                       load: GetArduinoInputs
                   },
			 rangeSelector: {
                 selected: 1
                 }
               },

               title: {
                   text: 'Temperaturos grafikas'
               },
               xAxis: {
                 //type: 'datetime',
                 // tickPixelInterval: 150,
                  //maxZoom: 20 * 1000,
			    title: {
                       text: 'Laikas',
                       margin: 10
                   },
			  categories: ['12:10','12:20','12:30','12:40','12:50','13:00','13:10','13:20','13:40','13:50','14:00','14:10','14:20','14:30','14:40','14:50','15:00']
               },
               yAxis: {
                   minPadding: 0.2,
                   maxPadding: 0.2,
                   title: {
                       text: 'Temperatura (°C)',
                       margin: 10
                   }
               },

               series: [{
                 name: 'Kolektorius',
                 data: [55, 45, 85, 50, -15,0,30,50,60,20,40,30,40,60,20,30,-5,-4,0,40,50,60,80,95,105,80,90,50,30,40,50,60,70,80,
			  50,60,80,50,90,66,50,45,20,30,15,10,5,0,40,60,50,10,30,52,52,35,50],
			  tooltip: {
                    valueDecimals: 1,
                   valueSuffix: '°C'
                  }
              }, {
                 name: 'Boileris',
                 data: [30, 60, 82, 40, 20],
			  tooltip: {
                    valueDecimals: 1,
                   valueSuffix: '°C'
                  }
             } ]

           });

       });





   </script>
   </head>
   <body onload="GetArduinoInputs()">
   <div id="container" style="width: 1200px; height: 728px; margin: 0 auto"></div>



   </body>
</html>

Bandžiau isidėti kaip parodyta pvz šį koda, bet vistiek nieko nesigauna.

rangeSelector: {
           selected: 1
       },

Todėl, prašau padėkite.

P.S duomenis surašiau ramdom dėl vaizdo :)

Redagavo Liepos 17, 2017 Justinas244

Liepos 17, 2017

Ne taip turėtu būt? new Highcharts.stockChart

Redagavo Liepos 17, 2017 Prodev

Liepos 18, 2017

Ne taip turėtu būt? new Highcharts.stockChart

Ačiū, net nepastebėjau. Problema pašalinta :) .

Prisijungti

Highchart grafikas neina padaryti laiko pasirinkimo

Rekomenduojami pranešimai

Justinas244 57

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prodev 57

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Justinas244 57

Nuoroda į pranešimą

Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Dabar naršo 0 narių

Prisijunk prie bendruomenės dabar!

Naujausios temos

Karštos temos

Veiklos srautas

Skelbimai