Disable an amChart series upon load

MattFox

Just looking at this thread, was just wondering Richard if you're actively writing angularJS scripts or just using what's available to you in the dashboard?

Fox

richard.mortimer

@mattfox said in Disable an amChart series upon load:

Just looking at this thread, was just wondering Richard if you're actively writing angularJS scripts or just using what's available to you in the dashboard?

Fox

I started out using the dashboard designer, but have gone beyond that a bit; starting to write some Angular, but really need to brush up on it (been a while since I used it), and some of the Mango directives ...

Cheers

Richard

CraigWeb

At least it is a skill that is not unique to Mango, so well worth your time...

richard.mortimer

@craigweb said in Disable an amChart series upon load:

At least it is a skill that is not unique to Mango, so well worth your time...

That's true - I'm not unfamiliar with the MVC concept, but just having problems where the 'C' sits within the Mango/AngularJS structure ... but slowly figuring it out ...

MattFox

Right!

Sorry I'm a bit late to the party work and life took over momentarily...
I don't know enough about your interface or your points but I can show you this at least and work from here.
My components are template based so i have some common elements to work from.

This works based upon the series title in the chart, So i'm going under the assumption that your naming convention is generally consistent.
Rather than a full fledged component you could likely wrap the affected chart in an AngularJS controller and put this code in the controller:

/* Works based upon the title of the series on said chart axis. Toggles graph on chart */
$scope.toggleChart = function(titleTerm)
{
	try
	{
		var allCharts = AmCharts.charts;
		for (var i = 0; i < allCharts.length; i++) {
			if(AmCharts.charts[ i ].graphs.length>1)
			{			
				for(var graph=0; graph<AmCharts.charts[ i ].graphs.length;graph++)
				{
					if (  AmCharts.charts[ i ].graphs[graph].hidden && AmCharts.charts[ i ].graphs[graph].title.indexOf(titleTerm)>-1 ){
					   AmCharts.charts[ i ].showGraph( AmCharts.charts[ i ].graphs[graph] );								  
					  break;
					}
					if ( AmCharts.charts[ i ].graphs[graph].title.indexOf(titleTerm)>-1 ){
				AmCharts.charts[ i ].hideGraph( AmCharts.charts[ i ].graphs[graph] );	break;}
					
				}
			}
		}
	}
	catch(e){console.log(e);}
};

Then, by using the event fired by the point values directive: on-values-updated you can call this function to toggle the chart to hide. Note this will also remove the axis from the view also.

After an ma-button/md-button with the ng-click event can call the same function with the disparate point you speak of,
Happy to expand if you require more information.

CraigWeb

@richard-mortimer

I can see this being a common use case. Unfortunately, the default-graph-options works on all the graph series. It would be great if it took an array like the graph-options does as the default-graph-options doesn't get used when the graph gets re-rendered only on-init. Maybe Jared could agree to change to take an array.

Jared Wiltshire

@CraigWeb not sure what exactly you are responding to. default-graph-options takes a single object and sets the defaults if an option is not specified for a specific graph. The graph-options attribute does take an array and can be used to specify the graph options for a specific graph.

Jared Wiltshire

@richard-mortimer Here's an example that sets the default so that the graphs are hidden and then sets the 2nd graph to be shown.

<ma-watch-list-get ng-model="designer.watchList" parameters="designer.parameters" on-points-change="designer.points = $points" id="ff8f56f8-0074-4f46-95a9-e789cda9836a" watch-list-xid="WL_ed918c86-646f-4760-b5af-d9285ff86505"></ma-watch-list-get>
<div class="ma-designer-root" id="70fe9bc9-0fba-4311-8d0d-51ca93706697" style="width: 1366px; height: 768px; position: relative;">
    <ma-point-values id="49e1ff96-2f4f-44bc-bfc1-97dc87b4a4cc" points="designer.points" from="dateBar.from" to="dateBar.to" rollup="{{dateBar.rollupType}}" rollup-interval="{{dateBar.rollupIntervals + ' ' + dateBar.rollupIntervalPeriod}}" style="position: absolute; left: 148px; top: 124px;" values="pvs"></ma-point-values>
    <ma-serial-chart id="2e8f4165-aeae-4555-90e0-efec6d3bd1a2" style="position: absolute; width: 1235px; height: 522px; left: 47px; top: 211px;" values="pvs" points="designer.points" legend="true" default-graph-options="{hidden: true}" graph-options="[null, {hidden: false}]"></ma-serial-chart>
</div>

richard.mortimer

Thanks for the responses - I was reading through them this morning, and hoping to try them out today, but at our early meeting I was asked to remove one of the series plot from the graph, so I hope this information helps someone in the future.

Cheers

Richard

richard.mortimer

@richard-mortimer said in Disable an amChart series upon load:

I was asked to remove one of the series plot from the graph

I was asked to add them back, so glad I asked the question, now it's fixed!!

Cheers

Richard