Google Charts - Data series without label for each point?

42 views
Skip to first unread message

Tim Mousel

unread,
Mar 29, 2018, 4:57:02 PM3/29/18
to Google Visualization API
Hello,

I have daily resting heart rate data stored in a mysql database. I'd like to display the daily resting heart rate on a chart. On the X-axis I want to display the 12 months while the data points on the chart show the daily resting heart rate. Is that possible with Google Charts? If so, which part of the documentation would I find the info I need? I looked through the Line Chart documentation but didn't see how this could be accomplished.

It would be something similiar to how the points are plotted here:

Thanks,

Tim


Jeremy Simpson

unread,
Mar 30, 2018, 10:53:14 AM3/30/18
to Google Visualization API
Hi Tim,


See if this will be a helpful solution:


<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
  data.addColumn('number', 'Month');
      data.addColumn('number', 'HeartRate');

      data.addRows([
        [1,  37.8],
        [2,  30.9],
        [3,  25.4],
        [4,  11.7],
        [5,  11.9],
        [6,   8.8],
        [7,   7.6],
        [8,  12.3],
        [9,  16.9],
        [10, 12.8],
        [11,  5.3],
        [12,  6.6]
        
      ]);

      var options = {
        chart: {
           title: 'Resting Heart Rate' ,
          subtitle: 'in Beats Per Minute (bpm)'
        },
        width: 900,
        height: 500,
         axes: {
          x: {
            0: {side: 'bottom'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

Tim Mousel

unread,
Mar 30, 2018, 2:32:27 PM3/30/18
to Google Visualization API
Hi Jeremy,

I appreciate the time you took to answer this.

I made a jsfiddle with your code:

I need it to be displayed differently. I have a resting heart rate value for each day of the week. So in a month, there would be 30 data points but I only want to have the labels by the month or week so that it will all fit for say a years time.

In the example image (https://1n4rcn88bk4ziht713dla5ub-wpengine.netdna-ssl.com/wp-content/uploads/2017/03/Screen-Shot-2017-03-07-at-19.02.46-2.png
) it has many data points squeezed into each monthly label.

Hopefully this is possible with Google Charts.

Thanks again!

Tim

On Thursday, March 29, 2018 at 3:57:02 PM UTC-5, Tim Mousel wrote:
Reply all
Reply to author
Forward
0 new messages