Dashboard Pro Feature

Dashboard Pro

The Dashboard Pro feature allows you to create a custom dashboard, in Packing Partner, that can show any data about the sales you have processed. The dashboard browser has built into it, the  chart.js library . and gauge.js library .

If the data is output to a file, the dashboard can also be displayed in remote locations, even in a different building.

Feature
Dashboard Pro is a feature , that needs to be enabled from Tools>Features , you will also to enable the  Scripting feature.

Dashboard configuration

The dashboard is displayed using JSON data created in Packing Partner scripting. The data is passed to the browser to be displayed using CSS, JavaScript and HTML.

When the Dashboard Pro feature enabled, you can edit and view the script and HTML documents by right clicking on the dashboard.

In the script editor you create the JSON data to draw each chart, it is structured so that each chart has it's own key. This can the be passed to the HTML, an object created and each object referred to by it's key.

Sample VB script for Dashboard Pro

This file shows how the create the JSON for a basic html dashboard. It shows how to use some built in Packing Partner functionality, to get sales data and save the data to the dashboard.


  "counts": {
    "type": "horizontalBar",
    "name": "counts",
    "title": "Top 20 products (Last 30 days)",
    "data": {
      "labels": [
        ...
      ]
    }
  }
  "current": {
    "type": "pie",
    "name": "current",
    "title": "Current Records",
    "data": {
      "labels": [
        ...
      ]
    }
  }
}

Sample HTML source for Dashboard Pro

This file shows how to display a basic html dashboard. It contains some useful functions that can be the foundation for you own dashboard.

showDash()

showDash() is the call made by Packing Partner after creating the JSON data, to display the dashboard.

drawChart(data)

Takes an object that contains all the data to draw a single chart, and displays it using an element with an id of the same name. using the small snippet above as an example, it would be displayed like this:

var obj = JSON.parse(window.name)
drawChart(obj.counts)
drawChart(obj.current)

This would need an HTML element with an id of the same name:

<table style="width:100vw;height:100vh">
  <tr>
    <td style="width:60%" id="counts">
    </td>
    <td id="current">
    </td>
  </tr>
</table>