I am with following problem, when I initialize my site I can see the chart, but when I click to go to page he of the problem and not the shows. The site was programmed in Ajax, therefore I would give only a div. The following code is in one of these pages that I draw with Ajax. This feature page I call the dashboard:
google.charts.load("current", {packages: ["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Usado', 'Liberado'],
['Usado', <?php echo $tamanho->USADO ?>],
['Liberado', <?php echo $tamanho->LIBERADO ?>]
]);
var options = {
title: 'Banco de dados',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
My index I include myself the following directory web:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
When I open the console of chrome, I am informed of the following error:
Uncaught Error: google.charts.load() cannot be called more than once with version 44 or earlier.
Searching the Internet not found nothing concrete, however I noticed that is something related to quantity of calls made. Not believed for obvious reasons of non-operation of the amendments. Someone knows how to fix the problem ?
I know that it is too late, but in case you still didn't found a solution, you can try this:
google.charts.load('45', {packages: ['corechart']});
write "45" instead of "current", because "current" is still version "44".
This worked for me
Related
I'm trying to use a library called 'jquery.instagramFeed' that allows me to display images from a user's feed without using an access token. So, I've been trying to use it, but, for some reason, it's not showing me anything.
I've been researching for some weeks now, and I've tried A LOT of solutions proposed in many posts here (and in other forums as well), like these ones:
TypeError: $ is not a function when calling jQuery function
"Uncaught TypeError: $ is not a function" with instafeed
Is there still a way to fetch instagram feed without using access token now (06/2016)?
Some of them did work for me, but as soon as I refreshed the page, it disappeared again. And now, I can't make it show again, regardless of what I do.
I've been checking the developer console to see if there was something wrong, and I noticed that there it always showed me this message:
Uncaught TypeError: $.instagramFeed is not a function
at <anonymous>:3:16
at m (jquery.js:2)
at Re (jquery.js:2)
at w.fn.init.append (jquery.js:2)
at Object.<anonymous> (onepage:633)
at Function.each (jquery.js:2)
at percorrerOnepage (onepage:591)
at Object.success (onepage:663)
at u (jquery.js:2)
at Object.fireWith [as resolveWith] (jquery.js:2)
At this point, my code was like this:
JQuery and jquery.instagramFeed imports
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
The JQuery Function that shows Instagram Feed
<script type="text/javascript">
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
</script>
And this is the container the functions searches for
<div class="instafeed"></div>
So, after looking at some posts on how to fix this error, I made some changes in my jquery.instagramFeed function, and it's currently like this:
<script type="text/javascript">
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
});
})(jQuery);
</script>
With that, I was finally able to make the error disappear, but it's still not showing like it's supposed to. I thought that maybe, it still wasn't being recognized as a function, so to make sure everything was working, I checked the jquery.js and the jquery.instagramFeed on the console... And to my surprise, it is.
Me checking if something is being returned
This is how it's supposed to be like
Instagram Feed working
But this is what it's showing right now
Instagram Feed not working
I've been stuck for a month now because of this problem, and I'm honestly out of ideas at this point. I'm still very new to programming, so I might be doing something wrong.. Can someone please tell me what the problem is?
Update (27/04)
Hello again, everyone. I'm still trying to fix this stupid problem.. I was caught up in other projects, so I wasn't able to properly focus on this. But now that I'm back to it, I noticed something kinda weird..
You see, everytime that I access the website for the first time in a day, it loads the feed, but, as soon as I refresh the page, it disappears and never loads the feed again. Is it something that has to do with cache or something like that?
As you can see, it's working
But as soon as I refresh the page it stops working...
I've attempted to re-create the feed with the code examples you've given, and it appears to work as expected
Check out the fiddle here
<div class="instafeed"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.instagramFeed/3.0.4/jquery.instagramFeed.js"></script>
<script>
(function($){
$(window).on('load', function(){
$.instagramFeed({
'username': 'turismoestadosp',
'container': ".instafeed",
'display_profile': false,
'display_biography': false,
'display_gallery': true,
'callback': null,
'styling': true,
'items': 8,
'margin': 1
});
});
})(jQuery);
</script>
In this screenshot It looks like you have a different version of jQuery loading (3.3.1), but in your examples here you're including 3.5.1, which suggests you're including it multiple times. Check your project for any other instances of jQuery being inserted, and remove the appropriate one.
Also order of these import statements is important, so make sure jQuery loads first, then the instagram widget, followed by your custom script.
UPDATE
It seems that the API itself is having some issues. I've been stuck for too long with this problem, so unfortunately, I'll have to choose another API that works. This one is too unstable, and it has a lot of problems..
I want to thank all the helpful answers and for all the help provided in this post.
I'm trying to open highcharts on new browser windows so i'm doing something like this.
let chartWindow = window.open("", "_blank", "left=0,top=0,width=600,height=450");
let chartContainer = $("<div />", {
class: "chart-container"
});
$(chartWindow.document.body).append(chartContainer);
Highcharts.chart(chartContainer[0], chartOptions);
But if more than one window is open and if you try to zoom on other windows apart from the first one the click get stuck. Seems like some event is not firing properly. So if you try to select the chart to zoom it gets stuck and you have to go to the first chart that was opened and click there to fix it. I'm sure is because of opening the charts on new windows but i need to do it.
What could be the problem here?
Edit: code sample
This problem looks like a bug, so I reported it on Highcharts github: https://github.com/highcharts/highcharts/issues/9748
As a workaround you can edit Highcharts Pointer methods setDOMEvents:
if (!H.unbindDocumentMouseUp) {
H.unbindDocumentMouseUp = [];
}
H.unbindDocumentMouseUp.push(addEvent(
ownerDoc,
'mouseup',
pointer.onDocumentMouseUp
));
and destroy:
H.unbindDocumentMouseUp.forEach(function(unbind) {
unbind();
});
Live demo: http://jsfiddle.net/BlackLabel/cxz7hugp/
anyone experienced this? I am new to this so I am not sure exactly what is going on here. But I am trying to use jqplot's meter gauge per documentation and it doesn't seem to be working. I can create bar, line, etc graphs just fine.
include the necessary script link (as well as the others needed):
<script type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.min.js"></script>
markup
<div id='chart6'></div>
js
$(document).ready(function () {
plot6 = $.jqplot('chart6', [[18]], {
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
firebug says:
TypeError: c.jqplot is undefined - inside the meterGaugeRender js file.
any help would be greatly appreciate as always.
It looks like you did not include the basic jqPlot library, just the meter gauge add on.
I have this page:
<script type="text/javascript" src="jQuery/Highcharts/highstock1.1.6.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highcharts2.1.4.js"></script>
and in the page I use
$.getJSON(
"server/indice.server.php?row=" + row +"&item="+ item,
null,
function(data)
{
chartindice = new Highcharts.Chart(
{
chart:
{
renderTo: 'graph',
defaultSeriesType: 'line',
zoomType: 'x'
},
/////moore setting..
series:
[{
type: 'area',
name: titleindice,
data: indice,
showInLegend : false //disable the the show/hide icon
}]
});
});
and an highstock graph
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'chartHistory'
},
rangeSelector: {
selected: 2
},
series: [{
data: history,
type: 'spline',
tooltip: {
valueDecimals: 2
}
}]
});
and they can't work together, just one or the other.
What can I do?
Got same trouble with conflicting Highchart and Highstock. here's the official solution:
Keep in mind that the Highcharts.Chart constructor and all features of
Highcharts are included in Highstock, so if you are running Chart and
StockChart in combination, you only need to load the highstock.js
file.
http://highcharts.com/errors/16
Highcharts is included in highstock.js, so please take look at the example, how use highcharts with highstock.js.
http://jsfiddle.net/sbochan/PtXhB/
Secondly I advice to use the newest highstock.
I have experienced the same problem when I tried to use Highstock chart and Angular Gauge,
And the problem was solved when I try to rearrange highstock highchart javascript library like this
<script type="text/javascript" src="jQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highstock.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highcharts-more.js"></script>
or (if you don't want to use additional graphics)
<script type="text/javascript" src="jQuery/Highcharts/highcharts.js"></script>
<script type="text/javascript" src="jQuery/Highcharts/highstock.js"></script>
I hope it can be useful
you must delete this file:
highcharts.js
i tried and it works
Im my case, including only HighStock's file worked for HighChart's as well.
I have many charts, highchart's or highstock's, possible to be included on same page, and I just call HighStock.js once and it works for both !
Use just
highstock.js
and delete highcharts.js
And It's work well for me
And Good luck
Highstock contains most of HighCharts code. Have you tried including only highstock.js in your page to display both charts ?
I had same issue and got fixed by ordering my JS as below.
<script type="text/javascript" src="$javascript_folder/highstock.js"></script>
<script type="text/javascript" src="$javascript_folder/highcharts.js"></script>
I don't know its working fine according Ardi. Is works fine for me when i load highstock.js first followed by highcharts.
I'd like to use jQuery with Google maps. I'm trying to replicate this example. Below is given the code that I'm using. The problem is that the map does not appear on my web-page. It's just blank. What's the case?
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.ui.map.js"></script>
<div id="fragment-4">
<script>
$(document).ready(function(){
$('#map_canvas').gmap().bind('init', function(evt, map) {
$('#map_canvas').gmap('microformat', '.vevent', function(result, item, index) {
var clone = $(item).clone().addClass('ui-dialog-vevent');
clone.append('<div id="streetview{0}" class="streetview"></div>'.replace('{0}', index));
var lat = result.location[0].geo[0].latitude['value-title'];
var lng = result.location[0].geo[0].longitude['value-title'];
$('#map_canvas').gmap('addMarker', {
'bounds':true,
'position': new google.maps.LatLng(lat, lng),
'title': result.summary,
},
function(map, marker) {
$(item).find('.summary').click( function() {
$(marker).triggerEvent('click');
return false;
});
}).click(function() {
map.panTo( $(this).get(0).getPosition());
$(clone).dialog({
'modal': true,
'width': 530,
'title': result.summary,
'resizable': false,
'draggable': false
});
$('#map_canvas').gmap('displayStreetView', 'streetview{0}'.replace('{0}', index), {
'position': $(this).get(0).getPosition()
});
});
});
});
});
</script>
<div id="map_canvas">
</div>
</div>
Use pure JavaScript for this.
JQUERY is not the best choice in this case.
I have developed a huge API to overlay vector blueprints over Google Maps and I can tell you that even though it might be a bit more to type it is way better to just use JavaScript.
Do not over complicate things and as M1ke said always keep your console open when working with JavaScript.
Assuming that's your entire code it could be a number of things:
Have you got that script file on line 3 in the correct folder (check your console)
You're targeting #map_canvas but that element doesn't exist.
Having copied the script you need to pass options to the gmap() method or it throws an error.
Best thing would be to check your JavaScript console (Ctrl + Shift + J in Chrome, download Firebug if you're using Firefox) to see the error trace and fix from there.
Also including your script inside a div isn't necessary - the only use for giving the script awareness of a calling element would be if you were using document write, and as you're using jQuery I doubt this will become the case.