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

how to insert the scatter chart in mangoES


  • please advice how to insert the scatter type chart in mango ES, and how to get data from mangoES.


  • @vembu
    Do you mean using the dashboards v3 module?


  • Hi, thank You for your consideration , ya we use the dashboard V3 Module , and Mango automation 2.7.12 ,

    1. I want to add one more chart type in the default settings ,
    2. I want to change the points in both X-axis and Y-Axis (ie., by default the timestamp always in X-axis ) we want to change that.
    3. How to merge with AM charts in Dashboard.

  • Hi,
    How to write the syntax for Am charts using option in dashboards ?
    , I want to change the x-axis point (in default the time is in X-axis) i want to set the some point in x-axis.


  • We want to use following scatter chart in Mango ES , How to create the chart in dashboard , we get values of datapoints which is already in the datapoint list .
    <html>
    <html ng-app>
    <head>
    <title>My Angular App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="https://cdn.vaadin.com/vaadin-core-elements/latest/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="https://cdn.vaadin.com/vaadin-charts/3.0.0/vaadin-scatter-chart.html">

    <vaadin-scatter-chart id="basic-3d-scatter">
    <title>Scatter Plot</title>
    </head>
    <body>
    <chart margin="100">
    <options enabled="true" alpha="10" beta="30" view-distance="0.5">
    <frame>
    <bottom size="2" color="rgba(0,0,0,0.02)"></bottom>
    <side size="2" color="rgba(0,0,0,0.06)"></side>
    </frame>
    </options>
    </chart>

    <plot-options>
        <scatter width="20" height="20" color-by-point="true">
        </scatter>
    </plot-options>
    
    <y-axis min="0" max="10" title="null" grid-line-width="0.3">
    
    </y-axis>
    
    <x-axis min="0" max="10" title="null" grid-line-width="0.3">
    </x-axis>
    
       <legend enabled="true"></legend>
    
    <data-series name="Fan,Light">
        <data>[1, 6], [8, 7], [1, 3], [4, 6], [5, 7], [6, 9], [7, 0], [2, 3], [3, 9],
    		[3, 6], [4, 9], [2, 3], [6, 9], [0, 7], [7, 7], [7, 2], [0, 6], [4, 6],
    		[3, 7], [0, 1], [2, 8], [2, 3], [6, 4], [3, 5], [7, 9], [3, 1], [4, 4], 
    		[3, 6], [3, 1], [6, 8], [6, 6], [4, 1], [7, 2], [7, 7], [8, 8], [9, 4],
    		[8, 3], [9, 8], [3, 5], [0, 2], [6, 0], [2, 1], [5, 8], [2, 1], [9, 7], 
    		[3, 0], [9, 9], [3, 4], [2, 6], [8, 9], [7, 6], [6, 3], [9, 3], [8, 9], 
    		[9, 1], [3,8,], [8, 0], [4, 9], [8, 6], [4, 3], [2, 3], [9, 1], [1, 1],
    

    [6, 0], [6, 1], [3, 8], [8, 8], [5, 5], [3, 9], [5, 4], [6, 8], [0, 1],
    [6, 7], [8, 3], [3, 8], [2, 1], [4, 6], [8, 9], [5, 4], [6,1], [6, 9]

        </data>
    </data-series>
    

    </vaadin-scatter-chart>

    </html>


  • @vembu
    We dont support Vaadin charts out of the box. You will have to write your own AngularJS controller or directive to take the data and supply it to the Vaadin chart in the format it requires.


  • Thank You, how to insert my own directive and controller in mango ES, and one more doubt , I want to draw the chart between two points (ie., one point in X-axis and One point in Y-axis ), by default , the time stamp in X-axis , we want to change that .


  • @vembu said in how to insert the scatter chart in mangoES:

    Thank You, how to insert my own directive and controller in mango ES, and one more doubt , I want to draw the chart between two points (ie., one point in X-axis and One point in Y-axis ), by default , the time stamp in X-axis , we want to change that .

    You will find a lot of information in the Dashboards section of the forum. You will need to create a new dashboard from a template to add directives, i.e. the adminTemplate. We don't have a directive for a scatter chart yet, we only support time series graphs at the moment but it is something we can look at for a future release. You can create your own directive to do this with amCharts if you wish.