JSFiddle - React, Tailwind, and code Playground
by Nick Momrik
HTML
<script src="https://www.gstatic.com/charts/loader.js"></script>
<body>
<div id="chart_div"></div>
</body>
JavaScript
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Used MetroTimer on iOS to send perfect RPMs to the Airdyne
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Steady RPMs','Calories/second'],
[40,0.117647058823529],
[45,0.147058823529412],
[50,0.176470588235294],
[55,0.235294117647059],
[60,0.294117647058824],
[65,0.352941176470588],
[70,0.411764705882353],
[75,0.470588235294118],
[80,0.558823529411765],
[85,0.647058823529412],
[90,0.735294117647059],
[95,0.823529411764706],
[100,0.941176470588235],
[105,1.02941176470588],
[110,1.08823529411765],
[115,1.26470588235294],
[120,1.38235294117647],
[125,1.44117647058824],
[130,1.58823529411765],
[135,1.64705882352941],
[140,1.88235294117647],
[145,1.97058823529412],
[155,2.35294117647059],
[175,2.94117647058824],
[190,3.38235294117647],
]);
var options = {
title: 'Calories by RPMs',
hAxis: {title: 'Steady RPMs', minValue: 30, maxValue: 200},
vAxis: {title: 'Calories/second', minValue: 0, maxValue: 4},
trendlines: {
0: {
type: 'polynomial',
degree: 2,
showR2: true,
visibleInLegend: true
}
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}