• Recent
    • Tags
    • Popular
    • Register
    • Login

    Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

    Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website Mango 5 Documentation Website

    Build a Mango Dashboard Tutorial (Mango 2.x)

    Dashboard Designer & Custom AngularJS Pages
    8
    22
    17.4k
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jplopez
      last edited by

      Great tutorial!

      Thanks a lot.

      1 Reply Last reply Reply Quote 0
      • J
        jmdev
        last edited by

        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

        1 Reply Last reply Reply Quote 0
        • terrypackerT
          terrypacker
          last edited by

          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 <!-- Data Providers --> 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

          1 Reply Last reply Reply Quote 0
          • J
            jmdev
            last edited by

            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?

            1 Reply Last reply Reply Quote 0
            • C
              copytco
              last edited by

              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?
              Mango.png

              1 Reply Last reply Reply Quote 0
              • JoelHaggarJ
                JoelHaggar
                last edited by

                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.

                1 Reply Last reply Reply Quote 0
                • N
                  nyoa
                  last edited by

                  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.

                  1 Reply Last reply Reply Quote 0
                  • phildunlapP
                    phildunlap
                    last edited by

                    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?

                    N 1 Reply Last reply Reply Quote 0
                    • N
                      nyoa @phildunlap
                      last edited by

                      This post is deleted!
                      1 Reply Last reply Reply Quote 0
                      • N
                        nyoa
                        last edited by

                        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.

                        1 Reply Last reply Reply Quote 0
                        • phildunlapP
                          phildunlap
                          last edited by

                          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.

                          N 1 Reply Last reply Reply Quote 0
                          • N
                            nyoa @phildunlap
                            last edited by 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!

                            Console.PNG

                            1 Reply Last reply Reply Quote 0
                            • phildunlapP
                              phildunlap
                              last edited by 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?

                              N 1 Reply Last reply Reply Quote 0
                              • N
                                nyoa @phildunlap
                                last edited by

                                @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.

                                1 Reply Last reply Reply Quote 0
                                • terrypackerT
                                  terrypacker
                                  last edited by

                                  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

                                  1 Reply Last reply Reply Quote 0
                                  • JoelHaggarJ
                                    JoelHaggar
                                    last edited by

                                    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

                                    N 1 Reply Last reply Reply Quote 0
                                    • N
                                      nyoa @JoelHaggar
                                      last edited by nyoa

                                      JoelHaggar and terrypacker

                                      Thank you both for your help. Do you happen to know if there is documentation about how to modify "timePresetPicker"? I would like to have three buttons (HH, WW, MM) that would make the chart represent the data in their respective time frame, but with timePresetPicker I have to use a dropdown menu that is populated with lots of values I don't want.

                                      Is there possibly different types of timePickers than timePresetPicker?

                                      Also do you happen to know why "providerManager.refreshProviders();" under:

                                      $('#presetPicker').on('change', function() {
                                          providerManager.refreshProviders();
                                       }
                                      

                                      But if I want to call it in somewhere else when the document loads it gives an error "this.amChart.validateData is not a function"

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post