Chart Lightning Web Component ReadMe (Managed Package)

Vlocity Insurance and Health Summer '20

The Chart Lightning Web Component displays data as a chart and enables users to perform actions from the chart.

Available c-chart Attributes

For more chart configuration options, see Chart.js.

Example c-chart Component

<c-chart
  values="{val2}"
  labels="{labels2}"
  type="{type2}"
  background-color="{backgroundColor2}"
></c-chart>

Example Using Query as a Data Source

Set the channel attribute to a value of "query".

// import the dataHandler method
    import { getDataHandler } from "c/utility";

    // declare the query
    recordSource = {
        type: "query",
         {
        query: "SELECT FirstName,Id FROM Contact"
        }
    };

    // declare a variable with track
    @track
    testLabel1 = [];

    let request = JSON.stringify(this.recordSource);

    // call the getDataHandler and format the response from the query
    getDataHandler(
        request
    ).then(data => {
        console.log('request from query : ',data);
        this.formatResponse(data);
    }).catch(error => {
        console.log('error from query : ',error);
    });

<c-chart
  channel="query"
  values="{testVal1}"
  labels="{testLabel1}"
  type="{testType1}"
  background-color="{testBackgroundColor1}"
></c-chart>

Example Using an Omnistudio Data Mapper as a Data Source

To use a Data Mapper as a data source:

• Create a Data Mapper to use with the Chart component.

• Set the channel attribute to a value of dataraptor.

• Add and configure a DatasourceDataraptor component. See DatasourceDataraptor Lightning Web Component.

@track
     testLabel2 = [];

<c-chart
  values="{testVal2}"
  labels="{testLabel2}"
  type="{testType2}"
  background-color="{testBackgroundColor2}"
  channel="dataraptor"
>
</c-chart>

<c-datasource-dataraptor
  bundlename="GetContactDetails"
  inputmap="{inputMap}"
  channel="dataraptor"
  debug="true"
>
</c-datasource-dataraptor>

Example Values for Arrays

// Labels needs to be an array.
    labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
    // Incase you provide a string it will get converted into character array
    labels = 'hello' /* This Becomes */ labels = ['h','e','l','l','o']


    // Values needs to be an array.
    values = [10,5,45,25,15]
    //or
    values = [,,,4,2]
    //or
    values = [3.5,6,7,0,8.5]

    /****** CANNOT BE NULL *****/

    //  BackgroundColor needs to be an array.

    // can be RGB colors
    backgroundColor1 = [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)'
    ];
    // can be string color names

    backgroundColor1 = ['Red','Green','Yellow']

Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The Chart Lightning Web Component displays data as a chart and enables users to perform actions from the chart.

Available c-chart Attributes

For more chart configuration options, see Chart.js.

Example c-chart Component

<c-chart
  values="{val2}"
  labels="{labels2}"
  type="{type2}"
  background-color="{backgroundColor2}"
></c-chart>

Example Using Query as a Data Source

Set the channel attribute to a value of "query".

    // import the dataHandler method
    import { getDataHandler } from "c/utility";

    // declare the query
    recordSource = {
        type: "query",
         {
        query: "SELECT FirstName,Id FROM Contact"
        }
    };

    // declare a variable with track
    @track
    testLabel1 = [];

    let request = JSON.stringify(this.recordSource);

    // call the getDataHandler and format the response from the query
    getDataHandler(
        request
    ).then(data => {
        console.log('request from query : ',data);
        this.formatResponse(data);
    }).catch(error => {
        console.log('error from query : ',error);
    });

<c-chart
  channel="query"
  values="{testVal1}"
  labels="{testLabel1}"
  type="{testType1}"
  background-color="{testBackgroundColor1}"
></c-chart>

Example Using DatarRaptor as a Data Source

To use a Data Mapper as a data source:

• Create a Data Mapper to use with the Chart component.

• Set the channel attribute to a value of "dataraptor".

