Chart.js Plugin

Developer Edition

The Chart plugin is powered by Chart.js , a Simple yet flexible JavaScript charting for designers & developers.

The plugin is available both for Web and Mobile Projects.

The Chart.js official documentation can be found here:  https://www.chartjs.org/docs/latest/

...
...
...

Some Chart examples

Using Chart.js plugin

In order to use this plugin, you must install it and activate it from the project parameters (Read the Plugin Installation documentation for more details)

...

Chart.js Plugin implementation example.

Plugin Settings

By double-Clicking on the plugin, you can setup the initial settings:

...
  • Aspect-Ratio  Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas)

  • Border Width  The Border width in Px

  • Data-label  The main label of the Chart

  • Data-set-colors  The colors for the initial dataset (eg. Red|Blue|Yellow|Green|Purple|Orange ) . Colors must be separated with a pipe (|) and can be Hex, RGB-RGBA or Constants Colors (eg. #00000 , rgb(12,23,54), rgba(67,87,124,0.5), red )

  • Data-set-data  The values for the initial dataset (eg. 12|19|3|5|2|3 )

  • Data-set-labels  The labels for the initial dataset (eg. 2001|2002|2003|2004|2005|2006 )

  • Fill  true-false, a value of true will draw plain colors bars/pie...

  • Legend-displayed  true-false, a value of true will display the Chart legend

  • Legend-fontcolor  the text color for the legend

  • Legend-fontsize  the text size for the legend in px

  • Legend-fullwidth  true-false, a value of true will show the legend at 100% width

  • Legend-position  top or bottom

  • Maintain-aspect-ratio  true or false, a value of true will keep the Graph aspect ratio when the layout size is changing

  • Responsive  true or false , a value of true will make the Chart layout responsive

  • Show Lines  true or false , a value of true will display Chart lines

  • Title-display  true or false , a value of true will display the Chart title

  • Title-fontsize  the Chart title size in px 

  • Title-position  the Chart title position: top or bottom

  • Title-text  the Chart title

  • Type  the Chart type: line || bar || radar || pie || doughnut || polarArea || bubble || scatter

Changing Chart dataset dynamically

You can add remove change your Chart dataset dynamically with a very simple lines of code.

The Plugin is represented by a js Object with some public methods and properties. The name of the object instance is  chartJS

  • Changing  Chart Type  
    chartJS.changeChartType(id, type); where id is the ID of the plugin in the page, and type is one of the Chart type values (line, bar …)
    Example:  chartJS.changeChartType("MyGraph", “radar");

  • Clear a  Chart
    chartJS.clearChart(id); where id is the ID of the plugin in the page

  • Add new data point To  Chart
    chartJS.addDataPoint(“myChart", 0, “label", “value", “color");

  • Replace a data point in Chart
    chartJS.replaceDataPoint(id, dataSet, index, label, value, color);

  • Add new dataset To   Chart
    chartJS.addDataSet(“pluginID", dataSet, dataColors, dataLabels);
    Example:  chartJS.addDataSet("pluginID", "12|19|3|5|2|3", "Red|Blue|Yellow|Green|Purple|Orange", "2001|2002|2003|2004|2005|2006");

  • Getting a Chart object Reference
    chartJS.getChartInstanceFromId(“MyId”);
    This function return an object that is an internal reference to the Chart.js object, it will let you access to all the functionalities available with Chart.js (Read the documentation at  https://www.chartjs.org/docs/latest/  for more details )

Copyright©  Nymphide Lab 2020 - All Rights Reserved 

...