Home/ Questions/Q 9039339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T09:42:24+00:00

I’m having a really weird issue while trying to visualize this scatter plot using

  • 0

I’m having a really weird issue while trying to visualize this scatter plot using the google visualization API.

Basically, if I put the first data point as [0,0] everything will be fine, but if remove [0,0] as the first point, the chart won’t produce. I checked the console and this is what it said:

“Uncaught SyntaxError: Unexpected token <
Uncaught Error: Invalid value in 0,0″

Why exactly does the first point need to be [0,0]?

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Camera','Avg Rating'],
          [ {v:6000, f: 'Canon EOS-1Ds Mark III'}, 60],
          [ {v:5000, f: 'Canon EOS-1Ds Mark II'}, 50],
          [ {v:4000, f: 'Canon EOS-1D Mark IV'}, 40]
        ]);

        var options = {
          title: 'Breakdown of Camera Models by Price, Photo Rating and Brand',
          hAxis: {title: 'Price (USD)', minValue: 0, maxValue: 7500},
          vAxis: {title: 'Avg Rating (at peak)', minValue: 0, maxValue: 55},
          legend: 'none'          
        };
        var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1000px; height: 1000px;"></div>
  </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Not sure why I had the error, but I found a way to get around it. It started working when I used the DataTable constructor:

    var data = new google.visualization.DataTable();
                data.addColumn('number', 'Price');
                data.addColumn('number', 'Canon');
                data.addColumn('number', 'Nikon');
                data.addColumn('number', 'Other');
                data.addRows([
                  [{v:6000, f: 'Canon EOS-1Ds Mark III'}, 60  ,null  ,null],
                  [{v:5000, f: 'Canon EOS-1Ds Mark II'}, 50  ,null  ,null],

    Instead of the arraytoDataTable constructor:

       var data = google.visualization.arrayToDataTable([
      ['Camera','Avg Rating'],
      [ {v:6000, f: 'Canon EOS-1Ds Mark III'}, 60],
      [ {v:5000, f: 'Canon EOS-1Ds Mark II'}, 50],
      [ {v:4000, f: 'Canon EOS-1D Mark IV'}, 40]
    ]);

    Hope that helps anybody who also runs into this.

    • 0