0

I got a problem with Google charts and this code. So, this code works perfectly if I put it in head section directly, but if I put it in external file, I receive an error:

Uncaught Error: Container is not defined

And when I inspect that error in console, it points me to this line:

 var chart = new google.visualization.LineChart($( "#curve_chart" ));

So there is error. Do you have any idea way? I tried using function getElementById too. And what is strange, this code works without error if placed in head between script tags. Once I put it in head but in external file, it throws this error!

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

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    function drawChart() {
      var jsonData = $.ajax({
          url: "https://www.example.com/pay/process.php?action=load_graph",
          dataType:"json",
          async: false
          }).responseText;
      console.log(jsonData);
      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(eval("("+jsonData+")"));
      var options = {
      pointSize: 5,
      displayMode: 'auto', 
      colors: ['#b5e1fe','#ff9666'],
      pointShape: { type: 'circle' },
      legend: { position: 'none' },
      width: 720,
      height: 300,
      };


      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.LineChart($( "#curve_chart" ));
      chart.draw(data, options);
    };

And this is my jsonData, I used code sample from Google:

         {
          cols: [{id: 'A', label: 'NEW A', type: 'string'},
                 {id: 'B', label: 'B-label', type: 'number'},
                 {id: 'C', label: 'C-label', type: 'date'}
          ],
          rows: [{c:[{v: 'a'},
                     {v: 1.0, f: 'One'},
                     {v: new Date(2008, 1, 28, 0, 31, 26), f: '2/28/08 12:31 AM'}
                ]},
                 {c:[{v: 'b'},
                     {v: 2.0, f: 'Two'},
                     {v: new Date(2008, 2, 30, 0, 31, 26), f: '3/30/08 12:31 AM'}
                ]},
                 {c:[{v: 'c'},
                     {v: 3.0, f: 'Three'},
                     {v: new Date(2008, 3, 30, 0, 31, 26), f: '4/30/08 12:31 AM'}
                ]}
          ],
          p: {foo: 'hello', bar: 'world!'}
        }

Thank you very much!

Demba Demba
  • 37
  • 6
  • possible duplicate of [Uncaught Error: Container is not defined](http://stackoverflow.com/questions/19615750/uncaught-error-container-is-not-defined) – rtome May 19 '15 at 12:05
  • You are missing some information to diagnose this. If you could post a [plunker](http://plnkr.co), that would help a lot. Specifically, it would be nice to see your markup (in an around the element you're putting the chart into), and also where your script tags are. – nbering May 20 '15 at 14:56
  • As an aside, your chart data is fine if declared in your code, but your dates are not valid JSON. Remove the `new` keyword, and wrap the Date(...) in quotes. The google charts API will parse that as a JavaScript Date object. – nbering May 20 '15 at 14:59

0 Answers0