Ausgabe ein Spline-Diagramm mit Google-Diagramm unter Verwendung einen haxis mit Daten und Stunden

Question

Hallo Zeichnung hat ein jquery Google-Diagramm (line) mit folgenden Daten zeichnen:

['KUW Date' , 'AP'] ,['2016-03-30 01:57:21', 1] ,['2016-03-30 01:54:21', 1] ,['2016-03-30 01:51:21', 1] ,['2016-03-30 01:48:21', 1] ,['2016-03-30 01:45:22', 1] ,['2016-03-30 01:42:21', 1] ,['2016-03-30 01:39:22', 1] ,['2016-03-30 01:36:24', 1] ,['2016-03-30 01:33:22', 1] ,['2016-03-30 01:30:23', 1] ,['2016-03-30 01:27:22', 1] ,['2016-03-30 01:24:21', 1] ,['2016-03-30 01:21:22', 1] ,['2016-03-30 01:18:22', 1] ,['2016-03-30 01:15:21', ] ,['2016-03-30 01:12:21', 1] ,['2016-03-30 01:09:18', 2] ,['2016-03-30 01:06:18', ] ,['2016-03-30 01:03:18', ] ,['2016-03-30 01:00:18', 2] ,['2016-03-30 00:57:18', 2] ,['2016-03-30 00:54:18', ] ,['2016-03-30 00:51:18', 1] ,['2016-03-30 00:48:18', 1] ,['2016-03-30 00:45:18', 1] ,['2016-03-30 00:42:18', 1] ,['2016-03-30 00:39:18', 1] ,['2016-03-30 00:36:29', 1] ,['2016-03-30 00:30:29', 1] ,['2016-03-30 00:27:30', 2] ,['2016-03-30 00:24:30', 2] ,['2016-03-30 00:21:30', ] ,['2016-03-30 00:18:29', ] ,['2016-03-30 00:15:29', 1] ,['2016-03-30 00:12:29', 1] ,['2016-03-30 00:09:29', ] ,['2016-03-30 00:06:29', ] ,['2016-03-30 00:03:29', 1] ,['2016-03-30 00:00:30', ] ,['2016-03-29 23:57:30', 1] ,['2016-03-29 23:54:30', 1] ,['2016-03-29 23:51:30', 1] ,['2016-03-29 23:48:30', ] ,['2016-03-29 23:45:29', 1] ,['2016-03-29 23:42:29', ] ,['2016-03-29 23:39:30', 1] ,['2016-03-29 23:36:29', 1] ,['2016-03-29 23:33:29', 1] ,['2016-03-29 23:30:29', 1] ,['2016-03-29 23:27:30', 1] ,['2016-03-29 23:24:29', 1] ,['2016-03-29 23:21:29', 1] ,['2016-03-29 23:18:30', 1] ,['2016-03-29 23:15:30', 1] ,['2016-03-29 23:12:30', 1] ,['2016-03-29 23:09:30', 1] ,['2016-03-29 23:06:29', 1] ,['2016-03-29 23:03:29', 1] ,['2016-03-29 23:00:29', 1] ,['2016-03-29 22:57:29', 1] ,['2016-03-29 22:54:29', 1] ,['2016-03-29 22:51:29', 1] ,['2016-03-29 22:48:29', 1] ,['2016-03-29 22:45:29', 1] ,['2016-03-29 22:42:30', 1] ,['2016-03-29 22:39:29', ] ,['2016-03-29 22:36:30', ] ,['2016-03-29 22:33:29', 2] ,['2016-03-29 22:30:30', 2] ,['2016-03-29 22:27:30', 2] ,['2016-03-29 22:24:30', 1] ,['2016-03-29 22:21:29', ] ,['2016-03-29 22:18:30', 1] ,['2016-03-29 22:15:29', ] ,['2016-03-29 22:12:29', ] ,['2016-03-29 22:09:30', ] ,['2016-03-29 22:06:29', ] ,['2016-03-29 22:03:29', ] ,['2016-03-29 22:00:29', ] ,['2016-03-29 21:57:29', ] ,['2016-03-29 21:54:29', ] ,['2016-03-29 21:51:29', ] ,['2016-03-29 21:48:30', 1] ,['2016-03-29 21:45:29', 1] ,['2016-03-29 21:42:29', 1] ,['2016-03-29 21:39:29', 1] ,['2016-03-29 21:36:30', 1] ,['2016-03-29 21:33:29', 1] ,['2016-03-29 21:30:29', 2] ,['2016-03-29 21:27:29', 2] 

