HighStock Mehrere Serien von CSV-Datei (Arduino Based & JavaScript)

Ok Hallo an alle. Ich habe meine HighStock Arbeiten von CSV-Datei entworfen. Ich kann Zeit und 1 Zeile zu meiner Serie bekommen. Ich möchte 2 Zeilen aus Daten erhalten. Irgendwelche Ideen? In Zukunft möchte ich 2 Dezimalstellen zB 25,01 bekommen. Hast du Ideen dafür?HighStock Mehrere Serien von CSV-Datei (Arduino Based & JavaScript)

In CSV gibt es Sekunden, Daten, Daten. Und es ist Drucke es 1 Minuten.
Und ja, ich bin aus Finnland Student meinen Code saugt ... :)

http://imgur.com/L2VSRGj

Daten: Zeit in Sekunden, Wert, Wert

0,25,23
60,25,23
120,25,23
....
14220,24,22
14280,24,22
14340,24,22

Javascript in meinem HC.htm: (es Index)

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

     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <style type="text/css"> 
                                  ${demo.css} 
     </style> 
     <script type="text/javascript"> 
function getDataFilename(str){ 
    point = str.lastIndexOf("file=")+4; 

    tempString = str.substring(point+1,str.length) 
    if (tempString.indexOf("&") == -1){ 
    return(tempString); 
    } 
    else{ 
     return tempString.substring(0,tempString.indexOf("&")); 
    } 

} 

query = window.location.search; 

var dataFilePath = "/data/"+getDataFilename(query); 

$(function() { 
    var chart; 
    $(document).ready(function() { 

     // define the options 
     var options = { 

      chart: { 
       renderTo: 'container', 
       zoomType: 'x', 
       spacingRight: 5 
      }, 

      title: { 
       text: 'Arduinolla mitatut virran arvot' 
      }, 

      subtitle: { 
       text: 'Zoomaa haluttu luenta alue' 
      }, 

      xAxis: { 
       type: 'datetime', 
       maxZoom: 2 * 4000000 
      }, 

      yAxis: { 
       title: { 
        text: 'Virran arvot 0-250A' 
       }, 
       min: 0, 
       startOnTick: false, 
       showFirstLabel: false 
      }, 

      legend: { 
       enabled: false 
      }, 

      tooltip: { 
       formatter: function() { 
         return '<b>'+ this.series.name +'</b><br/>'+ 
         Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +': '+ this.y; 
       } 
      }, 

      plotOptions: { 
       series: { 
        cursor: 'pointer', 
        lineWidth: 1.0, 
        point: { 
         events: { 
          click: function() { 
           hs.htmlExpand(null, { 
            pageOrigin: { 
             x: this.pageX, 
             y: this.pageY 
            }, 
            headingText: this.series.name, 
            maincontentText: Highcharts.dateFormat('%H:%M - %b %e, %Y', this.x) +':<br/> '+ 
             this.y, 
            width: 100 
           }); 
          } 
         } 
        }, 
       } 
      }, 

      series: [{ 
       name: 'Op1', 
       marker: { 
        radius: 2 
       } 
      }] 
     }; 


     // Load data asynchronously using jQuery. On success, add the data 
     // to the options and initiate the chart. 
     // http://api.jquery.com/jQuery.get/ 

     jQuery.get(dataFilePath, null, function(csv, state, xhr) { 
      var lines = [], 
       date, 

       // set up the two data series 
       lightLevels = []; 

      // inconsistency 
      if (typeof csv !== 'string') { 
       csv = xhr.responseText; 
      } 

      // split the data return into lines and parse them 
      csv = csv.split(/\n/g); 
      jQuery.each(csv, function(i, line) { 

       // all data lines start with a double quote 
       line = line.split(','); 
       date = parseInt(line[0], 10)*1400; 

       lightLevels.push([ 
        date, 
        parseInt(line[1], 10) 
       ]); 

      }); 

      options.series[0].data = lightLevels; 

      chart = new Highcharts.Chart(options); 
     }); 
    }); 

}); 
     </script> 
    </head> 
    <body> 
<script src="https://code.highcharts.com/stock/4.2.4/highstock.js"></script> 
<script src="https://code.highcharts.com/stock/4.2.4/modules/exporting.js"></script> 

<div id="container" style="height: 400px; min-width: 155px"></div> 
    </body> 
</html>

Quelle

2016-05-25 Hannu Rajala

Sie müssen eine Reihe von Reihenobjekte setzen.

Serie:

series: [{ 
      name: 'Op1', 
      marker: { 
       radius: 2 
      } 
},{ 
      name: 'Op2' 
}]

Parser

jQuery.get(dataFilePath, null, function(csv, state, xhr) { 
      var lines = [], 
       date, 

       // set up the two data series 
       lightLevels = []; 
       topLevels = []; 

      // inconsistency 
      if (typeof csv !== 'string') { 
       csv = xhr.responseText; 
      } 

      // split the data return into lines and parse them 
      csv = csv.split(/\n/g); 
      jQuery.each(csv, function(i, line) { 

       // all data lines start with a double quote 
       line = line.split(','); 
       date = parseInt(line[0], 10)*1400; 

       lightLevels.push([ 
        date, 
        parseInt(line[1], 10) 
       ]); 

       topLevels.push([ 
        date, 
        parseInt(line[2], 10) 
       ]); 

      }); 

      options.series[0].data = lightLevels; 
      options.series[1].data = topLevels; 

      chart = new Highcharts.Chart(options); 
     });

Quelle

2016-05-27 11:38:36

Danke. Aber es druckt jetzt nur Op2: /. Vielleicht liegt es daran, dass sie fast dieselben Werte haben? –

Ich denke, das ist möglich, in der Legende sollten Sie zwei Gegenstände sehen, oder? –

Yeap. Ich werde versuchen, andere Berechnungen zu machen. –

HighStock Mehrere Serien von CSV-Datei (Arduino Based & JavaScript)

Antwort

Verwandte Themen