Einstellen von Stunden und Minuten auf Google Charts hAchsen mit jsondata

Question

Ich habe ein Google Liniendiagramm, das eine Anzahl von Tweets nach Zeit produziert. Wie Sie sehen, zeigt es derzeit nicht die 30-Minuten-Intervalle. Wie bekomme ich es, um 6.30 Uhr morgens, 7.30 Uhr morgens usw. zu sagen? Wie schalte ich es standardmäßig zwischen 6.00 Uhr und 6.30 Uhr morgens um, sondern über den gesamten Chart. Wenn zum Beispiel der jüngsten war um 6:30 Uhr, dann alle von ihnen auf der 30 (07.30 Uhr, 08.30 Uhr usw.)

{"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 8, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 8, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 8, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]} 

Google Charts-Code sollten lauten:

<table class="graph-table"> 
     <tr><td class="headerspacing2" colspan="3"><span class="header">Tweet Volume</span></td></tr> 
     <tr align="center"><td colspan="2"> 
<div id="curve_chart" style="width: 1280px; height: 430px"> 

    <script type="text/javascript"> 

google.charts.load('current', { 
    callback: function() { 
    drawChart(); 
    setInterval(drawChart, (60000)); 

    function drawChart() { 
     $.ajax({ 
     url: 'grab_twitter_stats.php', 
     type: 'get', 
     success: function (txt) { 

var data = new google.visualization.DataTable(txt); 
data.sort([{column: 0, desc:true}]); 

      var options = { 
     curveType: 'function', 
     hAxis: { 
      format: 'H, m', 
      textStyle: { 
       color: '#7acdd0', 
       fontSize: 20 
      }, 
     gridlines: { 
      count: -1, 
       color: 'transparent' 
      }, 
     }, 
     vAxis: { 
      gridlines: { 
       color: '#7acdd0', 
       count: 1 
      }, 
      textPosition: 'none' 
     }, 
     emphasis: { 
      'color':'#000000', 
      }, 
     pointSize: 15, 
     chartArea: {'width': '92%', 'height': '85%'}, 
     pointShape: 'circle', 
     lineWidth: 5, 
     colors: ['#7acdd0'], 
     annotations: { 
      stemColor : 'none' 
     }, 
     'tooltip' : { 
      trigger: 'none' 
     }, 
     legend: { position: 'none' } 
     }; 


      var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
      chart.draw(data, options); 

     } 
     }); 
    } 
    }, 
    packages: ['corechart'] 
}); 

</script> 
    </div> 
     </td></tr> 
    </table> 

Answer 1

Verwendung des hAxis.ticksconfiguration option individuelle Etiketten auf der x-Achse festlegen

jeder Tick sollte der gleiche Datentyp wie die x-Achse Spaltesein so können Sie die Werte von data

var tickMarks = []; 
for (var i = 0; i < data.getNumberOfRows(); i++) { 
    tickMarks.push(data.getValue(i, 0)); 
} 

je nach Format der Etiketten ziehen, müssen Sie die chartArea

siehe folgende Arbeits Schnipsel einstellen ...

google.charts.load('current', { 
 
    callback: function() { 
 
    txt = {"cols":[{"id":"datetime","label":"datetime","type":"datetime"},{"id":"Tweets","label":"Tweets","type":"number"},{"role":"annotation","type":"string"},{"type":"string","role":"style"}],"rows":[{"c":[{"v":"Date(2016, 7, 08, 13, 30, 0)"},{"v":"5010"},{"v":"5010"},{"v":"point {fill-color: #5e6771}"}]},{"c":[{"v":"Date(2016, 7, 08, 13, 0, 0)"},{"v":"4670"},{"v":"4670"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 0, 0)"},{"v":"4543"},{"v":"4543"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 14, 30, 0)"},{"v":"3230"},{"v":"3230"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 30, 0)"},{"v":"3167"},{"v":"3167"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 16, 0, 0)"},{"v":"3013"},{"v":"3013"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 0, 0)"},{"v":"2924"},{"v":"2924"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 15, 30, 0)"},{"v":"2892"},{"v":"2892"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 30, 0)"},{"v":"2205"},{"v":"2205"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 0, 0)"},{"v":"1789"},{"v":"1789"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 11, 30, 0)"},{"v":"1753"},{"v":"1753"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 30, 0)"},{"v":"1653"},{"v":"1653"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 9, 0, 0)"},{"v":"1611"},{"v":"1611"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 12, 0, 0)"},{"v":"1598"},{"v":"1598"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 30, 0)"},{"v":"1531"},{"v":"1531"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 30, 0)"},{"v":"1490"},{"v":"1490"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 10, 0, 0)"},{"v":"1424"},{"v":"1424"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 8, 0, 0)"},{"v":"1081"},{"v":"1081"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 30, 0)"},{"v":"888"},{"v":"888"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 7, 0, 0)"},{"v":"679"},{"v":"679"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 30, 0)"},{"v":"673"},{"v":"673"},{"v":null}]},{"c":[{"v":"Date(2016, 7, 08, 6, 0, 0)"},{"v":"666"},{"v":"666"},{"v":null}]}]}; 
 

 
    var data = new google.visualization.DataTable(txt); 
 
    data.sort([{column: 0, desc:true}]); 
 

 
    var tickMarks = []; 
 
    for (var i = 0; i < data.getNumberOfRows(); i++) { 
 
     tickMarks.push(data.getValue(i, 0)); 
 
    } 
 

 
    var options = { 
 
     annotations: { 
 
     stemColor : 'none' 
 
     }, 
 
     chartArea: { 
 
     width: '92%', 
 
     height: '70%' 
 
     }, 
 
     colors: ['#7acdd0'], 
 
     curveType: 'function', 
 
     emphasis: { 
 
     color: '#000000' 
 
     }, 
 
     hAxis: { 
 
     format: 'H:mm a', 
 
     gridlines: { 
 
      count: -1, 
 
      color: 'transparent' 
 
     }, 
 
     textStyle: { 
 
      color: '#7acdd0', 
 
      fontSize: 14 
 
     }, 
 
     ticks: tickMarks 
 
     }, 
 
     height: 400, 
 
     legend: { 
 
     position: 'none' 
 
     }, 
 
     lineWidth: 5, 
 
     pointShape: 'circle', 
 
     pointSize: 15, 
 
     tooltip : { 
 
     trigger: 'none' 
 
     }, 
 
     width: 1280, 
 
     vAxis: { 
 
     gridlines: { 
 
      color: '#7acdd0', 
 
      count: 1 
 
     }, 
 
     textPosition: 'none' 
 
     } 
 
    }; 
 

 
    var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 
 
    chart.draw(data, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

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