Disable an amChart series upon load

richard.mortimer

I have a graph with two series loaded onto it; the information is relevant to one another, but the data is a bit disparate - I'd like to start the graph with one of the series disabled, but allowed to be enabled, so the user can turn it on if they want to see it; is there any way to do this?

I've tried series-2-details="false" and series-2-disabled="true" with no success ... and I can't see any details in the documents at https://docs.amcharts.com/3/javascriptcharts/AmGraph to see how to do this?

Thanks

Richard

CraigWeb

Hi Richard

For starters, you can use legend="true" which allow you to disable and enable the series. I'll try to look into how to render the graph with a disabled series by default. Would it still be necessary with the legend?

richard.mortimer

Cheers for that - I've already got that option enabled, so have seen the function you're describing, however it would be great to start up without that particular graph showing, and allow the user to add it on (this is graphing the state of charge of a battery and the power dissipated by the battery, so the SoC goes between 0 - 100%; whereas the power can be from 1000W to -1000W (charging and discharging).

What would be ideal is to have only one value displayed on the graph; similar to this CodePen: https://codepen.io/team/amcharts/pen/dd327aedc074993d143826c1bc2044f0 but I'd be happy with the second series just being turned off at the load of the graph ...

Cheers

Richard

CraigWeb

Well, that code pen certainly saved me a lot of time series-2-graph-options="{hidden: true}" is what you looking for.
If I am not mistaken you can put any property you see here https://docs.amcharts.com/3/javascriptcharts/AmGraph in the options object.

Edit:
This seems to be a bit troublesome with a live updating chart. As the chart gets re-rendered when the values update. Setting it back to hidden.

richard.mortimer

Thanks for that - I'm glad you could see it in there, I looked again and still couldn't see it - and fortunately my graph is a historical one, so I've got it updating every 15 minutes; I might change it to one hour, which should give the user enough time to view the graph and digest the information beore it swaps back (I hope :) )

Cheers

Richard

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