Oocharts - desperate call for assistance - javascript

I'm trying to use the Oocharts API to display my Google Analytics Data and everything I've been trying ends up in a white screen. Below is the code I'm using according to their site's examples:
<html>
<head>
</head>
<body>
<h3>With JS</h3>
<div id='chart'></div>
<h3>With HTML Attributes</h3>
<div data-oochart='bar' data-oochart-start-date='30d' data-oochart-metrics='ga:visits,Visits,ga:newVisits,New Visits' data-oochart-dimension='ga:continent' data-oochart-profile='ga:84157823'></div>
<script src='../oocharts.js'></script>
<script type="text/javascript">
window.onload = function(){
oo.setAPIKey("61a7a03dcab1487aa4ba3126f10e275f219d03c6");
oo.load(function(){
var bar = new oo.Bar("ga:84157823", "30d");
bar.addMetric("ga:visits", "Visits");
bar.addMetric("ga:newVisits", "New Visits");
bar.setDimension("ga:continent");
bar.draw('chart');
});
};
</script>
</body>
At the oo.setAPIKey() function I tried both Oocharts Mission Control's API key and the Google Analytics API Key (cause I wasn't so sure which one to use) with the same, empty, results.
Please give me an answer to what I'm doing wrong here cause I'm going crazy. Thank you in advance...

To anyone who might be interested:
At the oo.setAPIKey function you use the API key provided by the Oocharts Mission Control.
At the oo.Bar you use just the number of your profile id, not ga: and then the number.
And of course at the bar.draw('chart') you replace 'chart' with 'bar'.
Hope this will prevent someone (like me) from throwing his head to the wall ;)...

Related

How to resolve type name conflict from two separate Javascript libraries?

Let me start by saying that I'm primarily a C# programmer who only extremely rarely ventures into JavaScript.
I can write myself some JS code as long as its mostly plain. I can handle jQuery and the odd self-sufficient 3rd-party library, but couldn't code myself out of a wet paper bag when React, Angular, Bootstrap and others enter the scene. I'm also not used to using npm or any other similar package manager.
It was never really my job nor interest, so I never went there. Whenever I code some JS, I reference the required JS files in my <script> tags and then use them as directly as possible.
I'm currently creating a very simple proof of concept web app which will have its client parts rebuilt by competent people sooner or later. But in the mean time I have to provide the bare-bones functionality that will serve as a rough guideline for the next team to take over, whenever that might be.
I've picked two libraries that each seem easy to use and get the job done, when used separately. But when I try to use them together on the same page, I run into a problem: they both use the same name for their main type, and I can't seem to disambiguate between them.
These are the libraries:
JSON Editor
JSON Schema Form Builder
They both declare a type named JSONEditor, which I can use as long as I don't reference both of the libraries at once.
So far I've tried to solve this by using modules and import-ing the type using different names, but it didn't work... I got a bunch of errors in the console about "import not found" and "e is not defined", which makes me think I'm tackling this wrong.
How would I solve this using plain JS if possible?
UPDATE: As suggested, I'm providing a minimal example that demonstrates my use:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Page</title>
<link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="editor" style="width: 300px; height: 200px;"></div>
<div id="form"></div>
</div>
<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>
<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>
<script>
// Library 1: The JSON code editor.
var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
// Library 2: The form builder.
var form = new JSONEditor(document.getElementById("form"), {
ajax: true,
schema: {
$ref: "/api/describe/service/test"
}
});
</script>
</body>
</html>
If I comment out the use of one library (whichever), the other works as expected and the content is displayed at the respective target <div>. But if I try both at once, as shown above, nothing is displayed, and the following error is output to console:
Uncaught TypeError: t is undefined
This happens at the var editor = new JSONEditor line, which makes me think that the type from the second library overwrites the first and causes the problem.
This is understandable to me and isn't the issue per-se. The issue is that I don't know how to import the two JSONEditor types so that they can be referenced separately.
The maintainer of the code editor (JSON Editor, not JSON Schema Form Builder) has addressed and closed an issue about exactly this in the past: https://github.com/josdejong/jsoneditor/issues/270
His recommended solution is something like the following:
<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
var JSONEditorB = JSONEditor;
</script>
If you must use script tags this is probably the way to go.