• Add and configure a DatasourceData Mapper component. See DatasourceData Mapper Lightning Web Component.

     @track
     testLabel2 = [];

<c-chart
  values="{testVal2}"
  labels="{testLabel2}"
  type="{testType2}"
  background-color="{testBackgroundColor2}"
  channel="dataraptor"
>
</c-chart>

<c-datasource-dataraptor
  bundlename="GetContactDetails"
  inputmap="{inputMap}"
  channel="dataraptor"
  debug="true"
>
</c-datasource-dataraptor>

Example Values for Arrays

    // Labels needs to be an array.
    labels = ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
    // Incase you provide a string it will get converted into character array
    labels = 'hello' /* This Becomes */ labels = ['h','e','l','l','o']


    // Values needs to be an array.
    values = [10,5,45,25,15]
    //or
    values = [,,,4,2]
    //or
    values = [3.5,6,7,0,8.5]

    /****** CANNOT BE NULL *****/

    //  BackgroundColor needs to be an array.

    // can be RGB colors
    backgroundColor1 = [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)'
    ];
    // can be string color names

    backgroundColor1 = ['Red','Green','Yellow']

Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19

The Chart Lightning Web Component displays data as a chart and enables users to perform actions from the chart.

Available c-chart Attributes

For more chart configuration options, see Chart.js.

Example c-chart Component

<c-chart
  values="{val2}"
  labels="{labels2}"
  type="{type2}"
  background-color="{backgroundColor2}"
></c-chart>

Example Using Query as a Data Source

Set the channel attribute to a value of ``query''.

    // import the dataHandler method
    import { getDataHandler } from "c/utility";

    // declare the query
    recordSource == {
        type: "query",
         {
        query: "SELECT FirstName,Id FROM Contact"
        }
    };

    // declare a variable with track
    @track
    testLabel1 == [];

    let request == JSON.stringify(this.recordSource);

    // call the getDataHandler and format the response from the query
    getDataHandler(
        request
    ).then(data => {
        console.log('request from query : ',data);
        this.formatResponse(data);
    }).catch(error => {
        console.log('error from query : ',error);
    });

<c-chart
  channel="query"
  values="{testVal1}"
  labels="{testLabel1}"
  type="{testType1}"
  background-color="{testBackgroundColor1}"
></c-chart>

Example Using DatarRaptor as a Data Source

To use a Data Mapper as a data source:

• Create a Data Mapper to use with the Chart component.

• Set the channel attribute to a value of ``dataraptor''.

• Add and configure a DatasourceData Mapper component. SeeDatasourceData Mapper Lightning Web Component.

     @track
     testLabel2 == [];

<c-chart
  values="{testVal2}"
  labels="{testLabel2}"
  type="{testType2}"
  background-color="{testBackgroundColor2}"
  channel="dataraptor"
>
</c-chart>

<c-datasource-dataraptor
  bundlename="GetContactDetails"
  inputmap="{inputMap}"
  channel="dataraptor"
  debug="true"
>
</c-datasource-dataraptor>

Example Values for Arrays

    // Labels needs to be an array.
    labels == ['Red', 'Orange', 'Yellow', 'Green', 'Blue'];
    // Incase you provide a string it will get converted into character array
    labels == 'hello' /* This Becomes */ labels == ['h','e','l','l','o']


    // Values needs to be an array.
    values == [10,5,45,25,15]
    //or
    values == [,,,4,2]
    //or
    values == [3.5,6,7,0,8.5]

    /****** CANNOT BE NULL *****/

    //  BackgroundColor needs to be an array.

    // can be RGB colors
    backgroundColor1 == [
        'rgb(255, 99, 132)',
        'rgb(255, 159, 64)',
        'rgb(255, 205, 86)',
        'rgb(75, 192, 192)',
        'rgb(54, 162, 235)'
    ];
    // can be string color names

    backgroundColor1 == ['Red','Green','Yellow']