LooUQ Chart is a simple charting application for visualizing your LooUQ Cloud device data in realtime.  It is a Windows (WPF) application but it does not require a formal install, just copy the files to a folder, setup your chart settings and watch the data flow by.  This guide takes you through the application and how to use it. Since LooUQ has released it as open-source under the MIT license you are free to extend it as you see fit; we welcome your pull-requests to contribute to the project.


Getting Started

To start using iotQi Chart (Chart) follow these steps...


Some of the steps below talk about information obtained from Setup.  This is the iotQi Setup web-application where you registered your account.  All information about your account, subscription, and list of devices are available there.

  1. Download the attached ZIP file and unzip it to a folder (directory).
  2. Locate the ChartSettings.json file and open it in an editor such as notepad.exe or vscode.exe (VS Code recommended).
  3. Supply the information for username and password, this is the your account information from LooUQ Cloud Setup.
  4. Update the stream section based on your IoT device and application
    1. Enter the deviceId for the IoT device you want to chart data from, you can get this from the device detail page within Setup.
    2. The default settings fetch data from the stream every 20 seconds (sampleIntervalSeconds), this is useful for rapidly changing data typical of a development environment.  If your data changes less frequently set this to a longer value, matching your data's frequency of update.
    3. Optionally, set the samplePrefetchMinutes to "fetch" from the recent past to start your chart graphing immediately. Once again, consider the timing of your IoT application's data stream when setting this value.
  5. Once the stream is setup (one stream per chart, see Advanced Settings below for information on how to run multiple charts simultaneously), you will need to setup one or more "series" to display your data. The chart shown here has 3 series: WindSpeed, Supply Voltage and Battery Volts.
    1. Each series requires a path. This is the property location within the iotQi event's JSON data where the data you want to chart is found.
    2. You can optionally provide a name to use for the series to make the series more dignified. If you don't provide a name, Chart will use the property name from the path as the series name.
    3. Optionally one series can be tracked for maximum and minimum values. To do this create a max and min property on the series of interest.  The max and min can be on different series.  The type of the property value for max and min can be any valid JSON type.







The chartsettings.json File

The chartsettings.json file controls the behavior of the iotQi Chart application.  It is parsed each time Chart loads to determine how to process the incoming data stream and chart the data points from your IoT device. 


{
  "userName": "StreamsDemo",
  "password": "ymtG0ZHcJdNhhZZEogqIr9CTHhDiJduyPgmz4SGkkDEpMf9d",
  "chart": {
    "title": "Remote Sense HA",
    "sampleCount": 25,
    "timezoneOffset": -5,
    "timeFormat": "hh:mm:ss tt"
  },
  "stream": {
    "deviceId": "7d03cba5-de8c-458d-9c13-ee92b2afa259",
    "filter": "",
    "sampleIntervalSeconds": 20,
    "samplePrefetchMinutes": 2
  },
  "seriesConfig": [
    {
      "path": "eventBody.telemetry.WindSpeed",
      "color": "",
      "lineSmoothness": 1.0,
      "min": 1,
      "max": true
    },
    {
      "path": "eventBody.telemetry.SupplyVoltage",
      "color": "blue"
    },
    {
      "name": "Battery Volts",
      "path": "eventBody.telemetry.BatteryVoltage",
      "color": "Red"
    }
  ]
}


Select "default" values for chart settings are established in the app.config (LooUQ-Chart.exe.config) file.  When any of these values are specified in the chartsettings.json file, they override app.config values.


Building Chart Yourself

LooUQ Chart is available as source code under the MIT open-source license. You can find it on the LooUQ GitHub at https://github.com/loouq



LiveCharts

iotQi Chart is available in a large part thanks to LiveCharts. LooUQ wanted to build an easy to use, yet extensible charting utility for your iotQi data. So we needed to find an open-sourced chart tool.  Please take a look at LiveCharts.Geared for more advanced charting applications.