how to insert the scatter chart in mangoES

vembu

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

Jared Wiltshire

@vembu
Do you mean using the dashboards v3 module?

vembu

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

I want to add one more chart type in the default settings ,
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.
How to merge with AM charts in Dashboard.

vembu

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.

vembu

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>

Jared Wiltshire

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

vembu

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 .

Jared Wiltshire

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