I’m trying to create a google sheets web app that’ll read the data from the spreadsheet to generate this chart, which is why I am using vanilla JS.
function getEventEntries() {
function createChart(args) {
const ctx = document.getElementById("myChart").getContext("2d");
const cfg = {
type: 'scatter',
data: {
datasets: [{
label: 'Events',
data: args
}],
options: {
scales: {
x: { type: 'time' },
y: { type: 'linear' }
}
}
}
};
const myChart = new Chart(ctx, cfg);
}
//get data from google sheets
//google.script.run.withSuccessHandler(createChart).getEntries();
// dummy data tests to figure out what formats will work
var events = [{x: '2021-11-06 23:39:30', y: -3}, {x: '2008-04-12 13:30:14', y: 10}];
var events1 = [{x: new Date('2021-11-06'), y: -3}, {x: new Date('2008-04-12'), y: 10}]; // actually plots data and creates an x-axis that isn't 0 to 1--still not showing date values for ticks tho
createChart(events1);
}
function onLoad() {
getEventEntries();
}
$(document).ready(onLoad);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<!-- I've tried date-fns and moment.js adapters with no luck either -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>
As you can see when you run my snippet, the x-axis doesn’t list dates in any format. It’s just large numbers. I’d like to get it to list readable dates, maybe MMM YYYY format.