Devil Raily Devil Raily - 5 months ago 36
Javascript Question

How to make Google Link Chart Dynamic

I' am stuck trying to figure out how to make the Google Line Chart dynamic. The error am getting on the console:


Uncaught Error: Not an array


function pensionDawChart( DataPoints ){
console.log( [$.trim(DataPoints)] );
var data = google.visualization.arrayToDataTable( $.trim(DataPoints) );
var options = {
title: 'Pension',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('pension-calculator-chartContainer'));
chart.draw(data, options);
}

//Plot the chart
function pension_chart(){
var ageAtRetirement = 29;
var GeneralDataPoints, inflatedClosing, DataPoints;
years = $('#retirement-inputs #years-to-retirement').val();
DataPoints = [];
for (year = 1; year <= years; year++){
inflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .inflated-closing').text());
GaInflatedClosing = parseInt($('#lookup-table-preserved #row-' + year + ' .ga-inflated-closing').text());
DataPoints.push([year, inflatedClosing, GaInflatedClosing] + ',');
}
google.charts.setOnLoadCallback( pensionDawChart(DataPoints) );
}


Console Log
This the dump on the DataPoints

["1,10994,5248,,2,13988,6498,,3,16983,7747,,4,19977,…,,27,88848,37911,,28,91842,39174,,29,94837,40437,"]0: "1,10994,5248,,2,13988,6498,,3,16983,7747,,4,19977,8996,,5,22971,10247,,6,25966,11499,,7,28961,12752,,8,31956,14005,,9,34950,15258,,10,37944,16512,,11,40939,17767,,12,43933,19022,,13,46928,20277,,14,49922,21534,,15,52916,22791,,16,55910,24048,,17,58905,25306,,18,61899,26564....

Answer

this is working code, I have used websocket html5 update the graph

$scope.drawGraph= function() {

            var i = 0;
            var data = new google.visualization.DataTable();
            var chart = new google.visualization.LineChart(document
                    .getElementById('container3'));

            data.addColumn('datetime', 'Date');
            data.addColumn('number', 'dataaa');
            data.addColumn({
                type : 'string',
                role : 'tooltip'
            });
            data.addColumn({
                label : 'Style',
                type : 'string',
                role : 'style'
            });

    //You can add timer event here   
        webSocket.onmessage = function(event) {
                var point = JSON.parse(event.data);
                if (point.length > 1) {
                    $scope.Contribution = point;
                }

                var currentDate = new Date();
                var dateValue = parseInt(currentDate.getTime());
                var year = new Date(dateValue).getFullYear();
                var month = (new Date(dateValue).getMonth());
                var day = new Date(dateValue).getDate();
                var hours = new Date(dateValue).getHours();
                var minutes = new Date(dateValue).getMinutes();
                var seconds = new Date(dateValue).getSeconds();

                    data.addRow([
                            new Date(year, month, day, hours, minutes,
                                    seconds), (parseFloat(point.anomaly)),
                            (parseFloat(point.anomaly)).toString(),
                            'color: #5E92FF;stroke-color: #FF0000',
                            parseFloat(point.predictive) ]);


                var options = {
                    title : "title",
                    titlePosition : 'left',
                    width : '70%',
                    height : '30%',
                    titleTextStyle : {
                        color : 'white'
                    },
                    legend : {
                        'position' : 'right',
                        textStyle : {
                            color : 'white'
                        }

                    },
                    curveType : 'function',
                    backgroundColor : {
                        fill : 'transparent'
                    },
                    'chartArea' : {
                        'width' : '75%',
                        'height' : '65%',
                        'left' : '10%'
                    },
                    colors : [ '#0080FF', 'gold' ],

                    tooltip : {
                        isHtml : true
                    },
                    vAxis : {
                        textStyle : {
                            color : 'white'
                        }

                    },
                    is3D : true,

                    hAxis : {
                        textStyle : {
                            color : 'white'
                        },
                        format : 'hh:mm:ss',
                        viewWindow : {
                            min : new Date(year, month, day, hours,
                                    minutes, seconds - 100),
                            max : new Date(year, month, day, hours,
                                    minutes, seconds)
                        }
                    },

                }
                chart.draw(data, options);


        }