Build a Mango Dashboard Tutorial (Mango 2.x)
 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
There seems to be an issue with the attachment "Attachment support is disabled or inacessible. Cannot proceed."
Sorry about that. I have fixed the permissions so you should be able to download it now.
Thanks a lot.
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:
Do you have any tips for debugging this?
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 <!-- Data Providers --> section with this code:
Thanks for your interest in Mango Automation,
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?
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?
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.
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.
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?
This post is deleted!
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.
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.
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!
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?
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.
You can query data points by XID with the = operator like this:
or to collect multiple points you can do this
This query language is RQL and is described here: https://github.com/persvr/rql
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