javascript google visualization selection option - charts

I tried to use google spreadsheet to realize drop-down select option!
But I encounter some errors...
In console,it shows that...
**A Parser-blocking, cross-origin script, https://www.google.com/uds/?file=visualization&v=1&packages=corechart%2Cgeomap%2Ctable, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.**
**A Parser-blocking, cross-origin script, https://www.google.com/uds/api/visualization/1.0/b5ac9efed10eef460d14e653d0…zh_TW,default+zh_TW,ui+zh_TW,geomap+zh_TW,table+zh_TW,corechart+zh_TW.I.js, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity.**
I try the tips to fix it, but it can't fix...
Here is the code I have written
<html><head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type=text/javascript>
google.setOnLoadCallback(runQuery);
google.load('visualization', '1',
{
'packages':['corechart', 'table', 'geomap']
}
);function runQuery() {
var tableid = '1zCrjWMRxcedcvdWWAwtc9psQoK8GoGyxy8R53Ga_ztk#gid=0';
var uri = "SELECT geometry FROM " + tableid ;
var queryText = "https://spreadsheets.google.com/tq?key=" + encodeURIComponent(uri);
var query = new google.visualization.Query(queryText);
query.setQuery("select B");
var a = query.setQuery("select B,C,D ");
query.send(function(resp){
if (!resp.isError()) {
var dataTable = resp.getDataTable();
var jsonData = JSON.parse(dataTable.toJSON());
var len = jsonData.rows.length;
console.log(len);
alert(len);
}
});}</script></head><body></body></html>

1) the Parser-blocking message should be just a warning.
regardless, to avoid the message, use loader.js to load the library,
instead of the older library jsapi
you will need to change the load statement, as follows...
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {'packages':['corechart', 'table', 'geomap']});
google.charts.setOnLoadCallback(runQuery);
...
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
2) suspect there is another error occuring, check the response messages
see following working snippet, when i run it, the error is Access denied...
google.charts.load('current', {'packages':['corechart', 'table', 'geomap']});
google.charts.setOnLoadCallback(runQuery);
function runQuery() {
var tableid = '1zCrjWMRxcedcvdWWAwtc9psQoK8GoGyxy8R53Ga_ztk#gid=0';
var uri = "SELECT geometry FROM " + tableid ;
var queryText = "https://spreadsheets.google.com/tq?key=" + encodeURIComponent(uri);
var query = new google.visualization.Query(queryText);
query.setQuery("select B");
var a = query.setQuery("select B,C,D ");
query.send(function(resp){
if (!resp.isError()) {
var dataTable = resp.getDataTable();
var jsonData = JSON.parse(dataTable.toJSON());
var len = jsonData.rows.length;
console.log(len);
} else {
console.log('Error: ' + resp.getMessage() + '\nDetails: ' + resp.getDetailedMessage());
}
});}
<script src="https://www.gstatic.com/charts/loader.js"></script>

Related

Matomo script does not work after babelify

I want to use Matomo (Piwik) inside my website. But for some reason the Matomo code does not work properbly when using babelify.
This is the pure matomo.js file:
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//monitor.example.com/";
_paq.push(['setTrackerUrl', u+'piwik.php']);
_paq.push(['setSiteId', '2']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
console.log(s);
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
})();
And after babelify:
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
var _paq = _paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function () {
var u = "//monitor.example.com/";
_paq.push(['setTrackerUrl', u + 'piwik.php']);
_paq.push(['setSiteId', '2']);
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
console.log(s);
g.type = 'text/javascript';
g.async = true;
g.defer = true;
g.src = u + 'piwik.js';
s.parentNode.insertBefore(g, s);
})();
},{}]},{},[1]);
Using the babelify file ends up in not setting cookies as expected. If I use the vanilla matomo.js file, the cookies are set as expected.

What is the use of custom locators in Protractor?

I am new to protractor end to end testing tool. I want to know that,
What is the use of custom locators in Protractor?
When should we use them?
Any Example would be much appreciated?
I have searched in google but nothing more useful found, that can make some understanding about them.
I use custom locators when I can't use any other locator: id, name, repeater, binding, css etc.
For example I have ngClick attribute and I want to select element using that, this is my code:
var customlocators = function() {
by.addLocator('ngClick', function(toState,parentelement) {
var using = parentelement || document ;
var prefixes = ['ng-click'];
for (var p = 0; p < prefixes.length; ++p) {
var selector = '*[' + prefixes[p] + '="' + toState + '"]';
var inputs = using.querySelectorAll(selector);
if (inputs.length) {
return inputs;
}
}
});
}
module.exports = new customlocators();
Then I can use in tests like any other locator:
element(by.ngClick('addAuthentication()')).click();

jsTree customize <li> using the alternative JSON format along with AJAX

I am using the alternative JSON format along with AJAX to load data in tree. Now there is a new ask, I am required to add a new element at the end of <li> tag.
I have created sample URL to display what I am currently doing.
Tree crated using alternative JSON format along with AJAX
And how the new LI should appear
Tree created using hard coded HTML but shows how the LI should look like
I think I should be able to do this if I use HTML Data but since the project is already live with JSON format this would require me to change a lot so before I start making this major change I just wanted to check if this is possible using JSON and AJAX format or not.
So I got answer from Ivan - Answer
In short there is misc.js in the src folder which has question mark plugin, this is the best example of what I wanted to do.
I tweaked its code for my needs and here is the new code.
(function ($, undefined) {
"use strict";
var span = document.createElement('span');
span.className = 'glyphicons glyphicons-comments flip jstree-comment'
$.jstree.defaults.commenticon = $.noop;
$.jstree.plugins.commenticon = function (options, parent) {
this.bind = function () {
parent.bind.call(this);
};
this.teardown = function () {
if (this.settings.commenticon) {
this.element.find(".jstree-comment").remove();
}
parent.teardown.call(this);
};
this.redraw_node = function (obj, deep, callback, force_draw) {
var addCommentIcon = true;
var data = this.get_node(obj).data;
//....Code for deciding whether comment icon is needed or not based on "data"
var li = parent.redraw_node.call(this, obj, deep, callback, force_draw);
if (li && addCommentIcon) {
var tmp = span.cloneNode(true);
tmp.id = li.id + "_commenticon";
var $a = $("a", li);
$a.append(tmp);
}
return li;
};
};
})(jQuery);

