Single date datapoint is not drawn in line chart & explorer option causes "a is null"

61 views
Skip to first unread message

Uffi Schnuffi

unread,
Jan 16, 2019, 9:04:46 AM1/16/19
to Google Chart API
See below example.

Top chart: should draw a single datapoint ('date', 'number')
Bottom chart: draws two datapoints ('data', 'number')

The top one does not display the datapoints in the chart. Further, the option "explorer: { ... }" causes the "a is null" in the top chart.

Any clues on why this is? Why is the single data point not drawn?
What's up with the "a is null" when "explorer" is used??


<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    </head>


    <body>
        <div id="chart1" class="chart"></div>
        <div id="chart2" class="chart"></div>

        <script type="text/javascript">
            var chartData = {};
            var datapoint = [new Date("2018-07-01T23:26:34.000Z"), 4321];
            var datapoint2 = [new Date("2018-07-01T22:26:34.000Z"), 1234];

            google.charts.load('current', {
                packages: ['line', 'corechart'],
                mapsApiKey: "AIzaSyAJmRgAldd-U2y2-8EDlppO4Y5tZnK3D3g"
            });

            var options = {
                // Explorer causes "a is null" in chart1
                explorer: { axis: 'horizontal', keepInBounds: true },
                pointSize: 2,
                lineWidth: 1
            }

            google.charts.setOnLoadCallback(function() {
                var table1 = new google.visualization.DataTable();
                table1.addColumn('date');
                table1.addColumn('number');
                // This datapoint will not be visible in the chart! Why?
                table1.addRows([datapoint]);
                var chart1 = new google.visualization.LineChart(document.getElementById('chart1'));
                chart1.draw(table1, options);

                var table2 = new google.visualization.DataTable();
                table2.addColumn('date');
                table2.addColumn('number');
                table2.addRows([datapoint, datapoint2]);
                var chart2 = new google.visualization.LineChart(document.getElementById('chart2'));
                chart2.draw(table2, options);
            });


        </script>
    </body>

</html>


Daniel LaLiberte

unread,
Jan 16, 2019, 9:13:54 AM1/16/19
to google-c...@googlegroups.com
There is a new bug that your code exposes, which happens when there is only a single date value for the domain axis.   This is a problem because it can't tell what the range of the axis should be with only one point, but you can work around it by adding a minValue or maxValue to define the range of the axis, like this:

  hAxis: { minValue: new Date("2018-07-01T22:26:34.000Z")},

See:


--
You received this message because you are subscribed to the Google Groups "Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chart-a...@googlegroups.com.
To post to this group, send email to google-c...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.


--

Lee Deneault

unread,
Jan 16, 2019, 11:05:38 AM1/16/19
to google-c...@googlegroups.com
Hello Everyone!
Attached, please find a very 'General Purpose' Google API Chart that I put together a while back to serve as a 'Strip Chart Display" that allows the user to focus in on a particular segment of the display that can be controlled by maneuvering the 'slider controls' (green) at the bottom. This display has served very well for me in many past applications of analyzing time-based, multi-parameter, signal data and it even has an interactive component associated with it that you can see if you roll over the waveforms with the mouse!
I hope that you will also find this useful!
LEE
  
Google - Strip Chart.html
Reply all
Reply to author
Forward
0 new messages