Null DatesHandling when Ploting a graph with data with some dates as NULL.

[Naresh Kumar Sanda]

Hello Team,

When I have Null in one my by record,Visualization is ignoring that record;data.addRow([null, 1111,1823]);.

Even I tried passing to null to date object (data.addRow([new Date(null),1544,419]));which is giving some irrelavent date,instead of that I want to show Null as my dimention with null valued dates when evor I have null instead of completely ignoring that.

Please help in achieving that .

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load('visualization', '1', {packages: ['controls', 'charteditor']});

google.setOnLoadCallback(drawChart);

function drawChart() {

    var data = new google.visualization.DataTable();

    data.addColumn('date', 'X');

    data.addColumn('number', 'Y1');

    data.addColumn('number', 'Y2');

    

data.addRow([null, 1111,1823]);

data.addRow([new Date(2014, 2,1), 999,4211 ]);

data.addRow([new Date(null),1544,419]);

data.addRow([new Date(2015, 3,1), 23,486 ]);

data.addRow([new Date(2016, 4,1), 8669,476 ]);

data.addRow([new Date(2016, 5,1), 46,4944 ]);

data.addRow([new Date(2016, 6,1), 1978,442 ]);

data.addRow([new Date(2016, 7,1), 112,274 ]);

data.addRow([new Date(2016, 8,1), 2144,4145 ]);

data.addRow([new Date(2016, 9,1), 135,946 ]);

data.addRow([new Date(2016, 10,1), 178,747 ]);

   

    

    var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));

    var control = new google.visualization.ControlWrapper({

        controlType: 'DateRangeFilter',

        containerId: 'control_div',

        options: {

            filterColumnIndex: 0,

            ui: {

                chartOptions: {

                    height: 50,

                    width: 600,

                    chartArea: {

                        width: '80%'

                    }

                }

            }

        }

    });

    var chart = new google.visualization.ChartWrapper({

        chartType: 'ColumnChart',

        containerId: 'chart_div'

    });

    function setOptions (wrapper) {

       

        wrapper.setOption('width', 620);

        wrapper.setOption('chartArea.width', '80%');

      

    }

    

    setOptions(chart);

   

    

    dash.bind([control], [chart]);

    dash.draw(data);

  google.visualization.events.addListener(control, 'statechange', function () {

        var v = control.getState();

        document.getElementById('dbgchart').innerHTML = v.range.start+ ' to ' +v.range.end;

        return 0;

    });

}

</script>

<div id="dashboard">

    <div id="chart_div"></div>

    <div id="control_div"></div>

<p><span id='dbgchart'></span></p>

</div>

Thanks & Regards,

Naresh