einen Datums-/hh darstellen: ss in haxis und Besucher in Yaxis.

mein Script-Code ist wie folgt:

<script> 
    google.load("visualization", "1", {packages:["corechart","table"]}); 
     google.setOnLoadCallback(drawProductAllocationChartBO99); 
     function drawProductAllocationChartBO99() { 
     var dataBO99 = google.visualization.arrayToDataTable(
     <?php echo $stringAP9;?> 
     ); 

     var options = { 

      //title: 'My Daily Activities' 
     is3D: false, 
     backgroundColor: 'transparent', 
     titleFontSize:12, 
      width: '100%', 
      height: '100%', 
      sliceVisibilityThreshold: 0.04, 
     legend: { position: 'top', maxLines: 2 } 
     }; 

     var productAllocationChartBO99 = new google.visualization.LineChart(document.getElementById('product-allocation-chartBO99')); 
     productAllocationChartBO99.draw(dataBO99, options); 


     } 
</script> 

ich von diesem google documentation verstehen, dass ich bestimmte Optionen für haxis sollte mein Datumsformat oder Potentialänderung meine Json passend eine Google Diagramm-Format entsprechen.

Was ist Ihre Empfehlung, dies zu lösen?

Dank

Answer 1

Zuerst würde ich Laden mit loader.js gegen die alte Bibliothek jsapi empfehlen.

Als nächstes benötigen die Daten in der Frage ein wenig Manipulation zu arbeiten.

Zum Formatieren einer kontinuierlichen Achse werden im folgenden Beispiel die Zeichenfolgenwerte in Datumsangaben konvertiert.
Siehe Discrete vs Continuous für weitere Informationen ...

auch jede Zeile, die gleiche Anzahl von Spalten haben müssen, fügen Sie null auf fehlende Werte.

Zwei Beispiele ...

charta
Legt das Datumsformat und verwendet interpolateNulls: true in den Lücken von null Daten

ChartB
verwendet das gleiche Format zu füllen, sondern fügt in benutzerdefinierten Häkchen und verhindert, dass der Text schräg mit ...
maxAlternation: 1 und slantedText: false

