You mean calling google.load twice? The solution is to load both packages
at the same time:
google.load('visualization', '1', {'packages':['table', 'corechart']});
On Saturday, February 1, 2014 12:41:47 PM UTC-5, Stelios Voskos wrote:
>
> Yeah the error went away, thanks. The problem is that I need to visualize
> a table and a scatter graph for the geocoded address. I know how to
> implement them(see testGraph.html), but I can't draw my table and graph
> inside the geocodeCrimeLocation in ThreeComponent.html, as it will be
> called twice and it will throw an error. Do you have any ideas how to fix
> this issue? Thanks
>
>
> On Fri, Jan 31, 2014 at 6:32 PM, asgallant
> <[email protected]<javascript:>
> > wrote:
>
>> I saw this posted on StackOverflow (
>> http://stackoverflow.com/questions/21478450/google-visualization-data-table-is-not-visualized)
>>
>> - did that resolve your problem?
>>
>>
>> On Friday, January 31, 2014 7:58:01 AM UTC-5, Stelios Voskos wrote:
>>>
>>> I have implemented part of the functionality f my dashboard in different
>>> files and now I'm trying to merge them all together. My dashboard is
>>> getting an address from a geocoding field and retrieves url json data from
>>> a website. Then the data are visualized on the map,on a data table and on a
>>> scatter chart. Now I'm trying to merge the google map with the data table,
>>> but it's been a couple of hours that I'm getting the following error:
>>> Uncaught
>>> TypeError: Object #<Object> has no method 'load' I'm trying to change
>>> the order that the libraries are loaded, but I didn't see any result. Also,
>>> the data table and scatter graph are not displayed The problem arises when
>>> I include both APIs(Map and visualization). Here is part of my code. If you
>>> need more code, please find attatched the 2 documents that I'm enclosing to
>>> you. Thank you.
>>>
>>> Javascript:
>>>
>>> <script
>>> src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false";></script><script
>>> type="text/javascript"
>>> src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script
>>> src="http://code.jquery.com/jquery-1.10.1.min.js";></script> <!-- jQuery
>>> CDN --><script type="text/javascript">
>>> google.load('visualization', '1', {'packages':['table']});
>>> google.setOnLoadCallBack(drawTable);
>>> var geocoder;
>>> var map;
>>> var latlng;
>>> var markers = [];
>>> var myPositionMarker = null;;
>>> //Initializing the map
>>> function initialize() {
>>> var lat = 52.629729;
>>> var lng = -1.131592;
>>> geocoder = new google.maps.Geocoder();
>>> latlng = new google.maps.LatLng(lat, lng);
>>> var mapOptions = {
>>> zoom: 8,
>>> center: latlng
>>> }
>>> map = new google.maps.Map(document.getElementById("map-canvas"),
>>> mapOptions);
>>> getCrimeByLocation(lat, lng);
>>> }
>>> function geocodeCrimeLocation(date){
>>> var address = document.getElementById('address').value;
>>> geocoder.geocode( { 'address': address}, function(results, status) {
>>> if (status == google.maps.GeocoderStatus.OK) {
>>> map.setCenter(results[0].geometry.location);
>>> var latitude = results[0].geometry.location.lat();
>>> var longitude = results[0].geometry.location.lng();
>>> if(date == null){
>>> var d = new Date();
>>> date = d.getFullYear() + '-' + (d.getMonth()+1);
>>> //hardcoding as of now as jan 2014 data is not there, remove when req
>>> date = "2013-01";
>>> }
>>> $.getJSON(
>>> "http://data.police.uk/api/crimes-street/all-crime?lat="+latitude+"&lng="+longitude+"&date="+date,
>>> function(data) {
>>> while(markers.length > 0){
>>> markers.pop().setMap(null);
>>> }
>>>
>>> //marking the requested position
>>> addMyPositionMarker(latitude, longitude);
>>>
>>> $.each( data, function( key, val ) {
>>> //var myLatlng = new google.maps.LatLng(val.location.latitude,
>>> val.location.longitude);
>>> var marker = new google.maps.Marker({
>>> position: new google.maps.LatLng(val.location.latitude,
>>> val.location.longitude),
>>> map: map,
>>> animation: google.maps.Animation.DROP,
>>> draggable: false,
>>> title: val.location.street.name
>>> });
>>> markers.push(marker); // saving markers for reference, so that we
>>> can remove them later
>>> });
>>>
>>> if(markers.length > 0){
>>> fitBoundsMap();
>>> }
>>> });
>>>
>>> } else {
>>> alert('Geocode was not successful for the following reason: ' + status);
>>> }
>>> });
>>> }
>>> function drawTable(){
>>> var jsonData = $.ajax({
>>> url: "getJSONData.php",
>>> dataType:"json",
>>> async: false
>>> }).responseText;
>>> var dataTable = new google.visualization.DataTable();
>>> dataTable.addColumn('string','category');
>>> dataTable.addColumn('string','context');
>>> dataTable.addColumn('number','id');
>>> dataTable.addColumn('string','location_subtype');
>>> dataTable.addColumn('string','location_type');
>>> dataTable.addColumn('string','month');
>>> dataTable.addColumn('string','persistent_id');
>>> dataTable.addColumn('string','street name');
>>> var json=JSON.parse(jsonData);
>>> for (var i=0; i<json.length; i++) {
>>> delete json[i].outcome_status;
>>> var row = [];
>>> row.push(json[i].category);
>>> row.push(json[i].context);
>>> row.push(json[i].id);
>>> row.push(json[i].location_subtype);
>>> row.push(json[i].location_type);
>>> row.push(json[i].month);
>>> row.push(json[i].persistent_id);
>>> row.push(json[i].location.street.name);
>>> dataTable.addRow(row);
>>> }
>>> var chart = new
>>> google.visualization.Table(document.getElementById('table_div'));
>>> chart.draw(dataTable, {width: 1000, height: 300});
>>> }
>>>
>>> HTML:
>>>
>>> <body onload="initialize()"><!-- <div id="map-canvas" style="width: 320px;
>>> height: 480px;"></div> --><div id="map-canvas" style="width: 100%; height:
>>> 480px;"></div><div>
>>> <input id="address" type="textbox" placeholder = "Enter address, or
>>> postcode">
>>> <input type="button" value="Encode"
>>> onclick="geocodeCrimeLocation()"></div><br><div id =
>>> "pieChart_div"></div><br><div id = "table_div"></div></body>
>>>
>>> PHP:
>>>
>>> <?php
>>> $json =
>>> file_get_contents('http://data.police.uk/api/crimes-street/all-crime?lat=$_GET['latitude']&lng=$_GET['longitude']&date=2013-01');
>>>
>>> $json = str_replace("\xe2\x80\xa8", '\\u2028', $json);
>>> $json = str_replace("\xe2\x80\xa9", '\\u2029', $json);
>>> echo $json;?>
>>>
>>> --
>> You received this message because you are subscribed to a topic in the
>> Google Groups "Google Visualization API" group.
>> To unsubscribe from this topic, visit
>> https://groups.google.com/d/topic/google-visualization-api/ZQwYzI_kfXA/unsubscribe
>> .
>> To unsubscribe from this group and all its topics, send an email to
>> [email protected] <javascript:>.
>> To post to this group, send email to
>> [email protected]<javascript:>
>> .
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
