deckdeckgo-charts

A collection of Web Components to easily draw charts

DeckDeckGo - Charts

Create a lightweight presentation using Web Components.

DeckDeckGo let you create without effort your slides and allows you to add some extra interactive features with the help of the Ionic components.

For the editing, DeckDeckGo supports both HTML or Markdown.

Moreover, DeckDeckGo bundles your presentation with services workers letting you publish it online as a Progressive Web App.

Cherry on the cake �� DeckDeckGo comes with its Progressive Web App that allows you to remote control your presentation �

Table of contents

• Charts
• Getting Started
  • Using DeckDeckGo Charts from a CDN
  • Install DeckDeckGo Charts from npm
  • Framework integration
• Showcase
  • Pie
  • Donut
  • Compare two graphs
  • Line and area
  • Compare two lines and smoothing effect
  • Compare two lines and display a grid
  • Bar
  • Compare multiple bars
• Usage
  • Pie usage
  • Line usage
  • Bar usage
• License

Charts

This project has for goal to let you easily add charts to your DeckDeckGo presentation.

To create and draw the charts, this project is using D3js.

However, this Web Component could be use with or without DeckDeckGo respectively could be use as a plotter library in any web projects.

Getting Started

The DeckDeckGo charts Web Component could be use directly in your project from a CDN, using a simple script include, or could be installed from npm.

Using DeckDeckGo charts from a CDN

It's recommended to use unpkg to use the DeckDeckGo charts from a CDN. To do so, add the following include script in the main HTML file of your project:

<script src="https://unpkg.com/deckdeckgo-charts@latest/dist/deckdeckgo-charts.js"></script>

Install DeckDeckGo charts from NPM

Install DeckDeckGo charts in your project from npm using the following command:

npm install deckdeckgo-charts

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

Showcase

The following examples are the one provided in the src/index.html of this component. If you would like to run them locally, proceed as follow:

git clone https://github.com/deckgo/deckdeckgo-charts
cd deckdeckgo-charts
npm install
npm run start

Pie

Donut

Compare two graphs

Line and area

Compare two lines and smoothing effect

Compare two lines and display a grid

Bar

Compare multiple bars

Usage

The main idea behind the DeckDeckGo charts is to be able to drop a csv file, provide it to the component and let it do the job respectively draw the chart.

Pie usage

The <deckgo-pie-chart/> Web Component draw a Pie chart.

CSV

The csv file should contains one or two columns. The values could be provided as number or percent.

Single column

If a single column is used, it should contains the values.

60
20
20

Two columns

If two columns are provided, the first column should contains the description of the value.

Wind;53.13%
Solar:1.96%
Geothermal;7.52%
Landfill Gas;15.67%
Biomass;14.79%
Qualified Hydropower;6.93%

Properties

The <deckgo-pie-chart/> expose the following properties:

Styling

The <deckgo-pie-chart/> could be styled using the following CSS4 variables:

Methods

The <deckgo-pie-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:

draw() => Promise<void>

Examples

You could find other examples of pie charts in the src/index.html of the project.

<deckgo-pie-chart width="500" height="400" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-pie-chart.csv"></deckgo-pie-chart>

Line usage

The <deckgo-line-chart/> Web Component draw a line chart.

CSV

The csv file should contains two or three columns.

The first column contains the values for the x axis. These should be provided as date or number.

The second and third columns contains the values for the y axis. These should be provided as number.

Two columns

With dates as x axis:

01.01.2018;5
01.03.2018;10
01.06.2018;8

With numbers as x axis:

1;5
2;10
3;8

Three columns

The third columns is optional, it could be use in case you would like to plot two charts on the same graph.

With dates as x axis:

01.01.2018;5;4
01.03.2018;10;3
01.06.2018;8;19

With numbers as x axis:

1;5;7
2;10;13
3;8;5

Properties

The <deckgo-line-chart/> expose the following properties:

Styling

The <deckgo-line-chart/> could be styled using the following CSS4 variables:

Methods

The <deckgo-line-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:

draw() => Promise<void>

Examples

You could find other examples of line charts in the src/index.html of the project.

<deckgo-line-chart width="500" height="400" date-pattern="dd.MM.yyyy" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-line-chart.csv"></deckgo-line-chart>

Bar usage

The <deckgo-bar-chart/> Web Component draw a Bar chart.

CSV

The csv file should contains at lest two columns. The values could be provided as number or percent.

Multiple columns

The first column should contains the labels or groups used for the X axis. The other columns are the values use for the Y axis.

Group A;5;0;10
Group B;10;6;12
Group C;8;14;8
Group D;14;8;16
Group E;18;4;5

Properties

The <deckgo-bar-chart/> expose the following properties:

Styling

The <deckgo-bar-chart/> could be styled using the following CSS4 variables:

Furthermore, as the Bar chart could draw dynamically multiple bars, it will generate dynamically the following CSS4 variable for each series of data where X is an index between 1 and the number of bars.

Methods

The <deckgo-bar-chart/> expose the following method in case you would like to redraw your chart, for example on resize of the window:

draw() => Promise<void>

Examples

You could find other examples of bar charts in the src/index.html of the project.

<deckgo-bar-chart width="500" height="400" src="https://raw.githubusercontent.com/fluster/deckdeckgo-charts/master/showcase/data-pie-chart.csv" style="--deckgo-chart-fill-color-bar1: #3880ff;"></deckgo-bar-chart>

License

MIT © David Dal Busco

Links

• View on GitHub
• View on NPM

Compatibility