My goal is to dynamically populate a div with various graphs from Dojo, depending on the current data model.
However, I keep encountering the error message "Cannot read property 'nodeType' of null" when running my code.
I suspect that this issue arises because Dojo is trying to render into a div that hasn't been created yet. While the div exists in memory and AngularJS can interact with it, it has not been generated in the DOM.
Here is the code snippet in question:
Is there a way to ensure that the element is fully created before rendering the graph?
function GetBarChart(elementName)
{
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedAreas", "dojox/charting/themes/Wetland" , "dojo/ready"],
function(Chart, Default, StackedAreas, Wetland, ready)
{
ready(function()
{
alert(elementName);
var c = new Chart(elementName);
c.addPlot("default", {type: StackedAreas, tension:3})
.addAxis("x", {fixLower: "major", fixUpper: "major"})
.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", min: 0})
.setTheme(Wetland)
.addSeries("Series A", [1, 2, 0.5, 1.5, 1, 2.8, 0.4])
.addSeries("Series B", [2.6, 1.8, 2, 1, 1.4, 0.7, 2])
.addSeries("Series C", [6.3, 1.8, 3, 0.5, 4.4, 2.7, 2])
.render();
});
});
}
angular.module('myApp')
.directive('myWidget', function()
{
return {
link:function(scope, element, attrs)
{
element.id = scope.widget.id;
GetBarChart(element.id );
console.log(element);
}
};
});