Sales Dashboard using Charts JS

This tutorial walks you through the process of designing an application that displays the data in different types of graphs. This example illustrates how to design a sales dashboard that displays the data of number of units sold per month during the period January 2019 to June 2019 using Charts.js and Charts.css external script.

Follow the below steps to design the sales dashboard app and display the data in different types of graphs:

Verify Prerequisites

ASG-Studio must have installed and a database is available with the necessary data. For this example:

  • ASG-Studio is installed and is accessible through the URL - http://localhost:8080/index.html.
  • PostgreSQL is installed on the local computer and a database is created for this tutorial as per the following details:
    1. Database name: SalesDB
    2. User name: postgres
    3. Password: p@ssW0rd
    4. The public.Sales table contains the following columns and data:
      5. month quantity
      Jan 15
      Feb 20
      Mar 25
      Apr 15
      May 32
      Jun 10

Create Project

The sales dashboard app requires a project to contain a UI screen.

Perform the following steps:

  1. Launch ASG-Studio.
  2. On the Projects screen, click ADD. If you are creating your first project, click Create Now.
  3. Enter SalesDashboard as Name and click Save.

Create Datasource

The sales dashboard app requires to get the sales data from database.

Perform the following steps:

  1. Open the SalesDashboard project.
  2. Navigate to Datasources and click Create.
  3. Enter the below details and click Save.
    • Select Database as Type of datasource.
    • Enter SalesDashboard as Name.
    • Select PostgreSQL as Database Type.
    • Enter Localhost as Host.
    • Enter 5432 as Port.
    • Enter SalesDB as Database
    • Enter postgres as Username.
    • Enter p@ssW0rd as Password.
    • Set Is Active to Yes.
    • Set Choose connection pool size to 5.
  4. Click Add Custom Webservices and generate the following method:
    5. Required settings Value to enter
    Method Name

    getSalesDetails
    Query

    Standard

    Operation

    Select
    Table

    public.sales
    Columns month, quantity

Create Script Files

To display charts in your app views, you need to attach Charts.js and Charts.css files to the app view. The Charts.js file is JavaScript based chart generator that allows you to display charts in your app views without writing any code. The Charts.css file is the style sheet used to design the chart with pre-configured styles for various types of charts.

Perform the following steps:

  1. Open the SalesDashboard project.
  2. Navigate to UI Models folder.
  3. Click New from the context menu and click Javascript.
  4. Enter Charts.js as File Name and click OK.
  5. Replace the content in Charts.js file with the content from the following link:

    6. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js

  6. Click New from the context menu and click CSS.
  7. Enter Charts.css as File Name and click OK.
  8. Replace the content in Charts.css file with the content from the following link:

    9. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css

    The external scripts of Charts.js and Charts.css are added to the project.

Design UI Model

The sales dashboard app requires an app view to display data in the form of graphs.

