Build a Mango Dashboard Tutorial (Mango 2.x)

JoelHaggar

[edit] J.W. This video is for Mango 2.x, please do not follow this video if you are using Mango 3.x.

Attachment: download link

Dominic.Irl

Hi Joel,

There seems to be an issue with the attachment "Attachment support is disabled or inacessible. Cannot proceed."

Regards,

Dominic.Irl

JoelHaggar

Sorry about that. I have fixed the permissions so you should be able to download it now.

Joel.

Dominic.Irl

Thanks!!

jplopez

Great tutorial!

Thanks a lot.

jmdev

Hi Joel,

I'm trying to create a custom public dashboard. The tutorial is great but I'm having some difficult with Data Point Matching.

I already created 2 test devices using demo data from the Template Configuration Import, copied the code from demoVideoExampleCode.shtm and swapped out some values.

To start with I'm just trying to create a serial chart using data from one of the test devices (e.g. Amps & Outside Temparture).

When I load the page I'm getting the following console error:

ReferenceError: DataProvider is not defined
this.PointValueDataProvider = factory(jQuery, DataProvider, mangoRest);

It logs once for each of these files:
pointValueDataProvider.js
realtimePointValueDataProvider.js
statisticsDataProvider.js

Here is a link to my Javascript code:

http://pastebin.com/mQDyNuab

Do you have any tips for debugging this?

Thanks,
Jon

terrypacker

Jon,

Apologies for this, the latest release of that module has changes to the data provider class hierarchy and so all pages must include the base data provider class as well as extend.js. I modified all of the examples but missed this one. This is a simple fix and then you code will work fine.

I have tested your code with the following change and it shows one chart with both Outside Temperature and Amp in it.

Replace the  section with this code:

        
        &lt;!-- Data Providers --&gt;
        &lt;script type="text/javascript" src="/modules/dashboards/web/js/extend.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/mango-javascript/v1/dataProvider.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/mango-javascript/v1/pointValueDataProvider.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/mango-javascript/v1/realtimePointValueDataProvider.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="/mango-javascript/v1/statisticsDataProvider.js"&gt;&lt;/script&gt;

Thanks for your interest in Mango Automation,

Terry

jmdev

Thanks Terry. That worked. I was away from the project for a few days but back working on it now. I have another question. I'm trying to create two guage displays on the same same page with a different data point for each. I'm having some difficulty understanding how to get it working. I have two display configurations and two point configurations but can't figure out how to assign display 1 to point 1 and display 2 to point 2. I hope this makes sense. Any idea how I can get it up and running or where to look?

copytco

Hi, I am trying to make my dashboard. I just configured Mango and tried to see the examples provided in the application, though I cannot see any charts. Legend is present on the bottom, but no axis lines nor other graphics is rendered (screen below). Why is it so?

JoelHaggar

Did you import all the sample JSON points? Also note that a lot of the Mango API and sample have changed in version 2.6. If you are just starting out I would recommend looking at the examples in the 2.6 beta available on the downloads page.

nyoa

Hi,

First things first, I'm completely new to mango automation and my goal is to create a simple dashboard with a chart that shows some measurement data. The video here and the manual are very informative, but only after you have managed to set up your dashboard which I couldn't do since I don't know where I'm supposed to start at.

So what I'm asking is, you had a text file in the video that included the code for the dashboard I presume, but where is it saved? and is the dashboard instantly created after creating the text file? Also, can you use the mango management interface to manipulate your dashboard layout or do you only do it by editing the text file?

Some step-by-step guide where you start with absolutely nothing and build the dashboard "from scratch" (for example by copying a template) would be absolutely marvelous.

Thank you in advance.

phildunlap

Hi Nyoa,

I'm not sure it's exactly what you're seeking, but have you looked at the example pages in the Custom Dashboards module? Check Mango/web/modules/dashboards/web/public and Mango/web/modules/dashboards/web/private?

nyoa

This post is deleted!

nyoa

Are the tutorials located in "/web/modules/dashboards/web/private/pointHierarchyExamples" still relevant? I tried to create a chart based on "realtimeSerialChart.shtm", but for some reason only the legend is visible, while the rest of the chart doesn't appear. I have basically copied all the code and only made changes to div id:s and matchAttribute so it would correspond with my data point.

I also tried to view the example (realtimeSerialChart.shtm) it seems to have the same problem with only the legend being visible and rest of the chart not appearing.

phildunlap

Many definitely are but some may not be. Most of the examples will let you specify an XID to see what the page is doing, but others are hardcoded to a point with the xid 'voltage'. You can click around through any you question the working-ness of after you click the 'Custom Dashboards' icon in the Mango interface.

nyoa

@phildunlap

Thanks for the fast reply.

Here is the code I use http://pastebin.com/MtFgArsN

The console gives me this error: "This file is deprecated. Please use RealtimeDataProvider.js instead." and the source is "RealtimePointValueDataProvider.js".

Here is the console output

Thanks for any help you can offer. I'm a total newbie at Mango Automation but am eager to learn the basics!

phildunlap

Honestly I haven't engaged the API to any great extent; I've been getting back into the swing of things. Perhaps @terrypacker knows. I tried to use RealtimeDataProvider as a drop in replacement, but it didn't work. Those example pages in the private/pointHierarchyExamples/ directory were marked legacy, so it is what it is. The tutorial examples are the preferred version of things.

Also, isn't that just a warning?

nyoa

@phildunlap

I tried to use a different tutorial (dataPointChart.shtm), which was a working example. However, to be able to get a data point the tutorial uses "MangoAPI.defaultApi.queryPoints($('#query').val())" where the query returns "limit(10)' by default.

This function then does a query to data points and limits the amount of returned objects to 10. I would like to make a query based on xid, but am not able to find any documentation.

terrypacker

nyoa,

You can query data points by XID with the = operator like this:

xid=DP_00001

or to collect multiple points you can do this

xid=DP_009050|xid=DP_549302

This query language is RQL and is described here: https://github.com/persvr/rql

JoelHaggar

There is a tutorial file in the custom dashboards folder with some examples: You should find it here: http://yourmangoip/mango-api-docs/tutorial-dataPointQuery.shtm