I am using google chart for the first time now...
My requirement is to read xml content to form a chart..
I need to pass the xml file name so that it reads value from specific tag...Following is what I hve tried so far...But no success...
XML file:(FlowChart.xml)
<?xml version="1.0" encoding="utf-8" ?>
<Flow>
<Node>
<Id>AN001</Id>
<Type>Annc</Type>
<Description>Welcome msg</Description>
<Next>MN001</Next>
</Node>
<Node>
<Id>MN001</Id>
<Type>Menu</Type>
<Description>Language Selection</Description>
<Next>AN002</Next>
</Node>
</Flow>
Script:
google.load('visualization', '1', {packages:['orgchart']});
$(document).ready(function(){
$.ajax({
type: "GET",
url: "FlowChart.xml",
dataType: "xml",
success: xmlParser
});
});
function xmlParser(xml) {
$('#load').fadeOut();
$(xml).find("Node").each(function () {
title = $(this).find("Id").text();
alert('Hi');
});
}
google.setOnLoadCallback(drawChart);
I have used the same code without googleJSAPI and found the required result...
Please help on this...
Try this:
function xmlParser(xml) {
$('#load').fadeOut();
var id, type, description, next;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Id');
data.addColumn('string', 'Type');
data.addColumn('string', 'Description');
data.addColumn('string', 'Next');
// parse the XML
$(xml).find("Node").each(function () {
id = $(this).find("Id").text();
type = $(this).find("Type").text();
description = $(this).find("Description").text();
next = $(this).find("Next").text();
data.addRow([id, type, description, next]);
});
// do something with data
}
function drawChart() {
$.ajax({
type: "GET",
url: "FlowChart.xml",
dataType: "xml",
success: xmlParser
});
}
google.load('visualization', '1', {packages: ['orgchart'], callback: drawChart});
Related
I'm tyring to get a list of all the site collections that users have permissions to access. My plan is to display these on the home page, to make it easy for them to navigate to each of their sites. I've tried the following code, but nothing form my API call is writing the the console. It's just blank. What am I missing with writing to the console? Is the name siteURL wrong?
'''
$.ajax({
url: "/_api/search/query?querytext='contentclass:sts_site'",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var results = data.d.results;
var itemhtml = "";
$.each(results, function (index, dataRec) {
console.log(siteUrl);
});
},
error: function (data) {
(data);
}
})
'''
Here is a code snippet to get all site collection and print using Console.log:
<script src="https://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
//print sites info
searchSites(_spPageContextInfo.webAbsoluteUrl,
function(query){
var resultsCount = query.PrimaryQueryResult.RelevantResults.RowCount;
for(var i = 0; i < resultsCount;i++) {
var row = query.PrimaryQueryResult.RelevantResults.Table.Rows.results[i];
var siteUrl = row.Cells.results[6].Value;
console.log(JSON.stringify(siteUrl));
}
},
function(error){
console.log(JSON.stringify(error));
}
);
});
function searchSites(webUrl,success, failure) {
var url = webUrl + "/_api/search/query?querytext='contentclass:sts_site'";
$.ajax({
url: url,
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
success(data.d.query);
},
error: function (data) {
failure(data);
}
});
}
</script>
Reference:
What is the REST endpoint URL to get list of site collections?
I am working on a website that is intended to show some basic Google charts. The data comes from a text file that i retrieve through Ajax. It's got a x, y value and an annotation field. The data looks like this:
[[-0.8, -0.47, "100-005-10"],
[-0.7, -0.46, "100-005-9"],
[-0.6, -0.45, "100-005-8"],
[-0.5, -0.44, "100-005-7"]]
Here's my code:
<script >
var xmlhttp = new XMLHttpRequest();
var array;
xmlhttp.onreadystatechange = function() {
array = this.responseText;
};
xmlhttp.open("GET", "array.array", true);
xmlhttp.send();
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable($.parseJSON(array), true)
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn({type: 'string', role: 'annotation'});
data.addRow(array);
var options = {
legend: 'none',
colors: ['#087037'],
selectionMode: 'single',
tooltip: {trigger: 'selection'},
pointSize: 12,
animation: {
duration: 200,
easing: 'inAndOut',
}
};
var chart = new google.visualization.ScatterChart(document.getElementById('animatedshapes_div'));
chart.draw(data, options);
}
</script>
When i run the code, i get this error message:
Error: If argument is given to addRow, it must be an array, or null
I just don't know how to transform the plain text from the ajax response to an array.
try using JSON.parse to convert the string to an actual array...
data.addRows(JSON.parse(array));
In one of the case, need to add Square brackets []
self.tableValues.forEach((row: any) => {
if(row) {
dataTable.addRows([row]); // <-- row is array; so try [row]
}
});
I'm attempting to create a Google Charts Line Chart. The Json I'm returning from a C# MVC controller method looks as follows:
My JS code looks as follows:
function drawChart() {
var jsonData = $.ajax({
url: "/Misc/GetWeeklySalesData/",
dataType: "json",
async: false
}).responseText;
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
alert(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
chart.draw(data, { width: 400, height: 240 });
I'm getting the message 'Table has no columns' when clearly it does.
To create the data table directly from JSON, it must be in a specific format:
Format of the Constructor's JavaScript Literal data Parameter
Otherwise, you can create a blank data table and load the rows manually:
$.ajax({
url: "/Misc/GetWeeklySalesData/",
dataType: "json",
}).done(function (jsonData) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Week');
data.addColumn('number', 'Retail');
data.addColumn('number', 'Wholesale');
jsonData.forEach(function (row) {
data.addRow([
row.Week,
row.Retail,
row.Wholesale
]);
});
var chart = new google.visualization.LineChart(document.getElementById('chartDiv'));
chart.draw(data, {
width: 400,
height: 240
});
}).fail(function (jq, text, err) {
console.log(text + ' - ' + err);
});
Note: highly recommend not using --> async: false. Use the done callback instead...
I use by PhantomJs for connect to my WebService and Post data to WebService's Function for special computing. But i can't get result from WebService's Function.
bin.js:
var page = require('webpage').create();
var data = {
'str': 'sample string'
};
page.open('http://127.0.0.1/Service.asmx/HelloWorld', 'POST', data, function(status) {
// Get status
console.log('Status: ' + status);
// I want to get result
phantom.exit();
});
webService.asmx:
[WebMethod]
public string HelloWorld(string str)
{
return str;
}
I want something look like this in PhantomJs:
$.ajax({
type: "POST",
url: 'http://127.0.0.1/Service.asmx/HelloWorld',
data: {data: 'somethings'},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
var result= data.d;
}
});
var webPage = require('webpage');
var page = webPage.create();
var postBody = 'param1=value1¶m2=value2';
page.open('http:www.myservice.com/service', 'POST', postBody, function(status) {
console.log('Status: ' + status);
console.log('HTML Content: ' + page.content); // in case of an HTML response
console.log('JSON: ' + JSON.parse(page.plainText)); // in case of a JSON response
});
I solved my problem with search about "phantomjs in c#".
My solution is use of NReco.PhantomJS library in c#.
I am trying to implement a knockoutjs form to my django site. Im new to knockout so followed an example but for some reason when I submit the page refreshes with no errors but nothing gets committed to the api.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<form data-bind="submit: mySubmit">
<input data-bind="value: firstname" />
<input data-bind="value: lastname" />
<button type="submit">Go</button>
</form>
<script type="text/javascript">
var viewModel = {
mySubmit : function(formElement) {
var formData = {
'firstname' : $('#firstname').val(),
'lastname' : $('#lastname').val()
};
$.ajax({
url: "127.0.0.1:8000/api/test",
type: "POST",
data: formData,
datatype: "json",
processData:false,
contentType: "application/json; charset=utf-8",
success: function (result){
alert(result);
}
});
}
};
ko.applyBindings(viewModel);
</script>
you haven't declared observable's in viewModel . so consider declaring to make things go smooth .
viewModel:
var viewModel = {
firstname:ko.observable(),lastname:ko.observable(),
mySubmit : function(formElement) {
var formData = {
'firstname' : viewModel.firstname() ,
'lastname' : viewModel.lastname()
};
$.ajax({
url: '/echo/json/', //mocking ajax request
type: "POST",
data: formData,
contentType: "application/json; charset=utf-8",
success: function (result){
alert("success");
}
});
}
};
ko.applyBindings(viewModel);
Working sample here