Skip to content

Latest commit

 

History

History
174 lines (109 loc) · 5.3 KB

README.md

File metadata and controls

174 lines (109 loc) · 5.3 KB

TablePress Extension: Chart.js

Create a Chart.js using TablePress as data source for WordPress

Banner GitHub tag (latest by date) GitHub Donate with PayPal

📚 Index

📄 About

This plugin code base and idea is a modification of TablePress Extension: Chartist.

💻 Install

Prerequisite: The TablePress plugin

  1. Download and extract the ZIP file.
  2. Upload the folder "tablepress_chartjs" to the "wp-content/plugins/" directory of your WordPress installation, e.g. via FTP.
  3. Activate the plugin "TablePress Extension: Chart.js" on the "Plugins" screen of your WordPress Dashboard.

📈 Usage

Use the Shortcode [tp-chartjs id=N /]

Example:

[tp-chartjs id=1 label=A data=B,C/]

To create a chart from the TablePress ID 1 where label are column A, and dataset points are columns B and C.

TablePress Usage

Result:

Chartjs Usage

📑 Parameters

id

TablePress ID reference

  • Example: [tp-chartjs id=1/]
  • Value: Integer id
  • Required

chart

Chart type used

  • Example: [tp-chartjs id=1 label=A data=B,C chart=line/]
  • Values: Select one of this
    • line: Vertical
    • bar: Vertical Bar
    • sbar: Stacked Vertical Bar
    • hbar: Horizontal Bar
    • hsbar: Horizontal Stacked Bar
  • Default: line

label

Column Axis label

  • Example: [tp-chartjs id=1 label=A data=B,C/]
  • Value: One character from TablePress columns [A-Z]
  • Default: A

data

Column(s) datasets used to populate chart

  • Example: [tp-chartjs id=1 label=A data=B,C,D,E/]
  • Values: One or more comma separated columns character [A-Z]
  • Default: B

color

The colors you can use in populated lines or bars.

  • Example: [tp-chartjs id=1 label=A data=B,C color=blue,red/]
  • Values: One or more comma separated colors
    • #36a2eb blue
    • #ff6384 red
    • #ff9f40 orange
    • #ffcd56 yellow
    • #4bc0c0 green
    • #9966ff purple
    • #c9cbcf grey
    • #000000 black
  • Default: blue,red,orange,yellow,green,purple,grey,black

On example column B draws blue and column C draws red

height

Declare height of canvas HTML object

  • Example: [tp-chartjs id=1 label=A data=B,C height=300/]
  • Values: Integer value transformed into pixels
  • Default: Automatic

first

Declare that only use the first {n} rows of data

  • Example: [tp-chartjs id=1 label=A data=B,C first=10/]
  • Value: Integer value offset
  • Default: All data

last

Declare that only use the last {n} rows of data

  • Example: [tp-chartjs id=1 label=A data=B,C last=10/]
  • Values: Integer value offset
  • Default: All data

💳 Donate to Developer

If you like my work, please donate.

Donate to Developer

✅ ToDo

  • Chart Title
  • Vertical Bar chart support
  • Pie chart support
  • Stacked chart support
  • Order data
  • Detect Mobile devices
  • Title of Chart show or not
  • Modern Dark Theme

🏆 Credits