Creating a chart with dynamic number of series

[iperry]

Heya,

I am trying to create a chart with a dynamic (1+) number of series. For example, I may have up to 3 temperature values that I want to chart but if 1-2 of them do not exist, I don't want their series to appear on the chart. I don't want to create multiple charts for each variation as this would be headache to update in the future.

1. I found another post regarding hiding a series but it only seemed to hide the chart line. The legend and axis values were still displayed.
2. I thought maybe if I set the series values parameter to null it might be ignored. That didn't work.
3. I tried making a component but discovered that having a dynamic template didn't seem possible. Maybe this is but I haven't figured it out yet.
4. The closest I came to success was when I created a directive. However, the chart was not displayed but the legend and download button were.

userModule.directive('scaRampChart', ['$compile', function ($compile) {

	var ctrl = this;

	var getChart = function(attrs) {
		console.log('attrs = '+JSON.stringify(attrs));

	return '<ma-serial-chart style="height: 300px; width: 100%"' +
            
	'series-1-values="'+attrs.pcuRamp+'"' + 
	'series-1-title="Transmitter Ramp"' +
	'series-1-color="#256eff"' +
	
	'series-2-values="vPcuActive"' +
	'series-2-title="Transmitter Connected"' +
	'series-2-color="#256eff"' +
	'series-2-axis="right"' +
	'series-2-type="step"' +
	'series-2-graph-options = "{\'dashLength\': 5, \'fillAlphas\': 0.1}"' +

	'legend="true"' +
	'balloon="true"' +
	'export="true"' +
	'default-type="line"' +
	'default-graph-options="{title: \'Comparison\'}"' + 
	'options="{' +
	'	synchronizeGrid: false,' +
	'	valueAxes:[' +
	'		{minimum: \'0\', maximum: \'4500\'},' +
	'		{title: \'Connected\', titleColor: \'#ff4d4d\', minimum: 0, maximum: 1, integersOnly: true, baseValue: 2},' +
	'		{title: \'&deg;C\', titleColor: \'#ff4d4d\', minimum: -50, maximum: 50}' +
	'	]' +
	'}">' +
	'</ma-serial-chart>';
	}

    var linker = function($scope, $element, $attrs){
		// console.log('in linker...');
		$element.html(getChart($attrs)).show();
        $compile($element.contents())($scope);
    };

    return {
        restrict: "E",
        replace: true,
        link: linker,
        scope: {
			content:'=',
			pcuRamp: '<?'
        }
    };
}]);

Is there something else that I should consider? Is the directive something I should continue to work on?

Can the series be specified using a JSON string instead of the component parameters?

Thanks
Ian

[MattFox]

I did something similar, the easiest way I did it was hard coding three graph series and wrapping it with an ng-if="seriesCount==1" or 2 or 4 in the html template file.
You know for a fact you're working with only up to three series, so it shouldn't be overkill.
Store all necessary settings in your JSON then go forth. I think you're making it more complex than required.

Alternatively,
Map everything into controller variables then link them into the chart instance:

<ma-serial-chart points="$ctrl.points" values="$ctrl.values" legend="true"
     export="true" graph-options="$ctrl.graphOptions" options="$ctrl.serialChartOptions">
</ma-serial-chart>

<ma-point-values points="$ctrl.points" values="$ctrl.values" from="$ctrl.dateBar.from" to="$ctrl.dateBar.to" rollup="{{$ctrl.rollupType}}"
  rollup-interval="{{$ctrl.rollupInterval}} {{$ctrl.rollupIntervalPeriod}}" ></ma-point-values>

Fox