Chart with Scriptable

Scriptable
1

Hello,

I am looking for an example to create a Chart. (XY-Plot)

does anyone have a sample code.

THX
Westcliff

2

Do you have Charty installed?

3

I just installed it :wink:

1 Like
4

Hi Martin,

can I embed Charty in scriptable?

THX
Matthias

5

Charty is designed to work with Shortcuts, not Scriptable. But Scriptable is designed to work with Shortcuts too, so you can go from Scriptable to Shortcuts to Charty.

You might be able to generate an image from Charty using Shortcuts and use that via Scriptable, but Charty is usually the end point.

1 Like
6

It‘s possible with scriptable using drawContext!

image
image1800×3200 644 KB

2 Likes
7

you have a sample code for me ?

THX

8

Just to put it in context, drawContext will take a little bit of extra grappling as you are in effect coding in every element of the chart. It isn’t a framework for drawing charts but for drawing content in a more general sense.

I suspect that @Martin_Packer was previously just pointing you in the direction of something that was designed for drawing charts; just not drawing charts in Scriptable.

1 Like
9

Right. That was my intent. I’d rather not be confecting a graphing engine myself. (Who am I kidding?) :slight_smile:

But:

  1. There are graphing javascript libraries that might be made to work. (Unknown difficulty.)
  2. Maybe the Charty author can make it easier to use with Scriptable. (Also unknown difficulty.)
10

Source code here
GitHub

A lot of leveraged in source codes. Credits can be seen on GitHub.

image
image1800×3200 671 KB

3 Likes
11

thank you :smiley:

so I can try a Chart :relaxed:

1 Like
12

Thanks for your Tips :grinning:

image
image828×378 51.5 KB

1 Like
13

Glad you got it working :slight_smile: I currently am using Quick Charts: https://quickchart.io/

It’s a free API (within generous limits) that returns the chart as an image based on your query. If anyone else finds this thread and is looking for other charting solutions.

1 Like
14

hi, I am using it,but return the pictures obtained through url are not displayed in high definition proportionately. Is there any solution?

15

It is a rather tricky API to work with, there are a lot of options to set. But the documentation should get you there eventually. Here’s an example body from a POST request I’m using to generate a chart with it:

{
  height: 200,
  width: 500,
  chart: {
    type: 'horizontalBar',
    options: {
      legend: { display: false },
      scales: {
        yAxes: [
          {
            ticks: {
              mirror: true,
              fontSize: 24,
              beginAtZero: true,
              stepSize: 0.5,
            },
            gridLines: { display: false },
          },
        ],
      },
    },
    data: {
      labels: ['Label 1'],
      datasets: [
        {
          data: [0.97],
          backgroundColor: ['#1573ff80'],
          borderColor: ['#1573FF'],
          borderWidth: 1,
          categoryPercentage: 1,
          barPercentage: 0.95,
        },
      ],
    },
  },
};

I imagine that modifying the width and height will change the resolution, but I’m not sure