Perform the following steps:

  1. Open the SalesDashboard project.
  2. Navigate to UI Models folder.
  3. Click New from the context menu and click UI Model.
  4. Enter Dashboard as the File Name and click OK.
  5. Select the Header and enter Sales Dashboard as Label.
  6. Click External Scripts, enter Chart as Variable and select Charts.js-UI Model file from the drop-down.
  7. Click External CSS and select Charts.CSS-UI Models from the drop-down.
  8. Navigate to Controls tab, drag the Layout-Column-1/3 1/3 1/3 control to app view.
  9. Insert Canvas control in each of the cells in Layout-Column-1/3 1/3 1/3 control.
  10. Configure the Settings of Canvas control in cell 1 as follows:
    11. Required settings Values to enter
    ID

    sales-graph-bar
    Width

    250
    Height 250
  11. Configure the Settings of Canvas control in cell 2 as follows:
    12. Required settings Values to enter
    ID

    sales-graph-line
    Width

    250
    Height 250
  12. Configure the Settings of Canvas control in cell 3 as follows:
    13. Required settings Values to enter
    ID

    sales-graph-pie
    Width

    250
    Height 250
  13. Click the Page Lifecycle icon and select Page Load from Select Events drop-down.
  14. In the Script designer create a model using the following elements in the same order. Connect the elements using sequence flow.
    15. Required settings Values to enter
    Name

    Start
    Required settings Values to enter
    Name

    Get Sales Data
    Datasource SalesDashboard
    Method getSalesData
    Response Reference salesData
    Required settings Values to enter
    Name

    View Bar Chart
    Function Name initBarChart
    Function Body

    let salesData = this.data.salesData.data.results;

    let months = salesData.map(function(e) {

    return e.month;

    });

    let quantities = salesData.map(function(e) {

    return e.quantity;

    });

    let element = document.getElementById('sales-graph-bar');

    let ctx = element["getContext"]('2d');

    let myChart = new Chart(ctx, {

    type: 'bar',

    data: {

    labels: months,

    datasets: [{

    label: 'Sales FYI 2019 - 20',

    data: quantities,

    backgroundColor: [

    'rgba(255, 99, 132, 0.2)',

    'rgba(54, 162, 235, 0.2)',

    'rgba(255, 206, 86, 0.2)',

    'rgba(75, 192, 192, 0.2)',

    'rgba(153, 102, 255, 0.2)',

    'rgba(255, 159, 64, 0.2)'

    ],

    borderColor: [

    'rgba(255, 99, 132, 1)',

    'rgba(54, 162, 235, 1)',

    'rgba(255, 206, 86, 1)',

    'rgba(75, 192, 192, 1)',

    'rgba(153, 102, 255, 1)',

    'rgba(255, 159, 64, 1)'

    ],

    borderWidth: 1

    }]

    },

    options: {

    scales: {

    yAxes: [{

    ticks: {

    beginAtZero: true

    }

    }]

    }

    }

    });
    Required settings Values to enter
    Name

    View Line Chart
    Function Name initLineChart
    Function Body

    let salesData = this.data.salesData.data.results;

    let months = salesData.map(function(e) {

    return e.month;

    });

    let quantities = salesData.map(function(e) {

    return e.quantity;

    });

    let element = document.getElementById('sales-graph-line');

    let ctx = element["getContext"]('2d');

    let myChart = new Chart(ctx, {

    type: 'line',

    data: {

    labels: months,

    datasets: [{

    data: quantities,

    label: "Sales",

    borderColor: "#3e95cd",

    fill: false

    }]

    },

    options: {

    title: {

    display: true,

    text: 'Sales FYI 2019 - 20'

    }

    }

    });
    Required settings Values to enter
    Name

    View Pie Chart
    Function Name initPieChart
    Function Body

    let salesData = this.data.salesData.data.results;

    let months = salesData.map(function(e) {

    return e.month;

    });

    let quantities = salesData.map(function(e) {

    return e.quantity;

    });

    let element = document.getElementById('sales-graph-pie');

    let ctx = element["getContext"]('2d');

    let myChart = new Chart(ctx, {

    type: 'pie',

    data: {

    labels: months,

    datasets: [{

    label: 'Sales FYI 2019 - 20',

    data: quantities,

    backgroundColor: [

    'rgba(255, 99, 132, 0.2)',

    'rgba(54, 162, 235, 0.2)',

    'rgba(255, 206, 86, 0.2)',

    'rgba(75, 192, 192, 0.2)',

    'rgba(153, 102, 255, 0.2)',

    'rgba(255, 159, 64, 0.2)'

    ],

    borderColor: [

    'rgba(255, 99, 132, 1)',

    'rgba(54, 162, 235, 1)',

    'rgba(255, 206, 86, 1)',

    'rgba(75, 192, 192, 1)',

    'rgba(153, 102, 255, 1)',

    'rgba(255, 159, 64, 1)'

    ],

    borderWidth: 1

    }]

    },

    options: {

    scales: {

    yAxes: [{

    ticks: {

    beginAtZero: true

    }

    }]

    }

    }

    });
    Required settings Values to enter
    Name

    End
  15. Click Save and close the Script designer.
  16. Save the UI Model.
  17. Click Preview. The preview opens to display as shown below.
  18. Click Pack.

    19. A new file with the name Dashboard.rp is created under the folder angular-workspace, dist, prod, Dashboard.

Create App Roles

The Sales Dashboard app involves only one user role.

Perform the following steps:

  1. Open the SalesDashboard project.
  2. Navigate to App Roles and click Create.
  3. Enter Sales Manager as Name and click Save.

Create App Package

Perform the following steps:

  1. Open the SalesDashboard project.
  2. Navigate to the angular-wrokspace, dist, Prod, Dashboard folder.
  3. Perform the following steps:
    1. Click the Dashboard.rp file.
    2. Click +ASSIGN ROLE.
    3. Select Sales Manager and click Save.
  4. Navigate to App Packages and click New.
  5. Enter SalesDashboard as Name.
  6. Enter 1.0 as Version.
  7. Select App Views, App Roles, and Datasources that you created above.
  8. Click Save.

    9. The app package is created with the name SalesDashboard_1.0.zip under the App Packages folder.

  9. Navigate to the app package and click Download.

    10. The SalesDashboard_1.0.zip file downloads to your local computer. You can now deploy this application in ASG-Zenith Portal (On-Premises) or ASG-Zenith Portal (SaaS).