How to add HTML to chart elements

Question

I am trying to add costum HTML to my google organization chart:

$scope.chartElements = [];
$scope.chart = {
    type: "OrgChart",
    data: {
        "cols": [
            {"label": "Name", "pattern": "<div class='text-danger'></div>", "type": "string"},
            {"label": "Manager", "pattern": "", "type": "string"},
        ],
        "rows": $scope.chartElements
    }
};

$http.get(api.getUrl('getMyFamilyTree', null))
    .success(function (response) {
        response.forEach(function (y) {
            $scope.divisionChartElement =
            {
                c: [{v: y.parent_id, f: '<div style="color:red; font-style:italic">President</div>'},
                    {v: y.child_id}
                ]
            };
            $scope.chartElements.push($scope.divisionChartElement);

        });

    });

however sadly when it comes out i get the following:.

Can anyone help me out ?

Fiddle: https://jsfiddle.net/umakk7az/

Using the following api: https://github.com/bouil/angular-google-chart

Answer 1

I believe you have to include allowHtml to the options attribute on the chart object.

$scope.chartElements = [];
$scope.chart = {
    type: "OrgChart",
    data: {
        "cols": [
        {"label": "Name", "pattern": "<div class='text-danger'></div>", "type": "string"},
        {"label": "Manager", "pattern": "", "type": "string"},
        ],
        "rows": $scope.chartElements
    },
    options:{"allowHtml":true} //Add this attribute
};

$http.get(api.getUrl('getMyFamilyTree', null))
.success(function (response) {
    response.forEach(function (y) {
        $scope.divisionChartElement =
        {
            c: [{v: y.parent_id, f: '<div style="color:red; font-style:italic">President</div>'},
                {v: y.child_id}
            ]
        };
        $scope.chartElements.push($scope.divisionChartElement);

    });

});