Outputting rows from the pg module in Node / Postgres

In my Node app, I want to connect to a postgresql database to do some work on the entities. But I am having trouble getting it to work with Node. I have successfully connected and queried the database from a Python script with psycopg2, so I know that the connection part can work.
var DB_URL = "postgres://admin#localhost/mydb_development"
var db = new pg.Client(DB_URL);
db.connect();
.... more stuff here ....
app.get('/test', function(request, response) {
response.setHeader('Content-Type', 'text/plain');
response.write("First!\n");
var i = 0;
var query = db.query("SELECT table_name FROM information_schema.tables WHERE table_schema = 'public'", []);
query.on('row', function(row) {
console.log(row['table_name']);
i++;
response.write(String(row['table_name']) + "\n");
});
response.write("\nHello db; variable i=" + i + "!");
response.end();
});
I am finding that the console.log(row['table_name']) is successfully outputting the table names to the console. However, it looks like neither the response variable nor i are available inside the closure... then how the heck am I supposed to get the results of the query to do stuff with it?!
response variable is available but not writeable, as you already ended it.
i should also be available, but at the time you're writing it to the response, it has not been increased yet.
You probably wanted to end it (and to write the final line) after you've got all the rows. It could be achieved like this:
var DB_URL = "postgres://admin#localhost/mydb_development"
var db = new pg.Client(DB_URL);
db.connect();
.... more stuff here ....
app.get('/test', function(request, response) {
response.setHeader('Content-Type', 'text/plain');
response.write("First!\n");
var i = 0;
var query = db.query("SELECT table_name FROM information_schema.tables WHERE table_schema = 'public'", []);
query.on('row', function(row) {
console.log(row['table_name']);
i++;
response.write(String(row['table_name']) + "\n");
});
query.on('end', function () {
response.write("\nHello db; variable i=" + i + "!");
response.end();
});
});

Json.Net object passed to View in ViewData

I have a page in which I've implemented an ajax call to a controller that returns search results that are packaged in a JsonNetResult.
I have a lot of javascript to then deal with the return package, iterating over each item in the results set and outputting to the page.
Now, however, I need to implement the usage of these same methods for a single item that will be known on page load. I'd like to just pass this info to the View in a ViewData dictionary.
However, I don't know how to use Json.Net in this way.
How do I load a Json.Net object into a native json variable on page load, assuming that object has been stuffed into ViewData["DeepLinkedMessage"]?
I started to go down the path of this:
var thisMessage = (from userMessageProduct .... more linq2sql stuff...);
bool success = (thisMessage.Count() == 0) ? false : true;
var returnPackage = new { success = success, results = thisMessage };
JavaScriptSerializer serializer = new JavaScriptSerializer();
ViewData["DeepLinkedMessage"] = serializer.Serialize(returnPackage);
It worked just fine. But I quickly noticed I'd have to solve the date formatting problems that I'd already solved when I set up the ajax call that returned JsonNetResult. I want to use the exact same methods that I'm using now.
So, I started down this path:
JsonNetResult jsonNetResult = new JsonNetResult();
jsonNetResult.SerializerSettings.Converters.Add(new IsoDateTimeConverter());
jsonNetResult.Data = returnPackage;
ViewData["DeepLinkedMessage"] = jsonNetResult.ToString();
Then, in my view:
<script type="text/javascript">
deepLinkedMessageId = '<%=ViewData["DeepLinkMessageId"] %>';
deepLinkedMessageRaw = '<%=ViewData["DeepLinkedMessage"]%>';
</script>
But this is returning this:
<script type="text/javascript">
deepLinkedMessageId = '1';
deepLinkedMessageRaw = 'WebUI.Controllers.JsonNetResult';
</script>
While I'm looking for something like this:
<script type="text/javascript">
deepLinkedMessageId = '1';
deepLinkedMessageRaw = '{"success":true,"results":[{"UserId":1,"InternalId":"1356935180","FirstName":"Scott","LastName":"Roberson","MessageId":1,"MessageText":"i just love your product!!!", "MessageCreateTime":"\/Date(1295289549930)\/","ProductId":5,"Flavor":"Almonds","ActivePixel":false,"ActiveClass":null,"TileNumber":0}]}';
</script>
Help using Json.Net for this?
Thanks.
Well, I found out from here that I can just do this:
bool success = (thisMessage.Count() == 0) ? false : true;
var returnPackage = new { success = success, results = thisMessage };
ViewData["DeepLinkedMessage"] = JsonConvert.SerializeObject(returnPackage, new IsoDateTimeConverter());
<wipes hands> "problem solved!"
You should set your view to implement your model explicitely:
Inherits="System.Web.View<YourModelName>"
Then in your view you can do
Model.Property
I just find this easier to isolate where the problem is happening (plus viewdata can be a pain in the ass)