I'm trying to use google geochart on my website. But the problem is when draw geochart, I receive error: "Object # has no method 'each'"
Here the code I'm trying:
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
var chart = new google.visualization.GeoChart(document.getElementById('chart_1'));
chart.draw(data, options);
};
</script>
<div id="chart_1">Chart should be here</div>
Everything works fine when I remove prototype.js from the page, but I have to leave it.
Any suggestions how to resolve this conflict?
Look at https://developers.google.com/speed/libraries/devguide#prototype
and try to include 1.7.1.0, 1.7.0.0, 1.6.1.0, 1.6.0.3 or 1.6.0.2
You will get the error Object #<Object> has no method 'each' for any version prior to 1.7.1.0, so you just have to update your prototype with latest version available.
Some explanation would here be required, but I really cant tell exactly why. According to the 1.7.1 announcement the dom.js has been totally rewritten. An update from 1.7 to 1.7.1 which took 18 months (!!) The 1.7.0 RC3 is as far back as oct 2010, "including support for IE9" (!!) - so I guess a lot of programming regarding "new" HTML5 tags especially as the <svg>-tag google visualization uses a lot, is the reason behind it was not working prior to 1.7.1.
Related
Iam using d3 version 4.12.2
and eventDrops.js downloaded from this below link
https://gist.githubusercontent.com/thoka/ca508531e9a016fb815477621f9d6aae/raw/32b3a1e79208a840666882fec60804c68a96bf7f/eventdrops.js
and my code is
<html>
<head><title>asdasd</title>
<script src="./d3.js"></script>
<script src="./eventDrops.js"></script>
<script lang="javascript">
function test() {
var hardData = [{
name: 'sensor1',
dates: [
new Date(1458068401000),
new Date(1458068401000),
new Date(1458068403000),
new Date(1458068404000),
new Date(1458068405000),
new Date(1458068406000),
new Date(1458068411000),
new Date(1458068413000),
new Date(1458068415000),
new Date(1458068416000),
],}]; var eventDropsChart = d3.chart.eventDrops(); d3.select('body')
.datum(hardData)
.call(eventDropsChart);
}
</script>
</head>
<body onload="test()"></body></html>
2). which version of d3 works with eventDrops?
Thanks & Regards,
Govardhan
I'm not sure which version is the one you mentionned. I would recommend using the official one, available on: https://unpkg.com/event-drops. Be careful: this is the last version with breaking changes compared to previous versions.
D3 version 4 works with the 1.0.0 version.
For a working example of how it works, you can take a look on the demo code and adapt it according to your needs. :)
I setup a website running on Joomla 3.1 and I am using a masonry script that works perfectly:
// Masonry for boxes
function adjustments() {
$('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
I am first loading the JS file jquery.masonry.min.js found on masonry.desandro.com as well as the latest jquery.min.js file from the JQuery repository.
This has been working perfectly until I installed the latest update to Joomla, upgrading it from 3.1 to 3.2. Now, the masonry function will not work regardless of how I try to call it or position the JS files. I only get this error:
Uncaught TypeError: Cannot call method 'masonry' of null
At this point, like the tree said to the lumberjack, I'm stumped. Anyone else having this issue and/or have any ideas how to fix it?
The Joomla 3.2 release updated some jQuery elements, removed more MooTools dependencies and saw the introduction of com_ajax so you probably experiencing a conflict.
More specifically, you are probably experiencing a JQuery conflict and need to use noconflict() you can read how to adapt your script to use jQuery in noconflict() mode here
Something as simple as this may work:
// Masonry for boxes
function adjustments() {
var $j = jQuery.noConflict();
$j('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
Similar to cppl's answer with specifing you want to basically ensure you're using JQuery for your script, you can do this:
function adjustments() {
JQuery('#position-2').masonry({
singleMode: false,
columnWidth: 272,
resizeable: true,
itemSelector: '.newsflash-item',
isAnimated: true
});
}
This ensures the JS selection is done with jQuery and not with Mootools or any other JS.
i know its sounds a bit crazy, but so many clients have problems with not saving their article properly.
I just wanted to use a simple method to trigger the onclick of the APPLY button inside a joomla article in edit mode.
Primarily back end editing as i have a good admin template that allows me to show clients the bare bones.
I know that by clicking apply the page reloads but thats better than nothing.
How on earth do i add do this?
I was hoping something like this would work but i dont quite know how to trigger a button that seems to reside inside a toolbar function of some sort.
I have this:
<script type="text/javascript">
$(document).ready(function() {
$('??????').trigger('click');
});
</script>
What would replace the question marks?
Also i know i would need to put a timer into the jquery code but how do i get the link below to trigger?
http://mydomain.com/administrator/index.php?option=com_content§ionid=1&task=edit&cid[]=97
In the toolbar.content.html.php file joomla has this:
class TOOLBAR_content
{
function _EDIT($edit)
{
$cid = JRequest::getVar( 'cid', array(0), '', 'array' );
$cid = intval($cid[0]);
$text = ( $edit ? JText::_( 'Edit' ) : JText::_( 'New' ) );
JToolBarHelper::title( JText::_( 'Article' ).': <small><small>[ '. $text.' ]</small></small>', 'addedit.png' );
JToolBarHelper::preview( 'index.php?option=com_content&id='.$cid.'&tmpl=component', true );
JToolBarHelper::save();
/////////////////////////////////////
JToolBarHelper::apply(); // < // THIS IS WHAT I WANT TO TRIGGER
/////////////////////////////////////
if ( $edit ) {
// for existing articles the button is renamed `close`
JToolBarHelper::cancel( 'cancel', 'Close' );
} else {
JToolBarHelper::cancel();
}
}
...... more stuff here
}
I know this might sound crazy but wouldnt it be great if autosave could happen even without a reload, but i guess that would mean posting all the data using jquery rather than the php post and reload page method.
Anyways im not expecting a miracle here but if anyone could help that would be great.
Cheers in advance
John
PS:
i just tried something like this hoping maybe it will work but it just reloads the page:
function autosave()
{
window.location = "index.php?option=com_content§ionid=<?php echo $_GET['sectionid'];?>&task=edit&cid[]=<?php echo $row->id;?>"
}
You won't be able to do it without forcing a reload unless you decide to re-write the whole of com_content with an ajax implementation.
Looking at the code you've posted I guessing Joomla! 1.5 - which by default has MooTools 1.12 or 1.2.5 (if you enabled the MooTools upgrade plugin in later versions of 1.5.x) - so more of a question but why not use that?
You will have to modify the admin template to embed the JS you need, 1.5 has few triggers and none that are really worth using in the admin screens (unless you're up for a fair bit of PHP coding)
Somewhere in the <head> tag of com_content's Article view you will need to add this:
<script type="text/javascript">
var interval = 30 //seconds
var timer = setTimeout(submitbutton('apply'),(interval * 1000));
}
</script>
Please note I haven't tried this just typed it straight into here.
Since you're on 1.5 have you tried the Simple Content Versioning extension - it has autosave functionality that appears to be what you want - and probably works whereas who knows with my code in #3.
I have run into a bug with firefox and have searched all over and have not seemed to find the answer to an issue I have been having.
My program works great in Chrome and IE, but the iframe charts are not working in firefox.
I'm using a handler and then jquery.ajax to grab at the data and run the script.
jQuery.ajax({
url: jQuery(this).attr("href"),
data: data,
dataType: 'script'
});
data = all the information for a piechart and all the information for a table. The table is fine, but the pie chart iframe is empty. If I hit the backspace button then the piechart will show up. It's almost like the piechart is overshooting in firefox.
the data looks like this except with my own data. This is getting passed from the handler to the ajax call
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
Has anybody else come across a similar issue? I know the data is passed right and everything is received, but it just seems like Firefox is not playing nice with the iframes.
If anyone has any suggestions or thoughts, that would be great
Thanks
I had the same problem on FFox only.
I solved wrapping everything in a function and calling it with a small setTimeout
function drawChart() {
//...
}
setTimeout(drawChart, 200);
Just few hours after I read your post that the problem is only in FF i found the solution. Import JQuery on your page
<script src="../GoogleJs/jquery-1.4.2.min.js" type="text/javascript"></script>
then add a tag
$(document).ready(function () {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
drawVisualization()
}
});
where drawVisualization() is the drawing function.
It works like charm...
p.s. thank you for noticing that FF was the problem
I had the same Issue with Firefox last week and a combination of both answers worked for me just fine as well. A difference is that I'm using $.load instead of an iframe, so there is no need for me to include jQuery in the pgae fetched by AJAX of course.
In chrome the following worked on the AJAX page:
<script>
google.setOnLoadCallback(drawChart, true);
</script>
In Firefox this didn't work however, so I simply used:
<script>
$(document).ready(function() {
function drawChart() {} // omitted
drawChart();
});
</script>
Which worked for me in both Chrome 22 and Firefox 16.0.1
I began reading about Auto-loading a google map at:
http://code.google.com/apis/ajax/documentation/#AutoLoading
What's unclear to me is how to actually load the google map.
I have tried:
<script src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A
%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C
%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version
%22%3A%222.X%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A
%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D
%7D&key=MY_KEY"></script>
<script type="text/javascript">
//<![CDATA[
google.load("maps", "2.x");
google.setOnLoadCallback(function() {
map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 6);
map.addControl(new GSmallMapControl());
}
);
//]]>
</script>
But the map doesn't load.
Strange thing is that if I simply remove the "autoload=..." from the
URL - the map loads and works fine.
If I keep the autoload=... in the url and comment out the manually loading "google.load("maps", "2.x");", it still doesn't work.
Any ideas on how to properly use the auto-load functionality to gain
the most performance (least latency)?
You should use:
<script src="http://www.google.com/jsapi?autoload=%7B%22modules%22%3A
%5B%7B%22name%22%3A%22search%22%2C%22version%22%3A%221.0%22%2C
%22language%22%3A%22en%22%7D%2C%7B%22name%22%3A%22maps%22%2C%22version
%22%3A%222.X%22%7D%2C%7B%22name%22%3A%22elements%22%2C%22version%22%3A
%221.0%22%2C%22packages%22%3A%5B%22localsearch%22%5D%7D%5D
%7D&key=MY_KEY"></script>
Any nothing else. Remove the code after this in you example