This error only appears if I try to put two charts on the same page. Both charts work perfectly if they are the only one on the page. The minute I add the second only the first one loads and I get the "Missing Query for request id: 0" error.
Here is my js file for the chart:
function drawChart(title, queryPage, divToFill) {
var dataTab = null;
var query = new google.visualization.Query(queryPage);
var strSQL = "SELECT *";
query.setQuery(strSQL);
query.send(processInitalCall);
function processInitalCall(res) {
if(res.isError()) {
alert(res.getDetailedMessage());
} else {
dataTab = res.getDataTable();
// Draw chart with my DataTab
drawChart(dataTab);
}
}
function drawChart(dataTable) {
// Draw the chart
var options = {};
options['title'] = title;
options['backgroundColor'] = "#8D662F";
var colors = Array();
var x = 0;
if(currentCampaignId >= 0) {
while(x < dataTab.getNumberOfColumns() - 2) {
colors[x] = '#c3c1b1';
x++;
}
colors[x] = '#d2bc01';
}
else {
colors[0] = '#c3c1b1';
}
options['colors'] = colors;
options['hAxis'] = {title: "Week", titleColor: "white", textColor: "white"};
options['vAxis'] = {title: "Flow", titleColor: "white", textColor: "white", baselineColor: "#937d5f", gridColor: "#937d5f"};
options['titleColor'] = "white";
options['legend'] = "none";
options['lineWidth'] = 1;
options['pointSize'] = 3;
options['width'] = 600;
options['height'] = 300;
var line = new google.visualization.LineChart(document.getElementById(divToFill));
line.draw(dataTab, options);
}
}
Here is a snip from the index.php file:
<body>
<script type="text/javascript">
google.load('visualization', '1', {'packages': ['table', 'corechart']});
google.setOnLoadCallback(function(){
drawChart("Water", "waterData.php", "water");
drawChart("Air", "airData.php", "air");
});
</script>
<div id="water" style="text-align: center;"></div>
<div id="air" style="text-align: center;"></div>
</body>
It throws the error right at the query.send(processInitalCall); line, only on the second time it's called. Both the waterData.php and airData.php are identical except for the sig field. I did notice there was a field called reqId and it's set to 0.
Do I need to somehow change this reqId in these classes?
Probably too late, but for anyone interested...
When loading data from the data source, there will be a GET parameter in the request - tqx - with a value like: "reqId:0". You must return the same reqId in your response.
From the docs:
reqId - [Required in request; Data source must handle] A numeric
identifier for this request. This is used so that if a client sends
multiple requests before receiving a response, the data source can
identify the response with the proper request. Send this value back in
the response.
I don't have enough status in StackOverflow to write a comment, but this thread saved me an immense amount of time as well. THANK YOU
google visualization multiple charts with own data queries
Related
I'm trying to edit a script that was intended to send an email if column D is checked (true) but instead of sending an email, I now want it to send a chat. I've created a webhook for the chat group, and it is sort of working, but it's sending a message on EVERY edit made to the sheet.
I'm just a high school teacher way out of my depth here. If anyone can help me figure out how to fix the script, I'd be quite grateful.
When I associate my function with the on edit trigger it sends a chat for every action. If I use the on open trigger, it does nothing.
Screenshot of code
function myFunction() {
var WebWhooklink = "link to my group chat goes here"
var message = { text: "Student has returned"};
var payload = JSON.stringify(message);
var options = {
method: 'POST',
contentType: 'application/json',
payload: payload
};
var response = UrlFetchApp.fetch(WebWhooklink, options ).getContentText();
}
function onEdit() {
var s = SpreadsheetApp.getActiveSheet();
if( s.getName() == "Electronic Hall Pass" ) { //checks that we're on Sheet1 or not
var r = s.getActiveCell();
if( r.getColumn() == 1 ) { //checks that the cell being edited is in column A
var nextCell = r.offset(0, 1);
if( nextCell.getValue() === '' ) //checks if the adjacent cell is empty or not?
nextCell.setValue(new Date());
}
}
}
function onEdit2(e) {
if(e.value != "TRUE" ) return;
e.source.getActiveSheet().getRange(e.range.rowStart,e.range.columnStart+2).setValue(new Date());
}
You may try something like this that checks if the edit was made in Column D (the fourth column):
function onEdit(e){
if(e.range.getColumn()==4){
--> Put your function here
}
}
Thanks so much Martin! That fixed it!
function sendMailEdit(e){
if (e.range.columnStart != 4 || e.value != "TRUE") return;
let sName = e.source.getActiveSheet().getRange(e.range.rowStart,1).getValue();
var WebWhooklink = "webhook link to chat goes here"
var message = { text: "Student has returned"};
var payload = JSON.stringify(message);
var options = {
method: 'POST',
contentType: 'application/json',
payload: payload
};
var response = UrlFetchApp.fetch(WebWhooklink, options ).getContentText();
}
I am trying to show/echo users location on a webpage using maxmind geoip2 paid plan, I also want to show different images based on the state/city names output.
For example, if my webpage shows the user is from New York, I would like to show a simple picture of New York, if the script detects the user is from Washington, the image should load for Washington.
This is the snippet I have tried but doesn't work.
<script type="text/javascript">
if
$('span#region=("New York")') {
// Display your image for New York
document.write("<img src='./images/NY.jpg'>");
}
else {
document.write("<img src='./images/different.jpg'>");
}
</script>
This is the code in the header.
<script src="https://js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js" type="text/javascript"></script>
<script>
var onSuccess = function(geoipResponse) {
var cityElement = document.getElementById('city');
if (cityElement) {
cityElement.textContent = geoipResponse.city.names.en || 'Unknown city';
}
var countryElement = document.getElementById('country');
if (countryElement) {
countryElement.textContent = geoipResponse.country.names.en || 'Unknown country';
}
var regionElement = document.getElementById('region');
if (regionElement) {
regionElement.textContent = geoipResponse.most_specific_subdivision.names.en || 'Unknown region';
}
};
var onError = function(error) {
window.console.log("something went wrong: " + error.error)
};
var onLoad = function() {
geoip2.city(onSuccess, onError);
};
// Run the lookup when the document is loaded and parsed. You could
// also use something like $(document).ready(onLoad) if you use jQuery.
document.addEventListener('DOMContentLoaded', onLoad);
</script>
And this simple span shows the state name in body text of the Html when the page loads.
<span id="region"></span>
now the only issue is the image doesn't change based on users location, what am i doing wrong here?
Your example is missing some code, but it looks like you are running some code immediately and some code in a callback, a better way to do it is to have all the code in the callback:
// whitelist of valid image names
var validImages = ["NJ", "NY"];
// get the main image you want to replace
var mainImage = document.getElementById('mainImage');
if (mainImage) {
// ensure there is a subdivision detected, or load the default
if(geoipResponse.subdivisions[0].iso_code && validImages.includes( && geoipResponse.subdivisions[0].iso_code)){
mainImage.src = "./images/" + geoipResponse.subdivisions[0].iso_code + ".jpg";
} else {
mainImage.src = "./images/different.jpg";
}
}
Then just have the image you want to replace be:
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" id="mainImage" />
Notes:
If you are using a responsive image, make sure your transparent gif is the same ratio height of to width as your final image to avoid page reflows.
You will have to load the different.jpg in the onError callback as well.
My datatable appears to be fully functioning - the filtering and sorting of all my columns work, but I still get this error in my console: Uncaught TypeError: Cannot set property 'data' of null(…)
Here are the most important parts:
notifications_datatable.rb
class NotificationsDatatable
delegate :params, :h, :link_to, :content_tag, to: :#view
def initialize(view)
#view = view
end
def as_json(options = {})
{
draw: params[:draw].to_i,
recordsTotal: total_records,
recordsFiltered: notifications.total_entries,
data: data
}
end
index.html.slim
table#notifications.dataTable.table.table-hover.table-nomargin.dataTable-tools.table-bordered.dataTable-custom.display data-source="<%= notifications_url(format: 'json') %>"
thead
tr
th style="width: 94px;"
= t('.client_id')
th = t('.request_type')
th = t('.applicant_name')
th = t('.organisation')
th = t('.sent_at')
th data-orderable="false"
= t('.actions')
tbody
javascript:
$('#notifications').dataTable({
responsive: true,
PagingType: "full_numbers",
processing: true,
serverSide: true,
ajax: $('#notifications').data('data')
});
If I expand the TypeError in my console I see this javascript and the ajaxData part has a red curly line underneath.
else
{
// Object to extend the base settings
oSettings.jqXHR = $.ajax( $.extend( baseAjax, ajax ) );
// Restore for next time around
ajax.data = ajaxData;
Has anyone seen this before?
Try changing this line:
ajax: $('#notifications').data('data')
to:
ajax: $('#notifications').data('source')
Change:
ajax: $('#notifications').data('data')
To:
ajax: {
url: $('#notifications').data('source')
}
Just change this line in jquery.dataTables.js:
// Restore for next time around
ajax.data = ajaxData;
To:
if (ajax && ajaxData) {
// Restore for next time around
ajax.data = ajaxData;
}
I'm using Sharepoint 2013 CSR to disable columns in quick edit. I want to disable complete row or cell based on column value.
For example. If I have two requests whose status are pending there is one column
request status which is a choice-(pending/Approve) type where user can change that pending column to approve. Once it is approved the request status column should be disabled or entire row should be disabled. Can it be possible ?
I'm using below script but it disables complete column.
<script type="text/javascript">
var updateViewerFields=["Request Status","Request Id"];
(function updateView() {
var overrideContext = {};
overrideContext.Templates = overrideContext.Templates || {};
overrideContext.Templates.OnPreRender = function(ctx) {
for(j=0; j<ctx.ListSchema.Field.length; j++)
{
var f = ctx.ListSchema.Field[j];
for(i=0;i<updateViewerFields.length;i++){
if(f.DisplayName == updateViewerFields[i]){
f.AllowGridEditing=false;
}
}
}
}
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);
})();
</script>
I'm trying below script but no luck
overrideContext.Templates.OnPostRender = function(ctx) {
var rows = ctx.ListData.Row;
//console.log(rows);
for (var i=0;i<rows.length;i++)
{
var isApproved = rows[i]["Request_x0020_Status"] == "Approved";
if (isApproved)
{
//alert("Please confirm");
var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
var tr = document.getElementById(rowElementId);
//tr.style.backgroundColor = "#ada";
console.log(tr);
}
}
I am trying to create a list in CouchDB 0.11 which responds with some html, I am having problems getting CouchDB to set the correct header, whatever I try, I just get an application/json response header. Here is my list function.
function(head, req) {
var rows = [];
var row;
while(row = getRow()) {
rows.push(row);
}
rows.sort(function(a, b) {
return (Date.parse(a['value']['last_logtime']) - Date.parse(b['value']['last_logtime']));
});
provides("html", function() {
var content = "<html><head><title>foobar</title></head><body>";
for(var i in rows) {
content = content + rows[i]['value']['last_logtime']+"<br/>";
}
content = content + "</body></html>";
return content;
});
}
Any suggestions what I am doing wrong?
well actually figured it out myself.
the getRow() stuff needs to be inside the provides function :)