Request examples I could not find in the documentation

[mihairosu]

From my rudimentary understanding, I need 2 functions;

1. Pull data with command
2. Display data by taking the values from the pull command

I haven't been able to find two examples to do the following:

1. ma-get-point-value directly from xid without a picker and push that into a gaugeChart.
2. ma-get-point-value previous 12 hours directly from xid without a picker and push that into a lineChart.

I did look through the documentation but I haven't had luck putting it all together.

If I can find these two examples, it will take me very far into what I need to do.

[mihairosu]

No takers?

[JoelHaggar]

You should have this example: http://localhost:8080/dashboards/examples/basics/get-point-by-xid

You can probably splice that into the Line Chart example and the Date Pickers and Presets example. Let us know if that helps.

[Will Geller]

Try using this code. I am not sure what you mean by functions but you can use the following HTML to do what you are asking.

<ma-get-point-value point-xid="tutorial-Temp" point="point1"></ma-get-point-value>

<ma-gauge-chart point="point1" style="width:100%; height:200px"></ma-gauge-chart>



<ma-get-point-value point-xid="tutorial-volts" point="point2"></ma-get-point-value>

<ma-now update-interval="1 minutes" output="to"></ma-now>

<ma-calc input="to | moment:'subtract':12:'hours'" output="from"></ma-calc>

<ma-point-values point="point2" values="point2Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>

<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point2Values" series-1-point="point2" legend="true" balloon="true">
</ma-serial-chart>

I suppose you can consider <ma-get-point-value> as the component that pulls data and <ma-gauge-chart> / <ma-serial-chart> as components that display data in visualizations.

<ma-now> and <ma-calc> compute the to/from time for the previous 12 hours without using and date pickers.

Don't forget to replace the xid's with those from your system that you want to display.

Cheers
Will

[mihairosu]

Ouch, I admit, I didn't see that example at first, but obviously I wasn't attentive enough.

Thank you both very much; it's clear to me now.

[mihairosu]

Hey Will, that code works great.

Now I want to learn to customize my chart. I've tried to correlate the AMCharts docs with the options= parameter, but I can't seem to get certain things to work.

For example here the AMChart code:

"valueAxes": [
	{
		"minimum": 0,
		"title": "Axis title",
	}
]

Here's my options code from their website:

options="{valueAxes:[{minimum:0,title:Title}]}"

so the thing is that the minimum call out works. I can change the minimum. The title, however, does not work.

In any case that's not even what I'd like to do:

I want 2 axes, and I want 2 titles.

It's clear to me to call out left and right axes and set each series to an axis, but I can't figure out how to manipulate each axis separately. I suspect the "valueAxes" has to be something like "LeftAxes" and "RightAxes" and each one has parameters of their own.

[Will Geller]

We have tried to make <ma-serial-chart> easier to use so for basic things such as this you should not have to use the options="" attribute. As you have discovered it is not always easy to pass in the options object and typos/linebreaks can throw it off.

You should be able to use the series-X-axis and series-X-axis attributes as described on the API doc page:
http://localhost:8080/dashboards/docs/ma-dashboards/ma-serial-chart

Here is the example I posted before updated with custom axis, title, and color (also reordered the HTML to be clearer about what elements actually render content to the page):

<ma-get-point-value point-xid="Demo1-volts" point="point2"></ma-get-point-value>
<ma-get-point-value point-xid="Demo1-Temp" point="point1"></ma-get-point-value>

<ma-now update-interval="1 minutes" output="to"></ma-now>
<ma-calc input="to | moment:'subtract':12:'hours'" output="from"></ma-calc>

<ma-point-values point="point2" values="point2Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>

<ma-point-values point="point1" values="point1Values" from="from" to="to" rollup="AVERAGE" auto-rollup-interval="true">
</ma-point-values>


<h1>Live Temp</h1>
<ma-gauge-chart point="point1" style="width:100%; height:200px"></ma-gauge-chart>

<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-1-axis="left" series-1-title="Temperature Last 12 Hours" series-1-color="blue" series-2-values="point2Values" series-2-point="point2" series-2-axis="right" series-2-title="Voltage Last 12 Hours" series-2-color="red" legend="true" balloon="true">
</ma-serial-chart>

[mihairosu]

I got the Chart title through the header code. I meant the axis titles on the sides of the chart:

Can this be done through the <ma-serial-chart> code?

Just to be clear, the series-x-title only changes the name of the series in the legend. So I did try that.

[Will Geller]

Axis titles can be done through options="{}" on <ma-serial-chart>

Try adding:

options="{valueAxes:[{axisColor:'blue', color:'blue', title: 'Hello Left', titleColor: 'blue'}, {axisColor:'red', color:'red', title: 'Hi Right', titleColor: 'red'}]}"

When using options="" you pass in an object and make sure you only use single quotes around the strings in the object. These are all properties of the valueAxes array which takes in seperate object for each axis configuration. You can leave out the color options if you like and just use title property.

See:
https://docs.amcharts.com/3/javascriptcharts/ValueAxis

PS
I think you are missing the single quotes around 'Title' in the code you posted.

[mihairosu]

Will, thank you so much!!

Based on this example, I'm finding it easy now to manipulate other charts as well, such as all the gauges I'm using.

Apart from requiring more manual work, this is so much nicer than DGLux2.5 in many ways, I'm eager to transition over.