Let's suppose we want to create 3d heatmap cloud illustrated our building. To make it we need to get grid like next one:

xyztemperature
3101001869.9°F
515

100

1089.1°F
3102001857.3°F
5152001060.3°F

X and Z means position on the floor and Y means floor height (100 - first, 200 - second). We have already made position tag for zone temp points in previous tutorial, so, let's use it. We will write axon function to make list of zone temp points like in table above. Then create page with charts and load grid and show data.

Axon function

Go to SkySpark Func application and create there new function with name like "mapHeatPoints". And copy there next code:

mapHeatPoints
(points) => do
  points
  .sort((a, b) => a.dis <=> b.dis)
  .map((p) => do
    pos: p->position.split(",").map( p => parseInt(p));
    {
      "y":pos[0],
      "x":pos[1],
      "z":pos[2],
      "navName": p->equipRef.toRec->navName + ": " + p["curVal"].format("0.#"),
      "color":p["curVal"],
    }
  end);
end

Function takes list of points and returns grid with temperature, name and x, y, z columns. It parses position tag to extract x, y, z parts. Color - is just current point's value. And navName  - is a point parent's navName + current temperature. We need that to show point's temperature when you move mouse over chart. Run in axon tab next call to check how function works:

    readAll(zone and temp and position).mapHeatPoints()

And you will see next result:

That's means everything's good and we can go next.

Creating page

Go to Visualytik / PageManager, create new page and edit it.

Add Charts widget, set big size.

Logic

Go to Logic tab. There add Charts and Data/Eval processes and connect Eval's `out` port with Chart's `in` one.

Set Eval's query axon query above. Your logic should looks like that:

Traces

Go back to GUI. Select Charts widget and open Data tab. You should see some data like that:

If it's so we can go next.

Click Preview tab and move your attention to Properties Panel. Open Traces group and create new trace. Set Chart Type as "scatter3d", choose columns from dropdown for X, Y, Z and Text columns. Your properties should look like that:

Also you can see how charts looks with real data. Let's make it looks more like heatmap.

Styling

Open Style subgroup and setup next options. Trace  - markers only, Values to show on hover - text only. And fill other styles like next images:

    

Final

If all was done properly and there was not any errors, final result would look like that:

In next tutorials we will discuss how to make DVR 4D Charts page.

  • No labels