JavaScript for FileMaker: C3

[av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-3a7w0s85′]

[av_textblock size=’24’ font_color=’custom’ color=’#ffffff’ av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
The C3 Charting library is one of the best libraries out there for charting. It gives us control over almost every pixel of the graph. We can update bar colors, text size, date and number formatting. There’s so much to customize.

This library is powerful, but it is simple to set up. It taps into the powerful but confusing D3 JS library.

It has 8.6K stars on github.com and is used by 3.9K users. It is well known.

We use this library all the time. Check it out.
[/av_textblock]

[/av_one_half][av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-34gjtd45′]

[av_image src=’https://www.geistinteractive.com/wp-content/uploads/2019/11/2019-11-26_10-42-37.png’ attachment=’363319′ attachment_size=’full’ align=’center’ styling=” hover=” link=’manually,https://c3js.org/’ target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ copyright=” animation=’no-animation’ av_uid=’av-k3ed4gv4′ custom_class=” admin_preview_bg=”][/av_image]

[/av_one_half][/av_section][av_section min_height=” min_height_px=’500px’ padding=’small’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#314144′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edhm34′ custom_class=”][/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-2zlpipph’]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2xnaezvp’]

[av_heading heading=’Does this work for FileMaker?’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k2h4y2c’][/av_heading]

[/av_one_full][av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2ribmeat’]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
Yes. This library works perfect in FileMaker. It solves basic issues of presenting data in a graph, and it is much more customizable than the native FileMaker chart object. You can do pretty much anything you want to the graph.

Data is gathered from anywhere in your FileMaker custom app and presented in a graph (or multiple graphs) in a web viewer.
[/av_textblock]

[av_button_big label=’C3 Chart Examples’ description_pos=’below’ link=’manually,https://c3js.org/examples.html’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_textblock size=’18’ font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
There are many possible uses for this library:

Use to display one graph of many types.
Use to create a dashboard of many graphs (possibly combine with the DataTables library).
Allow users to add or remove data or to change the type of graph.

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’small’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#314144′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edhm34′ custom_class=”][/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#eef4f6′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edbgwj’ custom_class=”]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-2jmgmb51′]

[av_heading heading=’Features’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-fx0qo8k’][/av_heading]

[av_heading heading=’Options’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=” custom_font=” custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-a5gsm9g’][/av_heading]

Choose many types of graphs
Add more than one chart to a web viewer to show different data
Change the colors of individual bars or lines
Change the range on the y-axis
Add a 2nd y-axis on the right
Create a composite chart: two different chart types in the same graph
Add lines to the x- or y-axis graphs.
Define regions with different colors
Change the formatting of numbers or dates

And so much more . . .
[/av_textblock]

[av_button_big label=’Full List of Options’ description_pos=’below’ link=’manually,https://c3js.org/reference.html’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_heading heading=’Interacting with FileMaker’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=” custom_font=” custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-n0z6es’][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
C3 JS will allow you to interact with your FileMaker custom app and data. You can even use FileMaker scripts to interact with the C3 chart and all the set up. Here’s a partial use case list:

Click on a bar or line and open up the records that produced that data.
Use a FileMaker script to add data to the chart
Use a FileMaker script to change the chart type or add a new chart or remove chart data.

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-1w21bu79′]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-1p7o1ffp’]

[av_heading heading=’How to Set it Up’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-hh6mqlw’][/av_heading]

[/av_one_full][av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-1jxifdut’]

[av_heading heading=’‘Installing’ in Your App’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-bdfas6s’][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
The easiest way to get this set up, to test it out, is to start with the C3ChartStart.fmp12 file (click the button below).

The FileMaker file attached here has a few fields and a web viewer. The fields, Code_HTML, Code_Data, Code_JS, and Code_FMScript, contain data relevant to the library. The HTML_Calc field substitutes out some placeholder text. The web viewer renders what’s in the HTML_Calc field.

By the way: This field-to-web viewer rendering method is completely legitimate. There’s a lot of good reasons for this method. There are other ways to work with code, but for now, stick with this method.

Here are the steps:

Simply import the one record from the C3ChartStart.fmp12 file into a new table in your custom app.
Set up the HTML_Calc field in your file to be the same as in the C3ChartStart file.
Create a layout similar to the example file’s layout (or copy/paste the objects from the Start file do your own).
Make sure that the web viewer’s calculation dialog is set to read the HTML_Calc field.
That’s it. You should see a C3 chart set up with sample data.

For this library, I’d recommend using this method for now. We will explore other ways later.
[/av_textblock]

[av_button_big label=’Get the File’ description_pos=’below’ link=’download,363342′ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’small’ shadow=’shadow’ bottom_border=’border-extra-arrow-down’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#8dbbc5′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edhm34′ custom_class=”][/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-1buscen9′]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-19ezi411′]

[av_heading heading=’The Data’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-72w4fn8′][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

This is what the data looks like for this example. It is an OBJECT that holds values of one record that will be displayed in the chart.

Once the records are collected as an array of objects, the array is placed into a field: “Code__Data” and is then calculated into the JavaScript inside the web viewer.

This object contains many properties. One of them needs to be defined for the x-axis, and any of the remaining ones can be set on the y-axis.
[/av_textblock]

[av_button_big label=’More Info About the Data’ description_pos=’below’ link=’manually,https://c3js.org/reference.html#data-json’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3fpeed7′ custom_class=” admin_preview_bg=”]

[
{
        "date": "2018-01-31",
        "peaches": 204,
        "pears": 100,
        "apples": 213,
        "grapes": 60,
        "bananas": 143
    },
...
]

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-u62fsit’]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-op4q0x1′]

[av_heading heading=’Updating the Options’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-1j1mdkk’][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]
The C3 Charting library has a ton of options for you to configure. The Code_JS field contains the code shown off to the right. Let’s review the options in this file. To see the full list of options, review the documentation.

bindto: the div in which the chart will be rendered.
data.groups: grouping two or more properties from the JSON together
data.onclick: the function run when a bar is clicked on
data.names: changing the name of the property (from lowercase property key to uppercase, in this example)
data.colors: giving each series a color
data.type: the type of chart
data.json: the data array
data.keys: indicating which property is on the x-axis and which will be shown on the y-axis
axis.x: various options for the x-axis (notice the “axis.x.tick.format” property.)
axis.y: various options for the y-axis
grid: various options for the grid (grid.x.show and grid.y.show, for example)

There are many more options. I keep discovering new ways to customize the charts I set up
[/av_textblock]

[av_button_big label=’See All the Options’ description_pos=’below’ link=’manually,https://c3js.org/reference.html’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

var chart = c3.generate({
    bindto: '#chart',
    data: {
        groups: [
            ['apples','peaches']
            ],
            onclick:function (d) {
                console.log(d) 
                var obj = JSON.stringify(d);
                var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
                     window.location = theURL;
        },
        names: {
            apples: 'Apples',
            peaches: 'Peaches'
        },
        colors: {
            'apples': '#9600b8',
            'peaches': '#ff9808'
        },
        type: 'bar',
        json: __Data__,
        keys: {
            x: 'date',
            value: ['apples', 'peaches']
        }
    },
    axis: {
           x: { 
                  
               tick: {
                   rotate: -60,
                format: '%b %y'
                    },
                type: 'timeseries'
            },
            y: {
                      tick: {
                  format: '' 
                },
                 label: {
                        text: 'Quantity Sold',
                        position: 'outer-middle'
                }
  }
           
            },
    grid: {
            x: {
                show: true,
             
              },
              y: {
                  show: true
              }
    }
});

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

It uses the fmp URL, which means, currently, this will NOT work in WebDirect (though we know that is set to change in the next version of FileMaker).

[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=’scroll’ bottom_border_style=’scroll’ margin=” custom_margin=’0px’ scroll_down=” custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av_element_hidden_in_editor=’0′ av_uid=’av-u62fsit’]
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ row_boxshadow=” row_boxshadow_color=” row_boxshadow_width=’10’ link=” linktarget=” link_hover=” padding=’0px’ highlight=” highlight_size=” border=” border_color=” radius=’0px’ column_boxshadow=” column_boxshadow_color=” column_boxshadow_width=’10’ background=’bg_color’ background_color=” background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_breaking=” mobile_display=” av_uid=’av-op4q0x1′]

[av_heading heading=’The Callback to FileMaker’ tag=’h3′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-bw59gz8′][/av_heading]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

The JavaScript Function

onclick:function (d) {
             console.log(d) 
             var obj = JSON.stringify(d);
             var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
             window.location = theURL;
        }

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

It uses the fmp URL, which means, currently, this will NOT work in WebDirect (though we know that is set to change in the next version of FileMaker).

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

Quick Explanation

[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

Start Here:

onclick:function (d) {

This function is run when a user clicks on a bar. That’s the ‘data.onclick’ option. This function takes the parameter d, which is the entire data object of the bar clicked on.

 console.log(d)

Here we just log to the console the data to be sure.

var obj = JSON.stringify(d);

Now we take the data object and stringify it. The reason we do this s because the d variable is a JavaScript object. It needs to be a JSON object for FileMaker.
[/av_textblock]

[av_textblock size=” font_color=” color=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-k3aayf0j’ custom_class=” admin_preview_bg=”]

Continue…

  var theURL = "fmp://$/__FileName__?script=__Script__" + obj;
window.location = theURL;

This code simply invokes the fmpUrl. It sends the obj variable back to FileMaker.

Notice the placeholder text in here:

__FileName__

and

__Script__

These are replaced with the current file name and a script name in the “Code_FMScript” field.

If you’re having trouble getting this to work, refer to this blog post from LuminFire.

If you’re using FileMaker Pro 18 Advanced, you can update the ‘fmp://’ part of the function to “fmp18://”.
[/av_textblock]

[/av_one_half]
[/av_section]

[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-border-styling’ bottom_border=’no-border-styling’ bottom_border_diagonal_color=’#333333′ bottom_border_diagonal_direction=” bottom_border_style=” custom_margin=’0px’ custom_margin_sync=’true’ custom_arrow_bg=” id=” color=’main_color’ background=’bg_color’ custom_bg=’#eef4f6′ background_gradient_color1=” background_gradient_color2=” background_gradient_direction=’vertical’ src=” attachment=” attachment_size=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=” av_element_hidden_in_editor=’0′ av_uid=’av-k3edfsn5′ custom_class=”]
[av_heading heading=’Other Thoughts’ tag=’h2′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” padding=’10’ color=’custom-color-heading’ custom_font=’#8dbbc5′ custom_class=” admin_preview_bg=” av-desktop-hide=” av-medium-hide=” av-small-hide=” av-mini-hide=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” av_uid=’av-5dxknuc’][/av_heading]

[av_button_big label=’C3 Charing Posts’ description_pos=’below’ link=’manually,https://www.geistinteractive.com/?s=c3′ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

Add more data
Change the type of chart
Remove data from the chart
Group or UnGroup the data
Add or remove lines on the grid

and much more.

In our FileMaker DevCon 2019 Training session, we explored this. Review this page to help you see more we can do.
[/av_textblock]

[av_button_big label=’Using the C3Chart API’ description_pos=’below’ link=’manually,https://www.geistinteractive.com/fm-js-fm-webviewer-c3/’ link_target=” icon_select=’no’ icon=’ue800′ font=’entypo-fontello’ custom_font=’#ffffff’ color=’theme-color’ custom_bg=’#444444′ color_hover=’theme-color’ custom_bg_hover=’#444444′ av_uid=’av-k3ecmu03′ custom_class=” admin_preview_bg=”][/av_button_big]

[/av_one_half]
[/av_section]

JavaScript for FileMaker: C3

The JavaScript Function

Quick Explanation

Start Here:

Continue…

RECEIVE THE OCCASIONAL UPDATE

NEW PROJECT OR COLLABORATION?

FOLLOW US