Charts manual axis and documention

[v8dave]

Is there any documentation on the charts in the dashboard?

I want to be able to set the vertical axis manually and not use the auto scaling? I can't find any documentation on the charts.

[Woody Beverley]

Hi Dave,

I have good news. We use AM Charts and they have heaps of documentation. Here's a link to get you started [link amcharts.com

[v8dave]

Thanks for this but I am still confused as nothing on that website looks like this?

<ma-serial-chart style="height: 300px; width: 100%" series-1-values="point1Values" series-1-point="point1" series-1-type="{{point1ChartType}}" series-1-color="{{point1Color}}" series-2-values="point2Values" series-2-point="point2" series-2-type="{{point2ChartType}}" series-2-color="{{point2Color}}" series-2-axis="right" options="{legend:{}, chartCursor:{categoryBalloonDateFormat:'YYYY-MM-DD HH:NN'}, valueAxes:[{minimum:0, axisColor:point1Color, color:point1Color}, {axisColor:point2Color, color:point2Color}]}">

I've worked out some things but the likes of axisColor doesn't work if I change this to something like axisColour:"green" for instance.

[Woody Beverley]

I think I understand what you would like to have for documentation but it doesn't exist yet. Welcome to the the bleeding edge of Mango. The information you need is there but you have to work a little to translate it. Here's some markup I recently put together to produce a two series graph with two vertical axes. My hope is you can look at this and look at AM Chart's documentation and then you can see how to translate.

	<div class="row hidden-xs">
		<div class="col-sm-12 text-center extraPadding chart-holder">
		
			<ma-point-values point="point1" values="point1Values" from="from" to="to" rollup="AVERAGE" rollup-interval="5 MINUTES">
			</ma-point-values>
			
			<ma-point-values point="point2" values="point2Values" from="from" to="to" rollup="AVERAGE" rollup-interval="5 MINUTES">
			</ma-point-values>
			
			<ma-point-values point="point3" values="point3Values" from="from" to="to" rollup="AVERAGE" rollup-interval="5 MINUTES">
			</ma-point-values>

			<ma-point-values point="point4" values="point4Values" from="from" to="to" rollup="AVERAGE" rollup-interval="5 MINUTES">
			</ma-point-values>
						

			<ma-serial-chart style="height: 300px; width: 100%" 
			series-1-values="point1Values" 
			series-1-point="point1" 
			series-1-color="black" 
			series-1-type="smoothedLine" 
			series-1-title="CO2 psi:"
			 
			series-2-values="point4Values" 
			series-2-point="point4" 
			series-2-color="green" 
			series-2-type="smoothedLine" 
			series-2-title="Volume:"			
			series-2-axis="right" 
			
			options="{
				legend:{spacing:0, fontSize:10, valueWidth:32}, 
				chartCursor:{}, 
				valueAxes:[
					{minimum:0, maximum:50,  axisColor:'black', color:'black'}, 
					{minimum:0, maximum:300, axisColor:'green', color:'green'}, 
				]
			}">
			</ma-serial-chart>
			
						
			<div style="text-align: left; margin-left: 25px;">
				<span style="font-weight: bold; font-size: 30px; padding-right: 20px;" >{{tank_graph_enabled}}</span> Date range preset: 
				<ma-date-range-picker class="form-control" style="display: inline; width: 150px" from="from" to="to" preset="LAST_12_HOURS" update-interval="5 MINUTES"></ma-date-range-picker>
				From date <ma-date-picker class="form-control" style="display: inline" ng-model="from"></ma-date-picker>
				To date <ma-date-picker class="form-control" style="display: inline" ng-model="to"></ma-date-picker>
			</div>
						
		</div> <!-- /col -->
	</div>	<!-- /row -->  

[Woody Beverley]

I thought it might help to see what the graph I described above actually looks like.

Hope this helps!

[Will Geller]

<ma-serial-chart> provides some properties for easily updating type, color, title. Those are set using the

series-1-values="point1Values" 
series-1-point="point1" 
series-1-color="black" 
series-1-type="smoothedLine" 
series-1-title="CO2 psi:"

as woody shows above. And you just add series-x-... for every new point you assign to the chart. (type can be 'smoothedLine', 'line', 'step', 'column')

Using the series properties you can assign variables dynamically with angular pretty easily.

Additionally you can use the options="" property and pass in the AmChart Config JSON, it will combine with the series properties. You kind of have to play around with it but the JSON you pass in is the same you see here. the dataProvider and graphs are added automatically by the directive so ignore those. Usually you are changing the axis properties for formatting and such.
https://www.amcharts.com/demos/layered-column-chart/#theme-light

To accomplish what you are asking with the hard coded scale you should use the min/max config code Woody shows above.

[Will Geller]

More info:
in the mdAdmin docs

[v8dave]

Thanks for the pointers. I was using double quotes and this was why it was not working. Once I changed to single it works so thanks for the sample as this lead me straight to it.

[Jared Wiltshire]

For anyone else playing for this, its worth noting that if you give a series-x-point attribute it will set the color, type and title according to the point's plot color, plot type and point name respectively. These can be changed on the data point edit page in Mango.