I am trying to use the google chart tools (from the visualization api; not the image charts) using an infoBubble. The infobubble is awesome; does exactly what I need it to. My project calls for using a chart in one of the tabs on the infobubble. So I am trying to use this code (see below) to build a contentString that will create a chart in the div's content. It isn't making any charts happen, though. Does anything look wrong, in particular, with the content string?
//returns the status string
function GetPublicProjectStatusString(data){
var contentString = '<div id="content" style="margin:0;">'+
'<h3>' + 'Project Phase' + '</h3>'+
'<p>' + data.ProjectPhase + '</p>'+
'<div id="parentDiv">' +
'<div id="chartDiv" style="top:0px;left:0px;width:200px;height:200px;">' +
'</div>' +
'<div id="secondDiv">' +
'<h3>' + 'Start Date' + '</h3>' +
'</div>' +
'</div>' +
'</div>' +
'<script type="text/javascript">' +
'var chartdata = new google.visualization.DataTable();' +
'chartdata.addColumn("string", "Source");' +
'chartdata.addColumn("number", "Amount");' +
'chartdata.addRows([' +
'["Federal",4],' +
'["State",8],' +
'["County",9],' +
'["Local",14],' +
']);' +
'var options = {"title":"Project Budget"' +
'"width":200,' +
'"height":200};' +
'var chart = new google.visualization.PieChart(document.getElementById("chartDiv"));' +
'chart.draw(data,options);' +
'</script>';
return contentString;
}
I think the following approach might be helpful to you as I dont think you can use the script tags in the content string.
Use a div in the content string where you want to place your graph
var contentString = "<div id='chart_div'></div>";
Have a look at this google chart example that can be adapted to add the chart to the div in the content string:
Google Charts Tools Example
However the div in your content string will probably be created by user input like clicking a marker so you cannot directly add the chart to it (which is done in the chart example) as it is not part of the dom yet. Therefor your have to listen to the event that creates the infoBubble. For a infowindow connected to a marker in the google maps api this will be something like this:
google.maps.event.addListener(infoWindow, 'domready', function() { drawChart(); });
Where infoWindow is the info window you created and drawChart a function you wrap the adapted chart code example in.
Hope this helps.
Failing to so call chart::draw() within the domready event handler appears to be what was causing the "... browser does not support Google Charts" error message I was seeing.
Related
I want to change the HTML content of my webpage from within a javascript function. My HTML looks like this:
<div class="chartInfo">
<p id="last_updated">Hello</p>
</div>
My Javascript function is a QueryResponse to a GoogleCharts query. It looks like this:
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
function function_1() {
var queryString = encodeURIComponent('SELECT AA, AB');
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1dXP9yGEzNlmRxwCr2kyMM9CcS5hloIxKvef0RSa10/gviz/tq?gid=559927965&headers=1&tq=' + queryString);
query.send(function_2);
};
function function_2(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
};
var data = response.getDataTable();
var t = (data.getvalue(0,0));
var latest_time = t.getDate()
document.getElementById("last_updated").innerHTML = "Last updated: " + latest_time;
};
</script>
Currently the webpage is showing "Hello" rather than "Last Updated: " + latest_time as I want it to.
I think it may be a problem of scope - when I write scripts out underneath I can change it from "Hello" to another string using document.getElementById, but then I can't access the variable latest_time which is within function_2.
Thanks in advance for any help!
Change dom.innerHTML to dom.textContent for changing text of it
I am developing an app which enables me to show multiple markers when I click on the markers it should show me an image along with some details.
My current code is :
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(
contentString =
'<div id="content">'+
'<p>'+ 'sensor image:' +'<br/>' +
'<img src="{% static "test/imgs/sen1.jpg" %}">'+
+ '<br/>' +
'sensor light level :' + j[i][4] +'<br/>' +
'sensor battery level :' + j[i][5] +
'</p>'+
'</div>'
);
infowindow.open(map, marker);
}
})(marker, i));
and I get the desired output:
!https://imgur.com/a/Q1lPU
I have an array, j which contains name of the image I want to load, previously i hardcoded the url
'<img src="{% static "test/imgs/sen1.jpg" %}">'+
I tried to make this dynamic by using
'<img src="{% static "test/imgs/'+ j[i][3] +'.jpg" %}">'+
But i got an error , on using F12 it appears
GET localhost:8000/static/test/imgs/'%2B%20j%5Bi%5D%5B3%5D%20%2B'.jpg 404 (Not Found)
a lot of garbage was generated instead of the value sen1.
I am not able to understand why this is happening and would like some help.
Try simple:
'<img src="/static/test/imgs/' + j[i][3] + '.jpg">'
You can't use dynamic render for jinja templates, because this render run only first time.
I have a javascript code and i want to insert an image inside the dynamically created html page. Please correct me if i'm going wrong with the code. the code runs something like this:
var html = [
'<div class="uicomponent-panel-controls-container");">',
'<img src=' + image1 + '>',
'</div>'
].join('\n');
_dockPanel.container.append(html);
Thanks in advance.
You have a typo here: ...container");">'
Here is the working (for demo purpose slightly modified) fiddle:
var image1 = 'https://image.flaticon.com/teams/slug/freepik.jpg';
var html = [
'<div class="uicomponent-panel-controls-container">',
'<img src=' + image1 + '>',
'</div>'
].join('\n');
document.getElementById("dock").innerHTML = html;
<div id="dock"></div>
var html = [...].join('');
html rendering dom does not need to be separated by '\n'
Whenever I add the code below as a widget to my blog, the slider (Welcome...) on it will stop working. The slider should scroll through a few different images. I've read that 'no.conflict' will fix this problem but for the life of me haven't a clue where to put the code.
Recent Videos Widget
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
<style type="text/css">
div.PBTytC {clear:both;padding:5px;font-size:12px;}
div.PBTytC.odd {background-color: #;}
div.PBTytC_thumb {position:relative;float:left;margin-right:8px;line-height:1;}
div.PBTytC_thumb img {width:76px;height:78px;border:0px solid #55A66B;}
div.PBTytC_title {font-weight:none;}
</style>
<script type='text/javascript'>
var PBTYoutubeUserName = "XXX";
var PBTYoutubeMAXResults = 3;
var PBTYoutubeAllow = "";
var PBTYoutubeDisallow = "";
var PBTYoutubeWgetIsEmpty = "No entries";
$(document).ready(function() {
$.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=58c841d14337ba4fbf693abd9701dc49&_render=json&max-results="+PBTYoutubeMAXResults+"&allow="+PBTYoutubeAllow+"&disallow="+PBTYoutubeDisallow+"&user="+PBTYoutubeUserName+"&_callback=?", function(response) {
var htm = "";
for(var i=0;i<response.count;i++) {
var item = response.value.items[i];
htm += '<div class="PBTytC';
if(i%2 == 1) htm += ' odd';
htm += '"><div class="PBTytC_thumb"><a target="_blank" href="' + item.link + '"><img title="' + item.title + '" src="' + item.thumb + '"/></a></div>';
htm += '<div class="PBTytC_title"><a target="_blank" href="' + item.link + '">' + item.title + '</a></div>';
htm += '<div class="PBTytC_description">' + item.description + '</div><div style="clear:both;"></div></div>';
}
if(htm == "") htm = PBTYoutubeWgetIsEmpty;
$("#PBTytWdtLoad").html(htm);
});
});
</script>
<div id="PBTytWdtLoad">Loading...</div>
Here is the link to my blog: Link
Thanks for reading and hopefully helping me out.
Including JQuery twice can cause issues. The code fragment above and your blog both have a script tag for query. Try adding it to your blog without including JQuery again.
As for the plugin not working:
Your site includes JQuery; Then it has a lot of scripts that use JQuery; Then it has a script that changes the JQuery operator so that $ isn't use since this will cause conflicts with other scripts using the variable $ in another way. Considering the amount of scripts on your site I'm surprised you don't have more issues.
Anyway after your last script tag you can't use $ in your scripts you have to use jQuery instead. For example:
jQuery(document).ready(function() {
jQuery.getJSON("http://pipes.yahoo.com/pipes/pipe.run?
If you go through your whole script and change '$' to 'jQuery' then that will help with your script where it is in your page now, with the current page listed at your blog.
Really though, this is just putting a band-aid on a bigger problem. It's worth thinking about what scripts you really need.
buildIMG = (src, resize) ->
html = '<div class="left"><div class="foods_image">'
html += '<a onclick="popitup("http://somewhere.com/test" href="javascript:void(0)">'
html += ' <img src="'+src+'" '+resize+' />'
html += '</a>'
html += '</div></div>'
html
popitup = (url) ->
newwindow=window.open(url,'name','height=640,width=640')
newwindow.focus() if window.focus
false
I currently have a bookmarklet that inserts javascript code(the one above) into a website. I wrote the above coffeescript and it generates this:
(function() {
var buildIMG, popitup;
buildIMG = function(src, resize) {
var html, nbsp;
html = '<div class="left"><div class="foods_image">';
html += '<a onclick="popitup(\'http://somewhere.com/test\');" href="javascript:void(0)">';
html += ' <img src="' + src + '" ' + resize + ' />';
html += '</a>';
html += '</div></div>';
return html;
};
popitup = function(url) {
var newwindow;
newwindow = window.open(url, 'name', 'height=640,width=640');
return newwindow.focus()(window.focus ? false : void 0);
};
}).call(this);
I snipped the functions that uses buildIMG. That function creates an overlay over the site and displays all images in that overlay. buildIMG is called for each image to create the html.
The problem is that the onclick="popitup("http://somewhere.com/test" portion doesn't work. It is undefined.
A solution I did was to remove this which was generated by CoffeeScript:
(function() {
}).call(this);
It was fixed as soon as I removed that. How do I not have CoffeeScript put in those lines in my generated javascript?
CoffeeScript allows to compile JavaScript without this safety wrapper by --bare option.
Although suppressed within this documentation for clarity, all
CoffeeScript output is wrapped in an anonymous function: (function(){
... })(); This safety wrapper, combined with the automatic generation
of the var keyword, make it exceedingly difficult to pollute the
global namespace by accident.
It's from CoffeScript site.
If you want to create a global method or variable you need to
root = this
localProperty = "111"
root.property = localProperty
And then you'll get a property in global scope.