📊 Chart.js 📈

by Fran T

Version 1 (July 18, 2021)

Download (16 downloads)

A full-featured, fully customizable charting package based on Chart.js. Line, Bar, Pie, Donut, Polar Area, Radar, Scatter, and Bubble charts are supported, and buttons are automatically generated to switch between the chart types depending on your data. If you tap repeatedly on the Line or Bar chart buttons, they'll switch between vertical and horizontal orientation if your data supports it. Chart.js lets you tap on the datapoints to see a popup with more info, and tap on a dataset name in the chart legend to add and remove the dataset from the chart.
 
This is a follow-up to Finch Nelson's excellent Chart flow which I've used for years. This flow doesn't use jQuery and it caches the charting library instead of keeping it in a very large block, so it won't crash Automate while you're editing it to plot your own data.
 
Use:
JSON dictionaries are used to configure Chart.js and this charting flow. The 'settings' variable blocks are used for general settings, while 'chartOptions' corresponds to the Chart.js 'options' configuration settings. Defaults for both are provided in a common setup subroutine, and you can customize them by setting the corresponding dictionary entries in your own versions of those blocks before calling the subroutine. Your datasets and their Chart.js settings are defined in the 'datasets' array, which corresponds to the Chart.js 'data' configuration setting (see examples).
 
Here are the possible settings values:
 
debug (1 | 0): If enabled (set to 1), displays the effective settings and chart options before the chart is displayed

pointsize (integer): Size in pixels of the chart points; if 0, points are not shown

showxaxis/showyaxis/showGrid (1 | 0): Whether to show the plot axis/background grid

defaultChart (bar | line | pie | polarArea | radar | scatter | bubble): Which chart type to show by default; if there's more than one dataset in the chart data, a pie chart is shown as a donut chart

chartButtons ([see defaultChart]|null): An array of chart types indicating which buttons will be shown on the chart. If an empty array is given, the buttons are automatically generated based on whether your data supports each type; if null, no buttons are shown and the defaultChart is displayed

captionGraphType (1 | 0): Whether the graph type is added to its caption

caption/xcaption/ycaption/ocaption: Captions for the chart, X/Y axes, and Origin; if null, not shown

datasetLabels: An array of labels corresponding to each dataset

xStep/yStep (integer): Legacy settings for the step sizes of the X and Y chart axes (see 'Legacy Chart Example' flow)
 
Migration from the legacy Chart flow:
 
x/ycaption: moved to settings
x/yStep: leave undefined or set to 0 for auto calculation
color: now backgroundColor in the dataset
data[caption]: now label in the dataset
showbars: now defaultChart in settings
showpoint: now a pointsize of 0 in settings
 
See:
https://www.chartjs.org

https://www.chartjs.org/docs/latest/general/data-structures.html

5.0 average rating from 4 reviews

5 stars
4
4 stars
0
3 stars
0
2 stars
0
1 star
0
Reports
0

Rate and review within the app in the Community section.