C3 charts – Subchart v1.0.0

Published by Widget Studio on April 13, 2019
Updated on April 10, 2020
Tags: Charting
Download Send To Carafe
Download Send To Carafe
Created By: C. Lind
Version: 1.0.0

Windows Tested: Yes
Offline Compatible: No

Description:
This widget is a 3-series chart used to display category series data.
You can use this for one or two or three-series, and they can be stacked as you wish.

You can create a line chart, a bar chart, a pie chart, or a step chart.

There are many options available for customization, and any of them can be set as data, though we picked the ones that made sense here to us.
This widget uses CSV style data to graph as many series as you like. It can include a sub chart for zooming and scrolling on the main chart.

Configuration

Name Description Type
column1This is CSV style column data. Column header is first, then the data separated by commas. The x axis column should have the header 'x'.text
column2text
column3text
References:

2 Comments

ccs2001 · January 7, 2020 at 2:36 pm

Carafe and Soliant are awesome!

This particular chart looks and acts exactly the way I needed for my solution, with one exception; dependent upon the installation, the number of series needed would vary, possibly widely. I set out to discover a variation that would adapt dynamically, without hardcoding of scripts, etc.. I came up with the following and would like to share it with the FM community:

I replaced the individual ‘Column’ spaceholders with the following:

TRADITIONAL METHOD
data: {
x: 'x',
columns: [
[__column1__],
[__column2__],
[__column3__]
],
type: '__chartType__',

I REPLACED THE INDIVIDUAL COLUMNS WITH A STRING TO BE SUBSTITUTED AT RUN TIME

data: {
x: 'x',
columns: [
[SET_COLUMNS_HERE]
],

I create the data strings in FM and the chart adjusts to the number of series without other required adjustments. My particular strings are the following which show Dates and Districts.

['x','2019-12-1','2019-12-2','2019-12-3','2019-12-4','2019-12-5'],
['R5',11,8,17,10,8],
['R4',10,14,13,16,23],
['R3',9,11,6,23,9],
['R2',8,12,13,22,21],
['B2',14,8,4,9,11],
['B5',8,7,12,15,12],
['B3',16,11,20,11,10],
['B4',9,11,14,14,15]

The chart automatically adjusts to the number of columns. I did the same with [SET_CHART_TYPE] and a few other variables.

Thanks again, Soliant (and Jesse)!

Jeremiah Small · January 7, 2020 at 5:20 pm

Nice job getting your feet wet. To properly take advantage of merge fields, you should define them in your config and use the Bookmark ends. So instead of writing this

columns: [
[SET_COLUMNS_HERE]
],

You’d write it like this:

columns: [__columns__],

Then when you replace the three data config elements “column1”, “column2”, and “column3” with one named “columns” it will automatically do the substitution for you.

Leave a Comment