I am trying to feed the highcharts diagram with input data but face one problem. I get the data via json and then add them to data just like this:
function getGraphValues() {
period.deviceID = user.deviceID;
var postData = JSON.stringify(period);
var postArray = {json:postData};
$.ajax({
type: 'POST',
url: "getData.php",
data: postArray,
success: function(data)
{
data1 = JSON.parse(data);
if (data1.status == "ok" )
{
var stats = data1.metrics.split("/");
$(function () {
$('#container').highcharts(
{
chart: {type: 'bubble',zoomType: 'xy'},
title: {text: 'Highcharts Bubbles'},
series: [{data: [getData(stats)]}]
});});
}
else
{
alert("error");
}}
});}
function getData(stats)
{
var data;
var stats;
for (var j = 0; j < stats.length; j++)
{
data += "[" + j + "," + stats[j] + "," + stats[j]*8 + "],";
}
stats = data.split(",");
return stats;
}
So, in a way like this I do get the stats in this form:
[47,47,21],[20,12,4],[6,76,91],[38,30,60],[57,98,64],[61,17,80],[83,60,13],[67,78,75]
stored in string variable. My problem is that I can't pass this string for the data input as it waits number and not string.
How should I feed the data attribute in an accpetable way ?
How can I create an array of array in the getData function if this is needed ?
Thank you.
If I read your question right, you want getData to return a 2-dimensional array. I believe the following function does what you need:
function getData(stats) {
var result = [];
for (var j = 0; j < stats.length; j++) {
var data = [j, stats[j], stats[j]*8];
result.push(data);
}
return result;
}
And here's a jsFiddle demo.
Here is another example that uses the getData function defined above inside a highcharts bubble chart:
$(function () {
function getData(stats) {
var result = [];
for (var j = 0; j < stats.length; j++) {
var data = [j, stats[j], stats[j]*8];
result.push(data);
}
console.debug(result);
return result;
}
$('#container').highcharts({
chart: {type: 'bubble',zoomType: 'xy'},
title: {text: 'Highcharts Bubbles'},
series: [{data: getData([1,2,3])}]
});
});
And the corresponding jsFiddle demo.
Related
I'm working with a javascript library called slick grid to display a grid on a webpage. I need to send the grid information via ajax to a server. My problem is I need to used jquery notation to access the grid.
Here is the div grid:
<div id="myGrid" style="width:100%;height:300px;"></div>
Here is the javascript I'm using:
var grid;
$(function () {
for (var i = 0; i < 30; i++) {
data[i] = {
pbc_id: "00" + i,
task: "Task " + i,
due_date: "02/02/2017"
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.registerPlugin(new Slick.AutoTooltips());
// set keyboard focus on the grid
grid.getCanvasNode().focus();
var copyManager = new Slick.CellCopyManager();
grid.registerPlugin(copyManager);
copyManager.onPasteCells.subscribe(function (e, args) {
if (args.from.length !== 1 || args.to.length !== 1) {
throw "This implementation only supports single range copy and paste operations";
}
var from = args.from[0];
var to = args.to[0];
var val;
for (var i = 0; i <= from.toRow - from.fromRow; i++) {
for (var j = 0; j <= from.toCell - from.fromCell; j++) {
if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
val = data[from.fromRow + i][columns[from.fromCell + j].field];
data[to.fromRow + i][columns[to.fromCell + j].field] = val;
grid.invalidateRow(to.fromRow + i);
}
}
}
grid.render();
});
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
var column = args.column;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
})
var DocumentViewModel = function () {
var self = this;
self.sendGridData = function () {
var data = $("myGrid");
//TODO: access the grid data and convert the data to a json string
$.ajax({
async: true,
type: "POST",
dataType: "json",
url: '/MyService/SubmitRequest',
data: ,
success: function (response) {
alert("success");
},
error: function (xhr, textStatus, exceptionThrown) {
alert("error");
}
});
};
};
Any help would be greatly appreciated.
Edit: trying to access the grid variable where my todo is
I managed to recreate your problem above. Had to add some code to get the example to execute as is. It seems your main problem is that though the grid variable is declared in the global address space, iether the contents of DocumentViewModel cannot access it because everything inside DocumentViewModel is private to this function or perhaps your DocumentViewModel is executing before the other code is declared (more likely) however you've not shown how or WHEN you are triggering DocumentViewModel so I can't tell you for sure.
But by moving DocumentViewModel inside '$(function () {' finally the variable was found and the grid was accessible.
I'll paste my code below which includes yours plus the extra I added to get it to execute.
<html>
<head>
<h1>myGrid SO Question Test</h1>
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<style src="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"></style>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.editors.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.dataview.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellrangedecorator.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.autotooltips.js"></script>
<script src="http://mleibman.github.io/SlickGrid/plugins/slick.cellcopymanager.js"></script>
<script src="my.js"></script>
</head>
<body>
<div id="myGrid" style="width:100%;height:300px;"></div>
</body>
</html>
$(function () {
var grid;
// Addition Start
var columns = [{
id: "column",
name: "",
field: "column",
//selectable: false,
focusable: false
},
{
id: "data",
name: "Data",
field: "data"
}];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
// Addition End
var data = []; // Addition
for (var i = 0; i < 30; i++) {
data[i] = {
pbc_id: "00" + i,
task: "Task " + i,
due_date: "02/02/2017"
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
grid.setSelectionModel(new Slick.CellSelectionModel());
grid.registerPlugin(new Slick.AutoTooltips());
// set keyboard focus on the grid
grid.getCanvasNode().focus();
var copyManager = new Slick.CellCopyManager();
grid.registerPlugin(copyManager);
copyManager.onPasteCells.subscribe(function (e, args) {
if (args.from.length !== 1 || args.to.length !== 1) {
throw "This implementation only supports single range copy and paste operations";
}
var from = args.from[0];
var to = args.to[0];
var val;
for (var i = 0; i <= from.toRow - from.fromRow; i++) {
for (var j = 0; j <= from.toCell - from.fromCell; j++) {
if (i <= to.toRow - to.fromRow && j <= to.toCell - to.fromCell) {
val = data[from.fromRow + i][columns[from.fromCell + j].field];
data[to.fromRow + i][columns[to.fromCell + j].field] = val;
grid.invalidateRow(to.fromRow + i);
}
}
}
grid.render();
});
grid.onAddNewRow.subscribe(function (e, args) {
var item = args.item;
var column = args.column;
grid.invalidateRow(data.length);
data.push(item);
grid.updateRowCount();
grid.render();
});
// Move DocumentViewModel inside "$(function ()"
var DocumentViewModel = function () {
var self = this;
self.sendGridData = function () {
var data = $("myGrid");
//TODO: access the grid data and convert the data to a json string
var Data_Grid = grid.getData();
var myJsonString = JSON.stringify(Data_Grid);
// $.ajax({
// async: true,
// type: "POST",
// dataType: "json",
// url: '/MyService/SubmitRequest',
// data: ,
// success: function (response) {
// alert("success");
// },
// error: function (xhr, textStatus, exceptionThrown) {
// alert("error");
// }
// });
};
self.sendGridData(); // Addition Trigger our local function
};
// Addition : Trigger our function to prove we can access the grid's data
DocumentViewModel();
})
I am trying to dynamically populate the jquery chosen plugin both with "optgroup" and "option". I therefore have nested ajax requests and forloops:
$.ajax({
url: '#Html.Raw(Url.Action("GetCat", "MController"))',
data: { ID: metada },
success: function (data) {
var categories = data.split(",");
for (i = 0; i < categories.length; i++) {
$.ajax({
url: '#Html.Raw(Url.Action("GetCat", "MController"))',
data: { ID: cetada },
success: function (data) {
$("#picker").append("<optgroup label='" + categories[i] + "'>");
var subcategories = data.split(",");
for (i = 0; i < subcategories.length; i++) {
$("#picker").append("<option value='"+subcategories[i]+"'>" + subcategories[i] + "</option>")
}
$("#picker").append("</optgroup>");
}
});
}
$("#picker").trigger('chosen:updated');
}
});
Currently when I run the above the chosen select is empty and no options or optgroups are visible.
I think you need to use promises for this:
var promises = [];
for (var i = 0; i < categories.length; i++) {
promises.push(
(function(innerI){
return $.ajax({
url: '#Html.Raw(Url.Action("GetCat", "MController"))',
data: { ID: cetada },
success: function (data) {
var optgroup = $('<optgroup>').attr('label', categories[innerI]);
var subcategories = data.split(",");
for (var i = 0; i < subcategories.length; i++) {
var option = $('<option>').val(subcategories[i]).text(subcategories[i]);
optgroup.append(option);
}
$("#picker").append(optgroup);
}
});
})(i)); // unbind i to make closure work.
}
$.when.apply($, promises).then(function() {
$("#picker").trigger('chosen:updated');
});
UPDATE1:
I missed closures on first look, now th code is updated.
UPDATE2:
Rewrote working with tags inside success callback of ajax request.
UPDATE3:
Here is simple demo, I've commented some non-important code to show how it works.
I'm trying to make an XML based menu with JavaScript, XML and jQuery. I've been successful at getting the categories of the menu, but haven't been able to generate the items in the categories.
My script is as follows, and later in this thread, I've asked for suggestions for this code:
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function() {
$.ajax({
url: animalsXMLurl, // name of file you want to parse
dataType: "xml",
success: function parse(xmlResponse) {
var data = $("item", xmlResponse).map(function() {
return {
id: $("animal_id", this).text(),
title: $("animal_title", this).text(),
url: $("animal_url", this).text(),
category: $("animal_category", this).text().split('/'),
};
}).get();
var first_item = category_gen(data, 0);
$('ul.w-nav-list.level_2').append(first_item);
var categnumber = new Array();
for (i = 1; i <= data.length; i++) //for splitting id, and getting 0 for category_number (1 or 2 or 3...and so on)
{
categnumber[i] = data[i].id.split('_');
console.log(categnumber[i][0]);
for (j = 1; j <= data.length; j++) //appending via a function.
{
var data_text = category_or_animal(data, categnumber, j);
console.log(data_text);
$('ul.w-nav-list.level_2').append(data_text);
}
}
function category_or_animal(d, catg, k) {
var catg1 = new Array();
var catg2 = new Array();
var catg1 = d[k].id.split('_');
if (d[k - 1]) {
var catg2 = d[k - 1].id.split('_');
//if(d[k-1].id)
if (catg1[0] != catg2[0])
return category_gen(d, k);
} else
return '</ul>' + animal_gen(d, k);
}
function category_gen(d, z) {
var category_var = '<li class="w-nav-item level_2 has_sublevel"><a class="w-nav-anchor level_2" href="javascript:void(0);"><span class="w-nav-title">' + d[z].category + '</span><span class="w-nav-arrow"></span></a><ul class="w-nav-list level_3">';
return category_var;
}
function animal_gen(d, z) {
var animal_var = '<li class="w-nav-item level_3"><a class="w-nav-anchor level_3" href="animals/' + d[z].url + '"><span class="w-nav-title">' + d[z].title + '</span><span class="w-nav-arrow"></span></a></li>';
return animal_var;
}
}, error: function() {
console.log('Error: Animals info xml could not be loaded.');
}
});
});
Here's the JSFiddle link for the above code: http://jsfiddle.net/mohitk117/d7XmQ/4/
In the above code I need some alterations, with which I think the code might work, so I'm asking for suggestions:
Here's the function that's calling separate functions with arguments to generate the menu in above code:
function category_or_animal(d, catg, k) {
var catg1 = new Array();
var catg2 = new Array();
var catg1 = d[k].id.split('_');
if (d[k - 1]) {
var catg2 = d[k - 1].id.split('_');
//if(d[k-1].id)
if (catg1[0] != catg2[0])
return category_gen(d, k);
} else
return animal_gen(d, k) + '</ul>';
}
At the if(catg1[0] != catg2[0]) it checks if the split string 1_2 or 1_3 is equal to 1_1 or 1_2 respectively. By split, I mean the first element: 1 .... if you have a look at the xml: [ :: Animals XML :: ], you'll see that the animal_id is in the format of %category_number% _ %item_number% ... So I need to create the menu with CATEGORY > ITEM (item=animal name)
Now if I could return category_gen() + animal() with animal(){ in a for loop for all the matching category id numbers} then maybe this could be complete! But I don't of a count script for conditioning the for loop (i=0;i<=count();i++)...
Would anyone know of how to get this script functioning?
Hard to tell what the provided JSFiddle is trying to do.
This is my best stab at it. I used JQuery to parse the XML out into categories and generate lists of items.
http://jsfiddle.net/d7XmQ/8/
"use strict";
var animalsXMLurl = 'http://dl.dropboxusercontent.com/u/27854284/Stuff/Online/XML_animals.xml';
$(function () {
var $menu = $('#menu');
$.ajax({
url: animalsXMLurl, // name of file you want to parse
dataType: "xml",
success: handleResponse,
error: function () {
console.log('Error: Animals info xml could not be loaded.');
}
});
function handleResponse(xmlResponse) {
var $data = parseResponse(xmlResponse);
createMenu($data);
}
function parseResponse(xmlResponse) {
return $("item", xmlResponse).map(function () {
var $this = $(this);
return {
id: $this.find("animal_id").text(),
title: $this.find("animal_title").text(),
url: $this.find("animal_url").text(),
category: $this.find("animal_category").text()
};
});
}
function createMenu($data) {
var categories = {};
$data.each(function (i, dataItem) {
if (typeof categories[dataItem.category] === 'undefined') {
categories[dataItem.category] = [];
}
categories[dataItem.category].push(dataItem);
});
$.each(categories, function (category, categoryItems) {
var categoryItems = categories[category];
$menu.append($('<h2>').text(category));
$menu.append(createList(categoryItems));
});
}
function createList(categoryItems) {
var $list = $('<ul>');
$.each(categoryItems, function (i, dataItem) {
$list.append(createItem(dataItem));
});
return $list;
}
function createItem(dataItem) {
return $('<li>').text(dataItem.title);
}
});
You can solve this without using any for/while loop or forEach.
function myCounter(inputWords) {
return inputWords.reduce( (countWords, word) => {
countWords[word] = ++countWords[word] || 1;
return countWords;
}, {});
}
Hope it helps you!
In the code below, I assign a value to a variable from JSON with this var tag = data[j]['text']; and I output it with this console.log(tag); (for testing) which works.
I try to push the values into an array with tags.push(tag); but it WILL NOT WORK!
Why won't these values go into the array? I am just trying to get the contents of tag into an array...
function GetAvailableTags() {
var url = '/TextCodes/TextCodes?key=';
var tagGroups = [];
$('.ui-autocomplete-input').each(function () {
var key = $(this).attr('id');
var tags = [];
//console.log(key);
$.getJSON(url + key, function (data) {
for (var j = 0, len = data.length; j < len; j++) {
var tag = data[j]['text'];
console.log(tag);
tags.push(tag);
}
});
console.log(tags.length);
for (var k = 0, len = tags.length; k < len; k++) {
console.log(tags[k]);
}
});
}
Thanks for your help.
Because $.getJSON is an asynchronous function. It means that your code
console.log(tags.length);
for (var k = 0, len = tags.length; k < len; k++) {
console.log(tags[k]);
}
will be executed before the $.getJSON callback function :
function () {
var key = $(this).attr('id');
var tags = [];
//console.log(key);
$.getJSON(url + key, function (data) {
for (var j = 0, len = data.length; j < len; j++) {
var tag = data[j]['text'];
console.log(tag);
tags.push(tag);
}
}
It is why your variable seems to be empty when look into in your code above, but how it is possible that the data are printed with console.log(tag); in the callback function.
Update
Here is an example of using $.ajax method instead of $.getJSON to specify that the data must be retrieved synchronously using the parameter asynch : false
By that way, the server call response (success callback) is mandatory to continue the process. The disadvantage of this non-standard way is that your web page could be freezed waiting the server response. It is not the best elegant way to do that, but sometimes it is useful.
function GetAvailableTags() {
var url = '/TextCodes/TextCodes?key=';
var tagGroups = [];
$('.ui-autocomplete-input').each(function () {
var key = $(this).attr('id');
var tags = [];
//console.log(key);
$.ajax({
url: url + key,
type: 'POST',
asynch: false,//specify to stop JS execution waiting the server response
success: function (data) {
for (var j = 0, len = data.length; j < len; j++) {
var tag = data[j]['text'];
console.log(tag);
tags.push(tag);
}
},
error : function(jqXHR, textStatus, errorThrown) {
alert('an error occurred!');
}
});
console.log(tags.length);
for (var k = 0, len = tags.length; k < len; k++) {
console.log(tags[k]);
}
});
}
My solution is kind of long and stupid, but it works. Now, I can access the variables like an array textCodes['taxes']. sdespont's async note helped, too.
var textCodes = GenerateTextCodes();
console.log(textCodes);
function GenerateTextCodes() {
var arr = [];
$('.ui-autocomplete-input').each(function () {
var id = $(this).attr('id');
arr[id] = GetAvailableTags(id);
});
//console.log(arr['taxes']);
return arr;
}
// get all autocomplete element IDs and put them into an array
function GetAvailableTags(key) {
var url = '/TextCodes/TextCodes?key=';
var tags = [];
$.ajax({
url: url + key,
type: 'GET',
async: false,
success: function (data) {
//console.log(data[0].text);
//console.log(data.length);
for (var i = 0; i < data.length; i++) {
//console.log(data[i].text);
tags.push(data[i].text);
}
},
error: function (jqXHR, textStatus, errorThrown) {
alert('an error occurred!');
}
});
//console.log(tags);
return tags;
}
straight to the point
i have the following javascript and jquery code which update some checked rowsand do some stuff on each datatables row. here is my code:
function checkUpdate(){
setInterval(function(){
var listLength = updateList.length;
if(listLength > 0){
for(var r=0; r<listLength; r++){
// console.log(r)
var clID = updateList[r];
// console.log(clID)
var rRow = $('#dataTable tbody tr').find('td[data-clientid="'+clID+'"]').parent('tr');
// console.log(rRow)
var rRowIndex = rRow.index();
// console.log(rRowIndex)
var rRowDataIndex = oTable.fnGetPosition(rRow[0]);
console.log(rRowDataIndex)
$.ajax({
url: '/cgi-bin/if-Clients-list.jpl',
data: 'session=' + recievedSession + '&clientid=' + clID + '&outputformat=json',
dataType: 'json',
success: function(rowData){
// console.log(rowData)
var newRow = [];
var newOrderedRow = [];
console.log(rRowDataIndex)
newRow.push(rRowDataIndex+1, "");
for (var title in rowData[0]){
newRow.push(rowData[0][title]);
}
console.log(newRow)
},
});
};
}
},2000)
};
here is the problem:
after $.ajax() call, rRowDataIndex variable does not update or it updates but there is a problem in scopes and priorities that i couldn't understand
if i check 2 rows or more all the console.log(newRow)'s first elements will be the same
can anyone help me?
PS. i can nor present any code on web
thanks every body
You need to wrap the AJAX call in a closure to capture the value of rRowDataIndex each time through the loop.
function checkUpdate() {
setInterval(function () {
var listLength = updateList.length;
if (listLength > 0) {
for (var r = 0; r < listLength; r++) {
// console.log(r)
var clID = updateList[r];
// console.log(clID)
var rRow = $('#dataTable tbody tr').find('td[data-clientid="' + clID + '"]').parent('tr');
// console.log(rRow)
var rRowIndex = rRow.index();
// console.log(rRowIndex)
var rRowDataIndex = oTable.fnGetPosition(rRow[0]);
console.log(rRowDataIndex)
(function (rRowDataIndex) {
$.ajax({
url: '/cgi-bin/if-Clients-list.jpl',
data: 'session=' + recievedSession + '&clientid=' + clID + '&outputformat=json',
dataType: 'json',
success: function (rowData) {
// console.log(rowData)
var newRow = [];
var newOrderedRow = [];
console.log(rRowDataIndex)
newRow.push(rRowDataIndex + 1, "");
for (var title in rowData[0]) {
newRow.push(rowData[0][title]);
}
console.log(newRow)
},
});
})(rRowDataIndex);
};
}
}, 2000);
}