Google Chart - Refresh Data from Google Sheet without Page Refresh - ajax

New to coding here and I have a WordPress page that displays a Google Chart with the source data coming from a Google Sheet where I'm trying to have the Google Chart redraw/refresh the data automatically without manually refreshing the entire web page.
Below is my current code which works to only refresh the data in the chart when a user manually refreshes the entire website.
I have read about AJAX and it seems this is the key but I haven't been able to tweek the Google Developer example code to solve my issue.
I hit a road block at ...
function drawChart() {
var jsonData = $.ajax({
url: "getData.php",
dataType: "json",
async: false
}).responseText;
where I do not know how to get my public google sheet URL to work in place of the "getData.php" part of the code snippet above. I do not know anything about php but saw examples where people reformatted their google sheet URL is lieu of using the php part to something like:
https://spreadsheets.google.com/feeds/list/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/1/public/basic?alt=json
but that still doesn't work for me. Feels like I'm going down a rabbit hole just trying to get the data using this approach when I already have a way to get the same data (tho without it automatically refreshing without manually reloading the entire website). Any help will be greatly appreciated!
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_1" style="width: 700px; height: 400px;"></div>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization1);
function drawVisualization1() {
var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var options = {
title : 'Sales ($) and Margin (%)',
titleTextStyle: {
fontSize: 16,
},
legend: {position: 'top', maxLines: 2},
pointSize: 7,
series: {
0: {type: 'bars', targetAxisIndex: 0},
1: {type: 'bars', targetAxisIndex: 0},
2: {type: 'bars', targetAxisIndex: 0},
3: {type: 'line', targetAxisIndex: 1},
},
vAxes: {
0: {title: 'Sales ($ in millions)'},
1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}},
hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
isStacked: 'True',
};
var data = response.getDataTable();
var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
chart.draw(data, options);
}
</script>

You can use setRefreshInterval(seconds) to call query.send() every few seconds.
query.setRefreshInterval(120);
query.send(handleQueryResponse1);

you don't need ajax, because you're using google.visualization.Query to get the data.
just need to structure you're code in such a way,
that you can refresh the data and chart,
without rebuilding everything.
see following working snippet,
the chart and options are created once.
the data is retrieved initially, and when the button is clicked.
after receiving the data, the chart is drawn.
I added the 'ready' event to the chart, just to prove the data was refreshed and the chart re-drawn.
but since the data doesn't actually change, nothing appears to happen.
google.charts.load('current', {
packages: ['corechart']
}).then(drawVisualization1);
function drawVisualization1() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_1'));
google.visualization.events.addListener(chart, 'ready', function () {
console.log('drawn');
});
var options = {
title : 'Sales ($) and Margin (%)',
titleTextStyle: {
fontSize: 16,
},
legend: {position: 'top', maxLines: 2},
pointSize: 7,
series: {
0: {type: 'bars', targetAxisIndex: 0},
1: {type: 'bars', targetAxisIndex: 0},
2: {type: 'bars', targetAxisIndex: 0},
3: {type: 'line', targetAxisIndex: 1},
},
vAxes: {
0: {title: 'Sales ($ in millions)'},
1: {title: 'Margin (%)', gridlines: {color: 'transparent'}, format:"#%"}
},
hAxis: {title: 'Fiscal Quarter', slantedText: 'True'},
isStacked: 'True',
};
getData();
document.getElementById('refresh').addEventListener('click', getData);
function getData() {
var query = new google.visualization.Query( 'https://docs.google.com/spreadsheets/d/1gwLrZtvDBSQPdXl_L1cOl_y2318yiVXKwgN2-czdgW0/gviz/tq?gid=0&headers=1&tq?&range=A1:E13');
query.send(handleQueryResponse1);
}
function handleQueryResponse1(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
chart.draw(data, options);
}
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<input id="refresh" type="button" value="Refresh" />
<div id="chart_1"></div>

Related

How to reformat labels chartisan

Heading
<script>
const chart = new Chartisan({
el: '#chart',
url: "#chart('sample_chart')",
hooks: new ChartisanHooks() //labels format
.datasets([{type: 'line', fill: false}, 'bar'])
.legend()
.colors()
.tooltip()
.title('Sample Chart'),
});
</script>
</body>
How can format labels to be vertical in Laravel chartisan? I suppose that this part of the code has to change, but I am not sure.
give this a try
const chart = new Chartisan({
el: '#chart',
url: "#chart('sample_chart')",
hooks: new ChartisanHooks()
.colors()
.responsive()
.beginAtZero()
.legend({ position: 'bottom' })
.datasets([{ type: 'line', fill: true }])
.custom(function ({ data, merge, server }) {
data.options.scales.yAxes = [{
ticks: {
callback: function(value, index, values) {
return '$' + value;
}
}
}]
return data
})
})
For more info visit this link:https://github.com/Chartisan/Chartisan/issues/7

