Quickchart.io Timing Integration Problem

Ask for Help
1

In Glide I have 2 columns I want to graph (there will be more than that but I’ll start there) using quickchart.io.

Column 1
Date (MM/DD/YYYY)

Column 2
Sales

I’m trying to plot using Quickchart.io ‘Line’ and am having a lot of difficulty integrating Date/time (ie x-axis). I’ve played around a lot with their GPT builder and even tried using chat GPT, but I guess I’m not using the correct syntax. Below is the base example I’m using that is straight from one of QC’s example charts with the date format modification to the label. I’m then taking this and putting this into a glide template and subbing in my 2 columns in “labels” and “data”. Since these 2 columns are user inputs, they will dynamic.

{
  type: 'line',
  data: {
    labels: ['01/01/2024', '02/01/2024', '03/01/2024', '04/01/2024', '05/01/2024', '06/01/2024', '07/01/2024'],
    datasets: [
      {
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        fill: false,
        data: [800000, 90, 800, 400000, 900000, 50000, 600],
      },
   
    ],
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js Line Chart - Logarithmic',
    },
    scales: {
      xAxes: [
        {
          type: 'time',
          time: {
            unit: 'month',
            displayFormats: {
              month: 'MM/DD/YYYY'
            }
          }
        }
      ],
      yAxes: [
        {
          display: true,
          type: 'logarithmic',
        },
      ],
    },
  },
}

Any help is appreciated. Also, if you would be willing to coach me through some of this app, DM me your rates.

2

Can you show us your columns configuration that are related to this through some screenshots?

3

Click into this template column, and copy the output. Then paste that into the quickchart sandbox editor (or paste it here if you want). That should provide a clue.

4

Sure thing. Here’s a more simplified version of a chart for ease of posting. This is one of the ‘line’ examples from the QC website with a few small changes. It’s still very primitive, but figured I’d start here and build it up from here. On the plot I’ve run into several different errors in my experimenting, but this is the “closest” to a solution Ive been.

I want the x axis to be the Production Month (ProdMon). The more I’ve examined this it appears QC is (literally) just dividing 7 by 1 by 2015 (ie. 7/1/2015) for the label.

XY Plots
XY Plots434×880 56 KB

List XY.PNG
List XY.PNG1282×987 210 KB

Chart Template
Chart Template563×778 43.8 KB

Graph
Graph1062×600 138 KB

https://quickchart.io/chart?c= { type: ‘line’, data: { labels: [ProdMon], datasets: [ { label: ‘Production’, data: [ListProd], fill: false, borderColor: ‘red’, borderDash: [5, 5], } ], }, options: { scales: { yAxes: [{ type: ‘logarithmic’, }] } } }

5

Yeah, that’s because you are passing the dates as bare strings, so they are being interpreted as formulas. What you need to do is enclose each date in single quotes, eg: '7/1/2015', '8/2/2015', etc..

1 Like