How to use generated "Key" in google maps

Since from 2 months I am trying to implement google maps.But still am not done with it.
Question 1,Question 2,Question 3 were my previous doubts.
After a long research I got to know that:-
"Google accepts only 10 requests/sec.If it receives more, then it generates a status 'OVER QUERY LIMIT'.Solutions are to buy that API(not sure about it completely) OR Generate a key with Google Maps which will accept 25000 req/day(Suitable for my requirement)".
Now I have a key.The issue is "It's usage".
Code snippet:
1.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
This gives an alert:
"The provided Google API key is invalid or this site is not authorized to use it"
2.
<meta charset="UTF-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true?key=AIz************************************"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function () {
//The list of points to be connected
<?php
***********
Usage of sensor removes the alert but it still gives the status 'OVER QUERY LIMIT'.
As mentioned here I've tried editing the credentials and all but nothing works out.
Working fiddle
Kindly help me out in solving this. If possible give any direct steps, instead of so many links and indirect instruction/comments.
Thank you
I think I should stop using SO...
This answer is for the beginners like me.
1.No need of sensor in Google API V3
2.Use browser key like this - <script src="http://maps.google.com/maps/api/js?key=AIz************************************"></script>
3.In Edit allowed references under credentials give the complete path.
Explained in this Answer

JQuery AJAX $.post failure to return data

I am having difficulty with a specific JQuery $.post call to a PHP-based processor. I created a test page with the code below located here: http://goo.gl/Bg7H2u
Note this is located on a subdomain, but we are not doing cross-domain posting. Everything should be included on the subdomain.
There do not seem to be any JS errors as reported in the error console.
The processor /get-data.html is the general purpose PHP processor, and, if you load the processor page with the right value, it returns a dataset from the MySQL database in JSON format. We have this working on the main domain without issue, and other $.post calls seem to work OK from this subdomain (not to this /get-data.html processor, but other processors that process form content).
See the actual processor output here: http://goo.gl/yOzrm2
I must be missing something obvious, but I am coming up empty. Thoughts?
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=320px, initial-scale=1">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var prices;
$(document).ready(function(){
$.post( "/get-data.html", { table: 'prices' },
function( data ) {
prices = data;
alert(prices);
}, 'json');
});
</script>
</head>
<body>
<div style="overflow-x: hidden;" id="divMain">
</div>
</body>
</html>
Thanks for any advice you can provide.
If you do View Source on the processor output, you'll see that your script is returning:
<p>{"Basic Plan":["349"],"Basic":["349"],"Premium Plan":["549"],"Premium":["549"],"Standard Plan":["429"],"Standard":["429"],"Bonus Plan":["175"],"Additional Central AC System":["99"],"Additional central heating system":["99"],"Central Vacuum":["99"],"Whole home humidifier":["49"],"Pool (in-ground)":["179"],"Spa (in-ground)":["179"],"Septic System":["99"],"Sump Pump":["99"],"Well pump":["99"],"Whole home water softener":["99"],"Lawn sprinkler system (in-ground)":["99"],"Wine refrigerator":["49"],"Ice maker (free standing)":["49"],"Home phone (unlimited)":["49"],"TV Protection (Flat screen up to 60 inches)":["99"],"PC Protection (laptop or desktop)":["49"]}</p>
There's <p> at the beginning and </p> at the end. This is not valid JSON. You need to fix the server script so that it doesn't print anything other than the JSON (whitespace is OK, that's it).
1.confirm that /get-data.html is the correct relational url for your file location.
If you navigate directly to the /get-data.html, does it produce the results that you are after.
try running the same code without , 'json' and see if it works.
hope this helps

Cross Domain JavaScript Communication

Here's a situation. My customers would be having their own web pages. On that page they might have an iFrame in which they can show a page located on my server. Outside the iFrame they would have simple buttons, which when clicked should execute javascript functions in iFrame.
So basically the code of customer's web page on customer's domain would be something like this
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>
And code of myserver.com/some_html_page.htm would be
$("#TestButton").click(function(){
alert("Hi");
});
I did my reserach and I am aware of the Browser Security issues, but I want to know is there any way to handle this, may be with json or something ?
As you can already tell (given the parent and child are on different domains), you definitely cannot reach up from the child iFrame into the parent to listen for events.
One way around this is to pass messages between the pages. This will require your clients to include additional javascript in their page as well as the iFrame which points to your server. This is supported in native javascript with postMessage, but including the library #Mark Price suggests will make your life much easier.
So here goes an example:
Clients Page:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TestButton").click(function(){
jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
});
});
</script>
</head>
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>
Code on myserver.com/some_html_page.htm:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
// you will need to set this dynamically, perhaps by having your
// clients pass it into the URL of the iFrame,
// e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
var source_origin = "clients_page.com/index.html";
var messageHandler = function (data) {
// process 'data' to decide what action to take...
alert("Hi");
};
$.receiveMessage(messageHandler, source_origin);
</script>
</head>
Probably it would be nice to bundle the client code up into a single library that they could include, so your clients aren't burdened with writing their own javascript.
As a caveat, I wrote this code off the top of my head and it is likely be rife with typos. I have used this library before to accomplish similar goals, and I hope this answer is a useful jumping off point for you (along with the plugin documentation).
Let me know if I can clarify anything, and best of luck! :)
You could try this jquery plugin from Ben Alman, providing you can have the plugin running on both yours, and your clients servers - see the examples for ways to execute js cross domain :
http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html
Lets consider if you have a function called test() which loads under Iframe, then you can access that test() function as below
document.getElementsByName("name of iframe")[0].contentWindow.functionName()
e.g.
document.getElementsByName("iframe1")[0].contentWindow.test()
One of the common patterns of doing cross-domain requests, is using JSONP.

