topic Re: Issue with Data Driven component of SAS VA 8.2. in SAS Visual Analytics

Issue with Data Driven component of SAS VA 8.2.

AnjaliNair — Mon, 18 Mar 2019 10:41:18 GMT

We are trying to use a third-party Pie-chart in SAS VA 8.2 using Data Driven Control. We have added the event handlers in the code, still we are able to see only the sample data. No changes are seen in the pie chart when i add roles. Basic pie chart with sample data is seen.

Following code is used:

<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
<script src="../jquery.csv.min.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawBasic);

var initialized = true;
var _chartData = null;
var data = null;
var bar = null;

var options = {
is3D: true,
chartArea: {
left: 80,
bottom: 100,
width: '100%',
height: '100%'
},

piesliceText: 'label',
legend: {
position: 'bottom'
},

width: '100%',
height: '100%'
};

function onMessage (evt) {
if (evt && evt.data & evt.data.hasOwnProperty("data"))
updateData (evt.data);
}

if (window.addEventListener) {
//For standards-compliant web browsers
window.addEventListener("message", onMessage, false);
}
else {
window.attachEvent("onmessage", onMessage);
}

//create trigger to resizeEnd event
$(window).resize(function() {
if (this.resizeTO)
clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger ('resizeEnd');
}, 25);
});

//redraw graph when window resize is complete
$(window).on('resize End', function() {
drawChart();
});

function drawchart()
{
if (bar)
bar.draw(data,options);
}

function updateData(chartData)
{

if (!initialized)
{
_chartData = chartData;
return;
}
if (chartData) {
var arrayData;
var columnInfo = chartData.columns;
if (chartData.data)
{
arrayData = chartData.data;
if (columnInfo)
{
arrayData.splice(0, 0, columnInfo);
}
}
data = google.visualization.arrayToDataTable(arrayData);
}
else {
data = google.visualization.arrayToDataTable([
]);
}

bar = new google.visualization.PieChart(document.getElementById('piechart'));
drawChart();
}

function drawBasic() {

var _data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7],
['Relax TV', 1],
['Exercise', 1.5],
['Read', 1],
['Meditate', .5]
]);

var _options = {
title: 'My Daily Activities',
is3D: true,
width: '900px',
height: '500px',
piesliceText: 'label',
};

var bar = new google.visualization.PieChart(document.getElementById('piechart'));

bar.draw(_data, _options);
}

</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

Re: Issue with Data Driven component of SAS VA 8.2.

FalkoSchulz — Fri, 29 Mar 2019 03:53:41 GMT

You had a few typos in your code:

Changed

if (evt && evt.data & evt.data.hasOwnProperty("data"))

if (evt && evt.data && evt.data.hasOwnProperty("data"))

Changed:

function drawchart()

function drawChart()

Full updated code:

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="../jquery-3.1.1.min.js"></script>
    <script src="../jquery.csv.min.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages': ['corechart']});
        google.charts.setOnLoadCallback(drawBasic);

        var initialized = true;
        var _chartData = null;
        var data = null;
        var bar = null;

        var options = {
            is3D: true,
            chartArea: {
                left: 80,
                bottom: 100,
                width: '100%',
                height: '100%'
            },

            piesliceText: 'label',
            legend: {
                position: 'bottom'
            },

            width: '100%',
            height: '100%'
        };

        function onMessage(evt) {
            if (evt && evt.data && evt.data.hasOwnProperty("data"))
                updateData(evt.data);
        }

        if (window.addEventListener) {
//For standards-compliant web browsers
            window.addEventListener("message", onMessage, false);
        } else {
            window.attachEvent("onmessage", onMessage);
        }

        //create trigger to resizeEnd event
        $(window).resize(function () {
            if (this.resizeTO)
                clearTimeout(this.resizeTO);
            this.resizeTO = setTimeout(function () {
                $(this).trigger('resizeEnd');
            }, 25);
        });

        //redraw graph when window resize is complete
        $(window).on('resize End', function () {
            drawChart();
        });

        function drawChart() {
            if (bar)
                bar.draw(data, options);
        }

        function updateData(chartData) {

            if (!initialized) {
                _chartData = chartData;
                return;
            }
            if (chartData) {
                var arrayData;
                var columnInfo = chartData.columns;
                if (chartData.data) {
                    arrayData = chartData.data;
                    if (columnInfo) {
                        arrayData.splice(0, 0, columnInfo);
                    }
                }
                data = google.visualization.arrayToDataTable(arrayData);
            } else {
                data = google.visualization.arrayToDataTable([]);
            }

            bar = new google.visualization.PieChart(document.getElementById('piechart'));
            drawChart();
        }

        function drawBasic() {

            var _data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['Work', 11],
                ['Eat', 2],
                ['Commute', 2],
                ['Watch TV', 2],
                ['Sleep', 7],
                ['Relax TV', 1],
                ['Exercise', 1.5],
                ['Read', 1],
                ['Meditate', .5]
            ]);

            var _options = {
                title: 'My Daily Activities',
                is3D: true,
                width: '900px',
                height: '500px',
                piesliceText: 'label',
            };

            var bar = new google.visualization.PieChart(document.getElementById('piechart'));

            bar.draw(_data, _options);
        }
    </script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
</body>
</html>

During development - you may want to enable the developer console (F12 in chrome) - it typically shows syntax errors like these.

Hope this helps!

Falko

Re: Issue with Data Driven component of SAS VA 8.2.

AnjaliNair — Fri, 29 Mar 2019 07:37:18 GMT

Thank You Falko. It works perfect now.