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.
- 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.
- I thought maybe if I set the series values parameter to null it might be ignored. That didn't work.
- 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.
- 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: \'°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