Struggling with line charts with multiple lines on Y Axis

Ask us anything
1

Hey

I’m trying to bring in multiple datasets that each appear with their own line with the same timeframe. The data is coming from Xano.

But I’m not clear how to use advanced charts to get the JSON data object and break it down into dataset 1, dataset 2, dataset 3 for each line on the Y Axis. Each data set is just a number and they mark a % performance change over a week.

I’ve been really stuck on this for two days. I’ve got a single chart working fine but the guided version doesn’t allow it and I just can’t work it out with the advanced one.

Thanks

2

Hey @ferris :wave:

Our chart plugin is based on ChartJS, a popular JS charting library.

To understand what type of data to give to the plugin, you can read ChartJS docs for the graph type you’re using here: Chart.js | Chart.js

4

Hey @Quentin. I’m almost there. Can you take a look and help me please:

image
image940×932 12.8 KB 

return [
    {
      label: 'Dataset 1',
      data: [0, 10, 15, 50, 60, 20],
      borderColor: 'red',
      backgroundColor: 'grey',
    },
    {
      label: 'Dataset 2',
      data: collections['b4fc2a68- rest of my data collection here'],
      borderColor: 'blue',
      backgroundColor: 'grey', 
    }
  ]

It’s displaying the number 100 on the chart, so the multi line is displaying. But it’s picking up the number 100 from ‘limit’ not the data objects

image
Airtable view is called data

Instead of getting this:

image
data is one of the fields in airtable

How do I amend the custom js to get the data field to display properly?

Or do I need to make a custom formula like you include the demo?

image
image1596×1042 101 KB

Thanks!

5

Hey @ferris, relative newbie here so the advice here may not be the most efficient. I also haven’t reviewed your more recent posts in detail so this more general guidance on charts based on my experience.

I needed more flexibility than guided mode gave me, so see the following screenshots on how I built multiple lines in advanced mode. Once you get the hang of advanced mode it’s really easy to use and you can modify almost anything - hopefully the screenshots below give you a template to use and you can then customise from there.

image
image496×588 57.5 KB

This is the chart that the dataset above creates (note there is additional styling in the options section). Also, a lot of the complexity is in data transformation from the original source - you could do that elsewhere.

image
image1105×454 20.5 KB

6

This is super useful, thanks @ilan! One thing I’d like to do is dynamically adding a new dataset to the chart depending on what page the user is on.

I know it’s possible but have you attempted anything similar?

7

No problem :slight_smile:

I haven’t needed to use it yet, but when you’re building the dataset formula, underneath any collections there is a heading called ‘CONTEXT’, and that has ‘Current Page’. Using that, I’m sure you could wrap the whole createObject that creates a series in an if statement where you are testing the Current Page against a predefined name or id.