Please Note This forum exists for community support for the Mango product family and the Radix IoT Platform. Although Radix IoT employees participate in this forum from time to time, there is no guarantee of a response to anything posted here, nor can Radix IoT, LLC guarantee the accuracy of any information expressed or conveyed. Specific project questions from customers with active support contracts are asked to send requests to support@radixiot.com.

Radix IoT Website Mango 3 Documentation Website Mango 4 Documentation Website

Creating a chart with dynamic number of series


  • 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.

    0_1581719704497_1c8a178f-cff2-4b32-a08e-af43c57721c2-image.png

    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


  • 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