Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google charts, how do you add empty data into columns

I have the following rows with columns declared with null as the value for when I have no data for it... yet it does not plot the graph correctly... How do I add empty data for a column so that the line will pass through the average between the last entry and the current entry?:

        function DrawChart() {      
            // Create the data table.
            var data = new google.visualization.DataTable();

            data.addColumn('date', 'Date');   
            data.addColumn('number', 'a name');                 
            data.addColumn('number', 'a name 2');                 
            data.addColumn('number', 'a name 3');                 

            data.addRows( [
                [new Date( 2013,  7,  1 ),1.5,null,null],
                [new Date( 2013,  6,  28 ),-1.5,null,null],
                [new Date( 2013,  6,  21 ),null,-1,null],
                [new Date( 2013,  6,  15 ),null,0,2],
                [new Date( 2013,  6,  7 ),1.5,null,null],
                [new Date( 2013,  6,  5 ),-1,null,null],
               [new Date( 2013,  6,  1 ),0.5,2,null],
            ] );  

            // Set chart options
            var options = {
                'title': 'tracker',
                'width': 800,
                'height': 600,
                'backgroundColor': 'transparent',
                chartArea: 
                {
                    left: 'auto',
                    top: 'auto'
                },
                hAxis: 
                {
                    title: 'Date of bla',
                    titleTextStyle: 
                    {
                        italic: false
                    },
                    gridlines: 
                    {
                        color: "#E3E3E3"
                    }, 
                    showTextEvery: 1
                },
                vAxis: 
                { 
                    title: 'Positivity',  
                    titleTextStyle: 
                    {
                        italic: false
                    },
                    gridlines: 
                    {
                        color: "#E3E3E3"
                    } 
                }
            };

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart( document.getElementById('chartDiv') );  

            google.visualization.events.addListener( chart, 'select', selectHandler );

            chart.draw(data, options);
        }   
     </script>

https://developers.google.com/chart/interactive/docs/reference#DataTable

enter image description here

Entering 0 instead of null means the data would come up as 0.. I don't want that to happen.. and if I put the average between the oldest and latest data, it would still be a selectable point which I also do not want?

like image 637
Jimmyt1988 Avatar asked Dec 21 '22 04:12

Jimmyt1988


1 Answers

You want to use the "interpolateNulls" option, described (on https://developers.google.com/chart/interactive/docs/gallery/linechart) as "Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point."

like image 113
dlaliberte Avatar answered Jan 17 '23 20:01

dlaliberte