Quickchart question about bar graphs

[Trading_5_Talents]

Hello Gliders! I’m using a barchart from Quickchart.io and I had a question about how I should get my data in the dataset properly. Here’s the dataset code:

  datasets: [
      {
        type: "line",
        label: "Goal Amount",
        borderColor: "#043f21",
        borderWidth: 3,
        fill: false,
        showLine: false,
        pointRadius: 13,
        pointHoverRadius: 13,
        data: [
          33,
          26,
          29,
          89,
          41,
          70,
          84
        ]
      },
      {
        type: "bar",
        label: "Total Profit",
          display: false,
        backgroundColor: "#51b84d",
        data: [
          42,
          73,
          69,
          94,
          81,
          18,
          87
        ],
        borderColor: "white",
        borderWidth: 0
      }, 
    ]
  },

The data I’d like in the above code would be the goal amounts and the total profit from this table. I’m not sure how I can accomplish it? This is how the table is setup:

[Darren_Murphy]

For each of the two columns, create a Joined List column using a comma separator.
And then use that joined list column as a replacement in your template. It should look something like this:

label: "Goal Amount",
        borderColor: "#043f21",
        borderWidth: 3,
        fill: false,
        showLine: false,
        pointRadius: 13,
        pointHoverRadius: 13,
        data: [{joined-list-goal-amount}]

[Mozza]

Hi.
Maybe this could help:

Quickchart.io: the Cloudinary of Charts —on the fly charts!

GAME CHANGER! Stumbled upon this site today—a way to create on the fly charts using data from your Glide tables. Images render instantly and you can select one of 14 different charts, customize colors, styles etc all through URL parameters! The video below shows my first attempt to create a chart from scratch and implement it in Glide. Took me less than 5 minutes. End result: [Screen Shot 2020-09-17 at 10.10.46 AM]

[Trading_5_Talents]

Thank you

[Trading_5_Talents]

This joined list works great! Thank you! However I noticed it only works for the y-axis values, but not the x-axis values. So my template looks like this:

Here’s the reference column:

Here’s the chart display. It only shows the last month?

Also, is there a way to only show the last X amount of months? As time goes by this chart would extend pretty far on the x-axis unless I can limit it somehow.

[Eric_Penn]

As far as the inline list is concerned in the right hand side of the data editor you should be able to “limit the number of items”.

For the chart you should be able to use an If-Then-Else column to narrow down your dates and then point the chart to that if-then-else.

[Darren_Murphy]

@Trading_5_Talents

However I noticed it only works for the y-axis values, but not the x-axis values.

hmm, I can’t see any obvious reason why that isn’t working.
One of the downsides of quickcharts with Glide is they can be quite tricky to debug. What I usually do if I have one that isn’t behaving is dump the entire chart URL into a rich text component, and then carefully examine it.

@Trading_5_Talents

Also, is there a way to only show the last X amount of months? As time goes by this chart would extend pretty far on the x-axis unless I can limit it somehow.

There are a few different ways to do this. Is the Joined List operating through a relation?
Assuming it is, what you could do is apply some logic in the source sheet to filter the relation.
Let’s say you only want data for the past 6 months. A rough and ready way could be:

• Create a math column with the formula Now - 182, which will give you the date approximately 6 months ago
• Compare that to the row date using an if-then-else column:
  – If date is on or after 6 months ago, then date
• Now just build your relation to that if-then-else column, instead of the original column

[Trading_5_Talents]

Thank you both! @Eric_Penn and @Darren_Murphy !!! I managed to get the barchart x-axis labels working (there was some formatting issues with quotation marks in my joined list) as well as the filtering that shows only the last x months of data. Once again, this community of Gliders is awesome!

[Trading_5_Talents]

I just wanted to share what it now looks like as I added a selector to adjust the chart’s x-axis to display more data. Thanks again!

[Eric_Penn]

Looking good!! Just a quick suggestion… if you make the choice component required it will get rid of the “-“ as an option.

[Trading_5_Talents]

Awesome! Thanks for that tip

[Darren_Murphy]

Nice work!

Also, what Eric said.