Use Case

There may be a couple of visualization tweaks to charts that are needed outside of the UI version of that widget. This will walk through an example work flow using this widget with highcharts demos. 


Background

Bazefield uses highcharts for widget visualizations. In order to provide usability, there are a number of these highcharts visualizations with UI configurations, i.e. Time Series Chart. For flexibility Bazefield provides open configuration widgets, i.e. the Chart widget.


The Bazefield documentation on dashboards includes definitions around this chart widget as well. Please check the documentation for additional information.

Prerequisites

  • Administrative access to dashboards on the Bazefield portal
  • General understanding or willingness to learn json syntax


Steps

These steps will show an example workflow that can be useful for creating chart widgets.


Step 1: Create a blank dashboard, add chart widget

It is best to start a new widget in isolation on its own dashboard. This allows you to quickly edit without causing problems with existing dashboards that are in use. Additionally, if you need to utilize the developer tools to debug errors, there won't be any extra information in there.


After a blank dashboard is created by navigating to the Dashboard Templates, located in Administration > Configuration typically. Shown below is how to get the Chart widget added.

Step 2: Apply changes to default parameters to get it to load

The chart widget comes with a default configuration to help provide an example of how this is setup. Please reference the user dashboard documentation for additional explanation here. 


The first step we want to take is to edit this default configuration to work on your user platform.


Edit the widget to pop up the configuration.

Orient yourself with the UI for configuration changes

Step 2: Setup Chart Configuration to Relevant Purpose


After we have the chart widget added to the dashboard, we'll want to start setting up the configuration so that it references the right data. 


Edit the tag names to tags that exist in your instance. Tags can be found by using tag manager, please reference tag manager documentation or knowledge base articles for additional documentation there.


We'll be creating a simple DC versus AC active power chart for a single solar inverter for this example.


Note: If you have a syntax error or a typo, the configuration will drop or revert back to the working previous one.


Additionally, we'll update the time range, interval and title to be relevant to what we're trying to display.

So far this gives us:

At this point we want to save the configuration changes we've made and enter back into edit.


Note: It is always good to enter in and out of the widget to understand if you're making any configuration errors. Error handling in the custom chart widget is minimal.


Step 3: Edit chart configuration


Typically the reason you are in a custom chart widget is because you're trying to utilize highcharts parameters that aren't available in the standard widget UI of other options. One of the best ways to test your ideas, is to go on highcharts website and search through demo's.



The configuration section of the Chart widget holds all of the highcharts visualization settings. The diagram below illustrates the sections of the highcharts demo at apply to the configuration section.

Some of these configuration options won't apply to this section. A good example of this is the title and subtitle sections. If we copy over the title section of a highcharts demo (this is handled in the settings of the widget) it will drop that section of code when you click out of the box.




For this example, we'll move on to options that you can use. 

One of the first steps is to copy the configuration over to a text editor so you have a staging area.

Next you want to copy or create small configuration parts at a time over to the text editor to transfer over to the widget configuration section. For example, we'll add different series types, update naming and start formatting the axis'.


Step 4: Some Additional examples of changes.


Additionally, we'll drop in a tickInterval parameter to control the yAxis 


Adjusting the hover over tooltip can be useful as well.


Screenshot displaying some of these changes that have been made.


Stacking Chart:

{
  "options": {
    "chart": {
      "type": "area"
    },
    "tooltip": {
      "pointFormat": "{series.name}: <b>{point.y:.1f}</b><br/>",
      "shared": true
    }
  },
  "series": [
    {
      "name": "Turbine 01",
      "stacking": "normal"
    },
    {
      "name": "Turbine 02",
      "stacking": "normal"
    }
  ]
}



Product Version

Bazefield Portal 8.6.1