Basic Usage

Overview

• Start Chartboard
• Basic Dashboad
• White mode
• Flipping mode
• Weight

---

How to start chartboard

First thing that you need to do after a successful installation is to create an
empty config that will provide a base for your customizations Dashboard
You can create exemple dashboard with

   shell>$ python src/manage.py runserver [<host>] [<port>]

where host and port parameters are optional (by default these are 0.0.0.0 and 8080)

You can now point your web browser to http://localhost:8080

The config(s) file(s) path can be define in two way:

• [chartboard dir]/src/chartboard/app/Config/
• by variable environment TIPBOARD_DIRECTORY

⚠️ Flipboard dashboard mode:

If 2 files are present in the directory, auto flip will be on
If there is only one file in the directory the dashboard flip mode will be off

by default there is 2 dashboard config file defines in [TIPBOARD_DIRECTORY] variable:

• src/chartboard/app/Config/dev_layout
• src/chartboard/app/Config/layout_config

There are many exemples of dashboard config in github repository

Dashboard config exemple

Dashboard config file respect yaml syntax with two section:

• details (relative to dashboard, ex: title or color_mode)
• layout (definition of all tiles present in dashboard)

details: page_title: One tile dashboard color_mode: black layout: - row: - col: - tile_template: line_chart tile_id: line_chartjs_ex title: line tile's

Adding [color_mode: white] in details header of config file

• change: text color, gridlines color, background, etc

details: page_title: white dashboard color_mode: white layout: - row: - col: - tile_template: polararea_chart tile_id: polararea_ex title: polar-area

Adding [flip-time-(+d)] in col active flipmode tile effect, number is in second

details: page_title: flip dashboard color_mode: black layout: - row: - col flip-time-2: - tile_template: big_value tile_id: bv_ex title: Big value - tile_template: polararea_chart tile_id: polararea_ex title: polar-area - tile_template: pie_chart tile_id: pie_chartjs_ex title: pie chart - col flip-time-5: - tile_template: cumulative_flow tile_id: cfjs_ex title: cumulflow - tile_template: half_doughnut_chart tile_id: half_doughnut_ex title: half_doughnut

Adding [weight-(+d)] in col (or row) add width or height for card

details: page_title: Chartboard exemple color_mode: black layout: - row weight-3: - col: - tile_template: half_doughnut_chart tile_id: half_doughnut_ex42 title: doughnut - col flip-time-2 weight-3: - tile_template: cumulative_flow tile_id: cfjs_ex title: cumulflow - tile_template: line_chart tile_id: line_chartjs_ex title: line tile's - col: - tile_template: norm_chart tile_id: normjs_ex title: norm tile's - tile_template: polararea_chart tile_id: polararea_ex title: polar-area - col flip-time-2: - tile_template: bar_chart tile_id: barjs_ex title: bar tile's - tile_template: radar_chart tile_id: radar_ex title: radar chart - row weight-2: - col: - tile_template: just_value tile_id: jv_ex title: Just value 1 - col: - tile_template: just_value tile_id: jv_ex2 title: Just value 2 - col: - tile_template: just_value tile_id: jv_ex3 title: Just value 3 - col flip-time-2: - tile_template: simple_percentage tile_id: sp_ex title: Percentage - tile_template: listing tile_id: list_ex title: Listing