Check URL for page name

I have some code that someone wants to put on their site. Here is the code i received from them:
<script language="JavaScript" src="http://dm4.contactatonce.com/scripts/PopIn.js" type="text/javascript"></script>
<script language="JavaScript" src="http://dm4.contactatonce.com/PopInGenerator.aspx?MerchantId=44542&ProviderId=3176&PlacementId=0" type="text/javascript"> </script>
<script language="JavaScript">
popIn();
</script>
The way this particular site is set up I cannot pick and choose which page to display it on - it has to go in the <head> of every page. The problem is that i want it to NOT show up on only one particular page. THe page name is /CreditApplication.aspx. I know i need to add an if statement to check the URL but i'm not quite sure how to accomplish that with this particular code as it uses external javascript files.
Any help would be great appreciated!
Thanks!
EDIT: Thanks for all the answers! Let me clarify one thing: the reason i need this is because the page the code is going on is a secured (https) page. These js scripts are not using secured links so in some browsers it gives you an error saying "some content on this page may not be secure" or whatever. I am trying to make sure these don't run on only this page. That's why i need the conditional statement on them. Hope that helps.
How about
if (! /CreditApplication\.aspx$/.test(window.location.href) {
popIn();
}
Edit the regex as needed if the page can accept parameters.
Try this:
<script>
window.location.pathname !== '/CreditApplication.aspx' &&
document.write(unescape('%3Cscript src="http%3A//dm4.contactatonce.com/PopInGenerator.aspx%3FMerchantId%3D44542%26ProviderId%3D3176%26PlacementId%3D0%22%20type%3D%22text/javascript')) &&
document.write(unescape('%3Cscript src="http%3A//dm4.contactatonce.com/scripts/PopIn.js"%3E%3C/script%3E'));
</script>
I'm not completely sure I'm following your question, but if I am here is how to get started:
if(window.location.href.indexOf("/CreditApplication.aspx") === -1) {
popIn();
}

Categories

Resources