Csv data could not be loaded in c3 chart

This is the javascript file which is added in html file.I Tried using all possible paths but still this is not working. Thanks in advance
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
url: 'data.csv',
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
},
axis: {rotated : true}
});
</script>

kendo customised TreeList manual adding childnode unexpected result

List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?

datamaps.js: Animate bubble remove after new data gets loaded

When we update new data on .bubbles([]) all the previous bubble disappears immediately. Can we make the bubble remain there for some time and then remove them from the map using jquery animation and also display a new bubbles at certain time periods?
Below is the code:
`
</head>
<body>
<div id="container" style="position: relative; width: 100%; height: 600px"></div>
</body>
<script type="text/javascript">
var bombMap = new Datamap({
element: document.getElementById('container'),
fills: {
'USA': '#1f77b4',
'RUS': '#9467bd',
'PRK': '#ff7f0e',
'PRC': '#2ca02c',
'IND': '#e377c2',
'GBR': '#8c564b',
'FRA': '#d62728',
'PAK': '#7f7f7f',
defaultFill: '#c1b9bb' //any hex, color name or rgb/rgba value
},
geographyConfig: {
highlightOnHover: false,
popupOnHover: false
},
scope: 'world',
data: {
'RUS': {fillKey: 'RUS'},
'PRK': {fillKey: 'PRK'},
'PRC': {fillKey: 'PRC'},
'IND': {fillKey: 'IND'},
'GBR': {fillKey: 'GBR'},
'FRA': {fillKey: 'FRA'},
'PAK': {fillKey: 'PAK'},
'USA': {fillKey: 'USA'}
},
bubbleConfig: {
borderWidth: 2,
borderColor: '#FFFFFF',
popupOnHover: false,
fillOpacity: 0.45,
highlightOnHover: true,
highlightFillColor: '#FC8D59',
highlightBorderColor: 'rgba(250, 15, 160, 0.2)',
highlightBorderWidth: 2,
highlightFillOpacity: 0.85,
}
});
var bombs = [{
name: 'Joe 4',
radius: 10,
yeild: 400,
country: 'USSR',
fillKey: 'RUS',
significance: 'First fusion weapon test by the USSR (not "staged")',
date: '1953-08-12',
latitude: 50.07,
longitude: 78.43
},{
name: 'RDS-37',
radius: 10,
yeild: 1600,
country: 'USSR',
fillKey: 'RUS',
significance: 'First "staged" thermonuclear weapon test by the USSR (deployable)',
date: '1955-11-22',
latitude: 50.07,
longitude: 78.43
},
];
var options = {
popupTemplate: function (geo, data) {
return ['<div class="hoverinfo">' + data.name,
'<br/>Payload: ' + data.yeild + ' kilotons',
'<br/>Country: ' + data.country + '',
'<br/>Date: ' + data.date + '',
'</div>'].join('');
}
};
bombMap.bubbles(bombs, options);
setInterval(function(){
console.log('removing elements');
bombMap.bubbles([{
name: 'Tsar Bomba',
radius: 10,
yeild: 50000,
country: 'USSR',
fillKey: 'RUS',
significance: 'Largest thermonuclear weapon ever tested—scaled down from its initial 100 Mt design by 50%',
date: '1961-10-31',
latitude: 73.482,
longitude: 54.5854
}]);
},3000);
</script>
Source: https://github.com/markmarkoh/datamaps
Yes, you should be able to do this by using d3 to select all the current circles (bubbles) that are on your datamap. You can then use a d3 transition to fade your circles to a fill-opacity of 0.0001 before loading your new array of bubbles.

Data binding issue with Kendo Widgets

I am using Kendo UI Library.
Trying to bind the data to Grid. But the grid is not getting populated with data.
I have referred required js libraries and styles as well.
<head>
Referred necessary Styles and Scripts are in order
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<div id="courses"></div>
<script type="text/javascript">
$(document).ready(function () {
var Courses = [
{Name: "Theory of computation", Credit: 10},
{Name: "Probability and Statistics", Credit: 20},
{Name: "Discrete Maths", Credit: 10},
{Name: "Modern Physics", Credit: 25},
{Name: "Management Information System", Credit: 15 },
{Name: "Game Theory", Credit: 5 }
];
var courseDataSource = new kendo.data.DataSource({datasource: Courses, PageSize: 5});
courseDataSource.read();
$("#courses").kendoGrid({
dataSource: courseDataSource,
columns : [
{ field: "Name", title: "Course Name"} ,
{ field: "Credit", title: "Credits" }
],
scrollable: false,
pageable : true
});
});
</script>
</body>
Could you please help me in fixing the code.
Please change datasource to data and PageSize to pageSize
var courseDataSource =
new kendo.data.DataSource({datasource: Courses, PageSize: 5});
The correct implementation is
var courseDataSource =
new kendo.data.DataSource({data: Courses, pageSize: 5});
Thanks.

Resources