Related
I want to display "population" of various countries through the years in the same line chart. The data displayed is based on selections from a multi-select dropdown "Countries". Underlying Data Table has 3 columns:
Year, Country, Population
2012,countryA,33
2013,countryA,35
2014,countryA,40
2012,countryB,65
2013,countryB,70
2014,countryB,75
2012,countryC,15
2013,countryC,20
2014,countryC,25
I am trying to create a pivoted Data View from the underlying Data Table
The code I am using is:
function drawLineChart() {
var arr = $('#country').val();
var lineChartJson = $.ajax({
url: "../json/lineChart.json",
dataType: "json",
async: false
}).responseText;
var lineChartData = new google.visualization.DataTable(lineChartJson);
var view = new google.visualization.DataView(lineChartData);
var viewCols = [0];
for(var i = 0; i < arr.length; i++) {
var viewCols1 = [{
type: 'number',
label: arr[i],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[i]) ? dt.getValue(row, 2) : null;
}
}];
viewCols = viewCols.concat(viewCols1);
}
view.setColumns(viewCols);
var aggCols = [{
column: 1,
type: 'number',
label: view.getColumnLabel(1),
aggregation: google.visualization.data.sum
}];
for(var i = 2; i < 4; i++) {
var aggCols1 = [{
column: i,
type: 'number',
label: view.getColumnLabel(i),
aggregation: google.visualization.data.sum
}];
aggCols = aggCols.concat(aggCols1);
}
var pivotedData = google.visualization.data.group(view, [0], aggCols);
But this does not seem to work as expected and I just get 1 Line in the chart with values for all countries added up (although I can see the legend for 3 countries)
On the other hand if I set my View columns as below, it works as expected.
view.setColumns([0, {
type: 'number',
label: arr[0],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[0]) ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: arr[1],
calc: function (dt, row) {
// return values of C only for the rows where B = "bar"
return (dt.getValue(row, 1) == arr[1]) ? dt.getValue(row, 2) : null;
}
}, {
type: 'number',
label: arr[2],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[2]) ? dt.getValue(row, 2) : null;
}
}]);
What is going wrong in the loop? Is something wrong with "concat" in the loop where I am creating View Columns? I also saw the viewCols array by using console.log and it seems to have the right elements
I was trying to follow the below post:
Creating pivoted DataView from existing google charts DataTable object
the problem has to do with scope
arr[i] is undefined within calc: function (dt, row)
here is another way to pivot the data...
google.charts.load('current', {
callback: function () {
var arr = [
'countryA',
'countryB',
'countryC'
];
var lineChartData = google.visualization.arrayToDataTable([
['Year', 'Country', 'Population'],
[2012,'countryA',33],
[2013,'countryA',35],
[2014,'countryA',40],
[2012,'countryB',65],
[2013,'countryB',70],
[2014,'countryB',75],
[2012,'countryC',15],
[2013,'countryC',20],
[2014,'countryC',25]
]);
// sort by year
lineChartData.sort([{column: 0}]);
// get unique countries
var countryGroup = google.visualization.data.group(
lineChartData,
[1]
);
// build country data table
var countryData = new google.visualization.DataTable({
cols: [
{label: 'Year', type: 'number'},
]
});
// add column for each country
for (var i = 0; i < countryGroup.getNumberOfRows(); i++) {
countryData.addColumn(
{label: countryGroup.getValue(i, 0), type: 'number'}
);
}
// add row for each year / country
var rowYear;
var rowIndex;
for (var i = 0; i < lineChartData.getNumberOfRows(); i++) {
if (rowYear !== lineChartData.getValue(i, 0)) {
rowYear = lineChartData.getValue(i, 0);
rowIndex = countryData.addRow();
countryData.setValue(rowIndex, 0, rowYear);
}
for (var x = 1; x < countryData.getNumberOfColumns(); x++) {
if (countryData.getColumnLabel(x) === lineChartData.getValue(i, 1)) {
countryData.setValue(rowIndex, x, lineChartData.getValue(i, 2));
}
}
}
// draw agg table
new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'table-div',
dataTable: countryData
}).draw();
// draw line chart
new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart-div',
dataTable: countryData
}).draw();
},
packages: ['corechart', 'table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table-div"></div>
<div id="chart-div"></div>
I could figure out the problem with my code above.
"calc" is the callback function in loop. So only last value of loop variable "i" is visible within the loop.
Putting a wrapper function fixes it:
for(var i = 0; i <= arr.length; i++)(function(i) {
var viewCols1 = [{
type: 'number',
label: arr[i],
calc: function (dt, row) {
return (dt.getValue(row, 1) == arr[i]) ? dt.getValue(row, 2) : null;
}
}];
viewCols = viewCols.concat(viewCols1);
})(i);
I have requirement to be able to persist the filtered grid view for a session. I have done something like this. I am storing the filter value into cookie. But not being able to get the desired result.
modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
filters = this.p.postData.filters === undefined ? null : $.parseJSON(this.p.postData.filters);
console.log(document.cookie);
if(( filters===null) &&(document.cookie.length != 0)) {
var tempcookiearray = document.cookie.split(';');
if (tempcookiearray.length > 1) {
var temp = tempcookiearray[0];
var secondtemp = temp.split('=');
if (secondtemp[1] !== 'null') {
filters = secondtemp[1];
filters = $.parseJSON(filters);
}
}
}
if (filters && filters.rules !== undefined && filters.rules.length>0) {
var temp = filters.rules;
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
iCol = getColumnIndexByName.call(this, rule.field);
cmi = cm[iCol];
if (iCol >= 0 &&
((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
&& (rule.op === myDefaultSearch)) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt[0] === rule.op)) {
// make modifications only for the "contains" operation
parts = rule.data.split(separator);
if (parts.length > 1) {
if (filters.groups === undefined) {
filters.groups = [];
}
group = {
groupOp: "OR",
groups: [],
rules: []
};
filters.groups.push(group);
for (j = 0, l = parts.length; j < l; j++) {
str = parts[j];
if (str) {
// skip empty "", which exist in case of two separaters of once
group.rules.push({
data: parts[j],
op: rule.op,
field: rule.field
});
}
}
rules.splice(i, 1);
i--; // to skip i++
}
}
}
}
this.p.postData.filters = JSON.stringify(filters);
document.cookie = "cookie=" + this.p.postData.filters;
};
$.ajax({
method: "GET"
, url: "/Test/_vti_bin/ListData.svc/ProductList?$expand=Invoice"
, contentType: "application/json; charset=utf-8"
, dataType: "json"
, success: function (data, status) {
ParseData(data.d);
}
, error: function () {
//alert("WAT?!");
}
});
var ParseData = function (d) {
var newData = {
totalPages: 1
, currentPage: 1
, totalRows: d.results.length
, data: d.results
};
BuildTable(newData);
};
var BuildTable = function (d) {
$("#jqGrid").jqGrid({
data: d.data,
datatype: 'local',
colModel: [
{ label: "Title", name: 'Title' },
{ label: "Number", name: 'Number', align: 'center', key: true },
{ label: "Date", name: 'Date', align: 'center' },
{ label: "Descritption", name: 'Description', formatter: testformat },
{ label: "Category", name: 'Category'}
],
loadonce: true,
viewrecords: true,
autowidth: true,
shrinkToFit: false,
sortable: true,
sortname:"Title",
rowNum: '999',
rownumbers:true
});
setSearchSelect('Title');
setSearchSelect('Number');
setSearchSelect('EndDate');
setSearchSelect('Description');
setSearchSelect('Category');
function testformat(cellvalue, options, rowObject) {
return "<a href='http://www.google.com' target='_blank'>" + cellvalue + "</a>"
};
// activate the filterToolbar
$('#jqGrid').jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: true,
// defaultSearch: myDefaultSearch,
beforeClear: function () {
$(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
}).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
}).trigger('reloadGrid');
$('#jqGrid').jqGrid('setGridParam', {
beforeRequest: function () {
modifySearchingFilter.call(this, ",");
}
});
$('#jqGrid').jqGrid('setGridParam', {
loadComplete: function () {
$('.ui-jqgrid .ui-jqgrid-htable th').css('background-color', '#DCD796');
$('.ui-jqgrid tr.jqgrow:odd').css('background-color', '#FFFCED');
$('.ui-jqgrid .ui-jqgrid-bdiv').css('height', '500px');
$('.ui-multiselect-checkboxes LI').css('font-size', '1.2em');
}
}).trigger('reloadGrid');
};
enter code here
My program has three functions shown below,
var userId = req.userId;
var appId = req.body.appId;
var main = 'temp/' + userId + '/templates/' + appId + '/css/main.css';
var color = req.body.color;
var font = req.body.font;
var fontSize = req.body.fontSize;
replaceThemecolor(color);
replaceFont(font);
replaceFontSize(fontSize);
function replaceThemecolor(color) {
fs.readFile(main, 'utf-8', function (err, data) {
var regex =/(\.made-easy-themeColor\s*{[^}]*color\s*:\s*)([^\n;}]+)([\s*;}])/;
var result = data.replace(regex, "$1" + color + "$3");
console.log(color);
fs.writeFile(main, result, 'utf-8', function (err) {
if (err) return console.log(err);
});
});
}
function replaceFont(font) {
fs.readFile(main, 'utf-8', function (err, data) {
var regex =/(\.made-easy-themeFont\s*{[^}]*font-family\s*:\s*)([^\n;}]+)([\s*;}])/;
var result = data.replace(regex, "$1" + font + "$3");
console.log(font);
fs.writeFile(main, result, 'utf-8', function (err) {
if (err) return console.log(err);
});
console.log(result);
})
}
function replaceFontSize(fontSize) {
fs.readFile(main, 'utf-8', function (err, data) {
var regex =/(\.made-easy-themeFontSize\s*{[^}]*font-size\s*:\s*)([^\n;}]+)([\s*;}])/;
var result1 = data.replace(regex, "$1" + fontSize + "em" + "$3");
console.log(fontSize);
fs.writeFile(main, result1, 'utf-8', function (err) {
if (err) return console.log(err);
});
});
}
In here only the last function executes all the time, when I execute them seperately they work well, but the problem arise when all the funtions execute at once. Is it a problem with fs.writeFile function? I want to execute three of this functions together, is there a way to do this? All the functions here work well when they execute seperately.
Your file functions are async. You cannot run them at the same time because they will conflict and one will overwrite the changes of the other. You must run one, then when it finishes, run the other.
Or, even better, only read the file once, the process the data with all your changes, then write it once.
If you were going to run them sequentially, then you would need to pass a callback to each of your functions that is called when it is done so then you know when to start the next function.
But, I think a better solution is to pass an array of replace instructions and just process all of them on one read and write of the file. I will work on a code example for that.
Here's a way to do all the updates in one read/write of the file and uses promises to know when the operation is done:
function updateFile(filename, replacements) {
return new Promise(function(resolve, reject) {
fs.readFile(filename, 'utf-8', function(err, data) {
if (err) {
reject(err);
} else {
// now cycle through and do all the replacements
for (var i = 0; i < replacements.length; i++) {
data = data.replace(replacements[i].regex, replacements[i].replacer);
}
fs.writeFile(filename, data, 'utf-8', function(err) {
if (err) {
reject(err);
} else {
resolve();
}
});
}
});
});
}
updateFile(main, [{regex: /(\.made-easy-themeColor\s*{[^}]*color\s*:\s*)([^\n;}]+)([\s*;}])/, replacer: "$1" + color + "$3"},
{regex: /(\.made-easy-themeFont\s*{[^}]*font-family\s*:\s*)([^\n;}]+)([\s*;}])/, replacer: "$1" + font + "$3"},
{regex: /(\.made-easy-themeFontSize\s*{[^}]*font-size\s*:\s*)([^\n;}]+)([\s*;}])/, replacer: "$1" + fontSize + "em$3"}]).then(function() {
// update done successfully
}, function(err) {
// error
});
With some more work, you could probably abstract out just the keywords from the regular expressions too so you only need to pass in the keywords, but I'll leave that to another time.
And here's a simplified version:
function updateFile(filename, replacements) {
return new Promise(function(resolve, reject) {
fs.readFile(filename, 'utf-8', function(err, data) {
var regex, replaceStr;
if (err) {
reject(err);
} else {
// now cycle through and do all the replacements
for (var i = 0; i < replacements.length; i++) {
regex = new Regex("(\\" + replacements[i].rule + "\\s*{[^}]*" + replacements[i].target + "\\s*:\\s*)([^\\n;}]+)([\\s*;}])");
replaceStr = "$1" + replacements[i].replacer + "$3";
data = data.replace(regex, replaceStr);
}
fs.writeFile(filename, data, 'utf-8', function(err) {
if (err) {
reject(err);
} else {
resolve();
}
});
}
});
});
}
updateFile(main, [
{rule: ".made-easy-themeColor", target: "color", replacer: color},
{rule: ".made-easy-themeFont", target: "font-family", replacer: font},
{rule: ".made-easy-themeFontSize", target: "font-size", replacer: fontSize + "em"}
], function() {
// update done successfully
}, function(err) {
// error
});
And, you don't have to use the promise at all if you don't want to know when it's all done or be able to return errors (which I wouldn't recommend, but the code is simpler).
function updateFile(filename, replacements) {
fs.readFile(filename, 'utf-8', function(err, data) {
var regex, replaceStr;
if (err) { return; }
// now cycle through and do all the replacements
for (var i = 0; i < replacements.length; i++) {
regex = new Regex("(\\" + replacements[i].rule + "\\s*{[^}]*" + replacements[i].target + "\\s*:\\s*)([^\\n;}]+)([\\s*;}])");
replaceStr = "$1" + replacements[i].replacer + "$3";
data = data.replace(regex, replaceStr);
}
fs.writeFile(filename, data, 'utf-8');
});
}
updateFile(main, [
{rule: ".made-easy-themeColor", target: "color", replacer: color},
{rule: ".made-easy-themeFont", target: "font-family", replacer: font},
{rule: ".made-easy-themeFontSize", target: "font-size", replacer: fontSize + "em"}
], function() {
// update done successfully
}, function(err) {
// error
});
Notice how easy it would be to add more replacements. You simply add one more line to the array you pass updateFile().
Node.js is inherently asynchronous. As such, you're doing three read operations in quick succession, and then trying to write to a file that's already file locked, or at the very least, when it was read, did not contain the write changes. I'd use something more like async's series or waterfall methods to solve this.
var async = require("async");
var userId = req.userId;
var appId = req.body.appId;
var main = 'temp/' + userId + '/templates/' + appId + '/css/main.css';
var color = req.body.color;
var font = req.body.font;
var fontSize = req.body.fontSize;
async.series({
replaceThemecolor: function(callback) {
fs.readFile(main, 'utf-8', function(err, data) {
var regex = /(\.made-easy-themeColor\s*{[^}]*color\s*:\s*)([^\n;}]+)([\s*;}])/;
var result = data.replace(regex, "$1" + color + "$3");
console.log(color);
fs.writeFile(main, result, 'utf-8', function(err) {
callback(err);
});
});
},
replaceFont: function(callback) {
fs.readFile(main, 'utf-8', function(err, data) {
var regex = /(\.made-easy-themeFont\s*{[^}]*font-family\s*:\s*)([^\n;}]+)([\s*;}])/;
var result = data.replace(regex, "$1" + font + "$3");
console.log(font);
fs.writeFile(main, result, 'utf-8', function(err) {
callback(err);
});
})
},
replaceFontSize: function(callback) {
fs.readFile(main, 'utf-8', function(err, data) {
var regex = /(\.made-easy-themeFontSize\s*{[^}]*font-size\s*:\s*)([^\n;}]+)([\s*;}])/;
var result1 = data.replace(regex, "$1" + fontSize + "em" + "$3");
console.log(fontSize);
fs.writeFile(main, result1, 'utf-8', function(err) {
callback(err);
});
});
}
}, function(err, results) {
// results is empty, but now the operation is done.
});
How can I filter the content in my array controller with an array?
I know I can do this for multiple filters:
App.ItemsController = Ember.ArrayController.extend({
filter: function() {
var content = this.get("content");
return content.filter(function(data) {
return (data.get("foo1")) &&
(data.get("foo2")) &&
(data.get("foo3"));
});
}
});
or with just one:
return content.filterBy("foo1");
But if I wanted to filter with an array how would I do that?
I imagine something like this:
var array = ["foo1", "foo2", "foo3"];
return content.filterBy(array);
But this obviously doesn't work.
I ask because I use up to 20 filters and it would be helpful if I could do it with an array.
If there is an "ember way" to do this that would help me a lot.
I'm not sure if I understood you correctly, but I'll give a try:
var filters = ["a", "b", "c"];
var array = [{a: 1, b: 2, c: 3}, {a: 2, b: 3}]
var result = array.filter(function(item) {
var isPresent = true;
filters.forEach(function(filter) {
if (!Ember.isPresent(item[filter])) {
isPresent = false;
}
});
return isPresent;
});
or if you use underscore or lodash:
var filters = ["a", "b", "c"];
var array = [{a: 1, b: 2, c: 3}, {a: 2, b: 3}]
var result = array.filter(function(item) {
return _.all(filters, function(filter) {
return Ember.isPresent(item[filter]);
});
});
and similarly if you want to use it with Ember structures, you can change item[filter] to item.get(filter).
If your filters are more complex than simple check for properties, you could create an array of functions and then check if every item passes:
App.IndexRoute = Ember.Route.extend
model: ->
[
Em.Object.create
color: 'red'
isReallyRed: false
Em.Object.create
color: 'red'
Em.Object.create
color: 'red'
isReallyRed: true
]
App.IndexController = Em.ArrayController.extend
init: ->
#_super()
Em.run.next #, 'filterContent'
filters: [
(item) ->
item.get('color') is 'red'
, (item) ->
item.get('isReallyRed')
]
filterContent: ->
filters = #get 'filters'
result = #filter (item) ->
pass = true
filters.forEach (filter) ->
if pass
pass = filter item
pass
#set 'content', result
Demo.
I decided to take some inspiration from andrusieczko and Daniels answer to filter it by object instead of array.
App.ItemsController = Ember.ArrayController.extend({
filterlist: {},
filters: function() {
var self = this;
var content = this;
var filterlist = this.get("filterlist");
var allfilters = ["a", "b", "c"];
// set filterlist if any
allfilters.forEach(function(filter){
if ( self.get(filter) ) {
var value = self.get(filter);
filterlist[filter] = value;
}
});
// if equal or higher return y. else n.
function equal(item, key) {
var data = item.get(key);
var thefilter = self.get(key);
if ( data >= thefilter ) {
return "y";
} else {
return "n";
}
};
filter = content.filter(function(item) {
var pass = "";
if ( jQuery.isEmptyObject(filterlist) ) {
return true;
} else {
$.each(filterlist, function(key, value){
var pass2 = pass;
return pass = pass2 + equal(item, key);
});
if ( pass.indexOf("n") === -1 ) {
return pass;
}
}
});
return filter;
}
From my view menuitemdetails.js i'am calling options in app.js - itemDetails
My menuitemdetails.js
var MenuItemDetails = Backbone.View.extend({
render: function () {
var markup = '<div>' +
'<h1>' + this.options.name + '</h1>' +
'<p><span class="label">' + this.options.category + '</span></p>' +
'<img src="photos/' + this.options.imagepath + '" class="img-polaroid" />' +
'</div>';
this.$el.html(markup);
return this;
}
});
My app.js
var AppRouter = Backbone.Router.extend({
routes: {
"": "list",
"menu-items/new": "itemForm",
"menu-items/:item": "itemDetails"
},
list: function () {
$('#app').html('List screen');
},
itemDetails: function (item) {
var view = new MenuItemDetails(
{
name: item,
category: 'Entree',
imagepath: 'garden-salad.jpg'
}
);
$('#app').html(view.render().el);
},
itemForm: function () {
$('#app').html('New item form');
}
});
var app = new AppRouter();
$(function () {
Backbone.history.start();
});
Looking forward for an alternative of 'options' because from my view it is not working in backbone.js 1.1.2