API Documentation

Namespace

ChartJSModule

ChartJSModule

module of chartjs

View Source modules/chartjs/chartjs.module.js, line 1

Namespaces

chartJSUtils

Methods

# static barChart(title, htmlElementContainer, idElement, labels, datasets, horizontalopt, positionOfLegendopt, clickEventForEachElementopt) → {*|Object}

function to build a bar chart
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
labels array array of strings containing the labels of each value within the dataset
datasets array array of objects containing the dataset groups taking into account the group of labels, with the structure: [ { data: array, // array of numbers containing the values to be graphed, label: string, // title of the dataset, ?backgroundColor: string, // rgba string of the background color of the value, ?borderColor: string, // rgba string the border color of the value, ?backgroundOpacity: boolean } ]
horizontal boolean <optional>
 false Boolean that demarcates whether the chart is horizontal or not
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/bar.chart.js, line 7

* | Object
Example
chartJS.barChart(
     'bar-chart', // title of chart
     document.getElementById('charts'), // id of container of the chart
     'bar_chart', // id of chart to build
     ['test_1', 'test_2', 'test_3'], // labels of data
     [
       {
         data: [58, 90, 50],
         label: 'a',
         backgroundColor: 'rgba(255,9,0,1)',
         backgroundOpacity: true,
         borderColor: 'rgba(255, 200, 150)'
       },
       {
         data: [50, 588, 20],
         label: 'b'
       }
     ], // data
);

# static doughnutChart(title, htmlElementContainer, idElement, labels, datasets, positionOfLegendopt, backgroundColoropt, clickEventForEachElementopt) → {*|Object}

function to build a doughnut chart
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
labels array array of strings containing the labels of each value within the dataset
datasets array array of integers with data. structure: [ [number, number, ...], [number, number, ...], ... ]
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
backgroundColor array <optional>
 null array of colors rgba with length equal to data length
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/doughnut.chart.js, line 7

* | Object
Example
chartJS.doughnutChart(
   'doughnut-chart', // title of chart
   document.getElementById('charts'), // id of container of the chart
   'doughnut_chart', // id of chart to build
   ['test_1', 'test_2', 'test_3'], // labels of data
   [[58, 90, 50], [50, 20, 20]], // data
);

# static lineChart(title, htmlElementContainer, idElement, labels, datasets, positionOfLegendopt, clickEventForEachElementopt) → {*|Object}

function to build a line chart
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
labels array array of strings containing the labels of each value within the dataset
datasets array array of objects containing the dataset groups taking into account the group of labels, with the structure: [ { data: array, // array of numbers containing the values to be graphed, label: string, // title of the dataset, backgroundColor: string, // rgba string of the background color of the value, borderColor: string, // rgba string the border color of the value, backgroundOpacity: boolean, withFilling: boolean // extend color between origin to data on chart } ]
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/line.chart.js, line 7

* | Object
Example
chartJS.lineChart(
  'line-chart', // title of chart
  document.getElementById('charts'), // id of container of the chart
  'line_chart', // id of chart to build
  [
     'January',
     'February',
     'March',
     'April',
     'May',
     'June',
     'July',
     'August',
     'September',
     'October',
     'November',
     'December'
  ], // labels of data
  [
    {
      data: [58, 90, 50, 25, 80, 96, 100, 53, 26, 10, 52, 0],
      label: 'a',
      backgroundColor: 'rgba(255,213,0,0.33)',
    },
    {
      data: [50, 20, 20, 29, 40, 45, 21, 5, 56, 98, 100, 90],
      label: 'b',
      withFilling: true,
      backgroundOpacity: true
    }
  ], // data
);

# static pieChart(title, htmlElementContainer, idElement, labels, datasets, positionOfLegendopt, backgroundColoropt, clickEventForEachElementopt) → {*|Object}

function to build a pie chart
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
labels array array of strings containing the labels of each value within the dataset
datasets array array of integers with data. structure: [ [number, number, ...], [number, number, ...], ... ]
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
backgroundColor array <optional>
 null array of colors rgba with length equal to data length
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/pie.chart.js, line 7

* | Object
Example
chartJS.pieChart(
     'pie-chart', // title of chart
     document.getElementById('charts'), // id of container of the chart
     'pie_chart', // id of chart to build
     ['test_1', 'test_2', 'test_3'], // labels of data
     [[58, 90, 50], [50, 588, 20]], // data
     'top', // position of legend
     ['rgba(139, 89, 121, 1)','rgba(251, 234, 177, 1)','rgba(34, 244, 142, 1)'], // array of colors rgba equal to data length
     (value, label) => alert(`the value ${value} belongs to ${label}`) // basic function in event on click
);

# static polarAreaChart(title, htmlElementContainer, idElement, labels, datasets, positionOfLegendopt, backgroundColoropt, backgroundOpacityopt, clickEventForEachElementopt) → {*|Object}

function to build a polar area chart, it should be noted that although more than 1 dataset can be handled, it is not recommended to do so, since the data could be visual obfuscated
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
labels array array of strings containing the labels of each value within the dataset
datasets array array of integers with data. structure: [ [number, number, ...], [number, number, ...], ... ]
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
backgroundColor array <optional>
 null array of colors rgba with length equal to data length
backgroundOpacity boolean <optional>
 false boolean that marks if the background color is opaque
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/polarArea.chart.js, line 7

* | Object
Example
chartJS.polarAreaChart(
   'polar-area-chart', // title of chart
   document.getElementById('charts'), // id of container of the chart
   'polar_area_chart', // id of chart to build
   ['test_1', 'test_2', 'test_3'], // labels of data
   [[58, 90, 50], [50, 20, 20]], // data
   'top', // legend position
   ['rgba(139, 89, 121, 1)','rgba(251, 234, 177, 1)','rgba(34, 244, 142, 1)'], // array of colors rgba equal to data length
   true, // background opacity
   (value, label) => alert(`value: ${value} - label: ${label}`) // basic function in event on click
);

# static radarChart(title, htmlElementContainer, idElement, labels, datasets, positionOfLegendopt, clickEventForEachElementopt) → {*|Object}

function to build a radar chart
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
labels array array of strings containing the labels of each value within the dataset
datasets array array of objects containing the dataset groups taking into account the group of labels, with the structure: [ { data: array, // array of numbers containing the values to be graphed, label: string, // title of the dataset, backgroundColor: string, // rgba string of the background color of the value, borderColor: string, // rgba string border color backgroundOpacity: boolean } ]
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/radar.chart.js, line 7

* | Object
Example
chartJS.radarChart(
     'radar-chart', // title of chart
     document.getElementById('charts'), // id of container of the chart
     'radar_chart', // id of chart to build
     ['test_1', 'test_2', 'test_3'], // labels of data
     [
       {
         label: 'a',
         data: [52, 56, 95],
         backgroundColor: 'rgba(255, 89, 52)',
         borderColor: 'rgb(12,238,148)',
         backgroundOpacity: true
       },
       {
         label: 'b',
         data: [86, 20, 59]
       }
     ], // data
     'top', // legend position
     (value, label) => alert(`value: ${value} - label: ${label}`) // onclick basic function
);

# static scatterChart(title, htmlElementContainer, idElement, datasets, positionOfLegendopt, clickEventForEachElementopt) → {*|Object}

function to build a scatter chart
Parameters:
Name Type Attributes Default Description
title string chart title
htmlElementContainer HTMLBodyElement container html element, where the chart is inserted
idElement string chart id
datasets array array of objects containing the dataset groups taking into account the group of labels, with the structure: [ { data: array // array of numbers containing the values to be graphed, label: string // title of the dataset, backgroundColor: string // rgba string of the background color of the value, backgroundOpacity: boolean, width: number // width of bubble } ]
positionOfLegend string <optional>
 'top' legend position, which can be (top | bottom | left | right)
clickEventForEachElement ChartJSModule.chartJSUtils.reusableOnClickFunction <optional>
 () => {} callback function on event click on chart element
See:

View Source modules/chartjs/charts/scatter.chart.js, line 7

* | Object
Example
chartJS.scatterChart(
     'scatter-chart',
     document.getElementById('charts'),
     'scatter_chart',
     [
       {
         data: [
           { x: 5, y: 10 },
           { x: 4, y:  12 }
         ],
         label: 'test_1',
         backgroundColor: 'rgb(63,211,58)',
         width: 10
       },
       {
         data: [
           { x: 5, y: 20 },
           { x: 2, y:  15 }
         ],
         label: 'test_2'
       }
     ],
     'top',
     (value) => alert(`value is ${JSON.stringify(value)}`)
);