google.charts.load('44', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = [ 
 
    ['KUW Date', 'AP'], ['2016-03-30 01:57:21', 1], ['2016-03-30 01:54:21', 1], ['2016-03-30 01:51:21', 1], ['2016-03-30 01:48:21', 1], ['2016-03-30 01:45:22', 1], ['2016-03-30 01:42:21', 1], ['2016-03-30 01:39:22', 1], ['2016-03-30 01:36:24', 1], ['2016-03-30 01:33:22', 1], ['2016-03-30 01:30:23', 1], ['2016-03-30 01:27:22', 1], ['2016-03-30 01:24:21', 1], ['2016-03-30 01:21:22', 1], ['2016-03-30 01:18:22', 1], ['2016-03-30 01:15:21', ], ['2016-03-30 01:12:21', 1], ['2016-03-30 01:09:18', 2], ['2016-03-30 01:06:18', ], ['2016-03-30 01:03:18', ], ['2016-03-30 01:00:18', 2], ['2016-03-30 00:57:18', 2], ['2016-03-30 00:54:18', ], ['2016-03-30 00:51:18', 1], ['2016-03-30 00:48:18', 1], ['2016-03-30 00:45:18', 1], ['2016-03-30 00:42:18', 1], ['2016-03-30 00:39:18', 1], ['2016-03-30 00:36:29', 1], ['2016-03-30 00:30:29', 1], ['2016-03-30 00:27:30', 2], ['2016-03-30 00:24:30', 2], ['2016-03-30 00:21:30', ], ['2016-03-30 00:18:29', ], ['2016-03-30 00:15:29', 1], ['2016-03-30 00:12:29', 1], ['2016-03-30 00:09:29', ], ['2016-03-30 00:06:29', ], ['2016-03-30 00:03:29', 1], ['2016-03-30 00:00:30', ], ['2016-03-29 23:57:30', 1], ['2016-03-29 23:54:30', 1], ['2016-03-29 23:51:30', 1], ['2016-03-29 23:48:30', ], ['2016-03-29 23:45:29', 1], ['2016-03-29 23:42:29', ], ['2016-03-29 23:39:30', 1], ['2016-03-29 23:36:29', 1], ['2016-03-29 23:33:29', 1], ['2016-03-29 23:30:29', 1], ['2016-03-29 23:27:30', 1], ['2016-03-29 23:24:29', 1], ['2016-03-29 23:21:29', 1], ['2016-03-29 23:18:30', 1], ['2016-03-29 23:15:30', 1], ['2016-03-29 23:12:30', 1], ['2016-03-29 23:09:30', 1], ['2016-03-29 23:06:29', 1], ['2016-03-29 23:03:29', 1], ['2016-03-29 23:00:29', 1], ['2016-03-29 22:57:29', 1], ['2016-03-29 22:54:29', 1], ['2016-03-29 22:51:29', 1], ['2016-03-29 22:48:29', 1], ['2016-03-29 22:45:29', 1], ['2016-03-29 22:42:30', 1], ['2016-03-29 22:39:29', ], ['2016-03-29 22:36:30', ], ['2016-03-29 22:33:29', 2], ['2016-03-29 22:30:30', 2], ['2016-03-29 22:27:30', 2], ['2016-03-29 22:24:30', 1], ['2016-03-29 22:21:29', ], ['2016-03-29 22:18:30', 1], ['2016-03-29 22:15:29', ], ['2016-03-29 22:12:29', ], ['2016-03-29 22:09:30', ], ['2016-03-29 22:06:29', ], ['2016-03-29 22:03:29', ], ['2016-03-29 22:00:29', ], ['2016-03-29 21:57:29', ], ['2016-03-29 21:54:29', ], ['2016-03-29 21:51:29', ], ['2016-03-29 21:48:30', 1], ['2016-03-29 21:45:29', 1], ['2016-03-29 21:42:29', 1], ['2016-03-29 21:39:29', 1], ['2016-03-29 21:36:30', 1], ['2016-03-29 21:33:29', 1], ['2016-03-29 21:30:29', 2], ['2016-03-29 21:27:29', 2] 
 
    ]; 
 

 
    var tickMarks = []; 
 
    for (var i = 1; i < data.length; i++) { 
 
    // convert to date 
 
    data[i][0] = new Date(data[i][0]); 
 

 
    // add tick mark for every sixth date 
 
    if ((i % 6) === 0) { 
 
     tickMarks.push(data[i][0]); 
 
    } 
 

 
    // each row must have two columns, add null column value 
 
    if (data[i].length === 1) { 
 
     data[i].push(null); 
 
    } 
 
    } 
 

 
    var optionsA = { 
 
    hAxis: { 
 
     format: 'MM/dd/yyyy \r\n H:mm:ss', 
 
    }, 
 

 
    // fill in gaps from missing data 
 
    interpolateNulls: true 
 
    }; 
 

 
    var optionsB = { 
 
    hAxis: { 
 
     // date format 
 
     format: 'MM/dd/yyyy \r\n H:mm:ss', 
 

 
     // prevent slanted, partial text 
 
     maxAlternation: 1, 
 
     slantedText: false, 
 

 
     // custom tick marks 
 
     ticks: tickMarks 
 
    }, 
 
    interpolateNulls: false 
 
    }; 
 

 
    var chartA = new google.visualization.LineChart(document.getElementById('chart_divA')); 
 
    chartA.draw(google.visualization.arrayToDataTable(data), optionsA); 
 

 
    var chartB = new google.visualization.LineChart(document.getElementById('chart_divB')); 
 
    chartB.draw(google.visualization.arrayToDataTable(data), optionsB); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_divA"></div> 
 
<div id="chart_divB"></div>