Related
I have the following code which works just fine.
I'm just wondering if there's a more elegant/optimized way of doing so.
Long "code" short, given the data:
var myArray = [
['X', 'A', 0, 1, 'Y', 3],
['X', 'A', 4, 5, 'Y', 6],
['X', 'B', 6, 5, 'Y', 4],
['X', 'B', 3, 2, 'Y', 1],
['X', 'C', 7, 8, 'Y', 9],
];
Say I want to group by column index 1 and only sum column indexes 2, 3, 5.
Expected result is:
[
["A", 4, 6, 9],
["B", 9, 7, 5],
["C", 7, 8, 9]
]
// data
var myArray = [
['X', 'A', 0, 1, 'Y', 3],
['X', 'A', 4, 5, 'Y', 6],
['X', 'B', 6, 5, 'Y', 4],
['X', 'B', 3, 2, 'Y', 1],
['X', 'C', 7, 8, 'Y', 9],
];
// col that I want to group by
var colIndex = 1;
// cols I want to sum
var colsToSum = [2, 3, 5];
var arrayGroupBy = function(myArray, colIndex, colsToSum) {
// get unique column values
var uniqueValues = [];
myArray.forEach(function(row) {
if (uniqueValues.indexOf(row[colIndex]) === -1) {
uniqueValues.push(row[colIndex]);
}
});
var newData = [];
uniqueValues.forEach(function(value) {
// get filtered rows
var filteredRows = myArray.filter(function(row) {
return row[colIndex] === value;
});
var row = [value];
// columns to sum
colsToSum.forEach(function(num) {
if (filteredRows.length === 1) {
// push single row
row.push(filteredRows[0][num]);
} else {
// sum row cols
var total = filteredRows.reduce(function(sum, current) {
return sum + current[num];
}, 0);
row.push(total);
}
});
newData.push(row);
});
return newData;
};
console.log(arrayGroupBy(myArray, colIndex, colsToSum));
Unfortunately I can't use ES6 on this one...
Thanks!
I tried to find a solution for your question. There would be many good ES6 features which would make the solution a bit more readable/cleaner. But here is a solution without any ES6 features:
var groupBy = function(myArray, colIndex, colsToSum) {
var obj = {};
myArray.forEach(function(e) {
if(!obj.hasOwnProperty(e)) {
obj[e[colIndex]] = new Array(colsToSum.length + 1)
.join('0').split('').map(parseFloat);
}
});
myArray.forEach(function(row) {
for (var i = 0; i < colsToSum.length; i++) {
obj[row[colIndex]][i] += row[colsToSum[i]];
}
});
return Object.keys(obj).map(function(key) {
return [key].concat(obj[key]);
});
}
Explanation:
An object with the properties 'A', 'B' and 'C' will be created.
An array [0, 0, 0] will be assigned to each property.
Loop myArray and colsToSum and add the values to the right object property
Convert the object to an array and return it
Maybe there are better solutions :)
I am currently working for my school project and using Meteor with AngularJs 1 and ES6. In one of my views I try to update some live data (with AngularCharts) every second which are currently randomly generated. I am new to the way of how Meteor and ES6 works, so I think a have a pretty easy error.
This is my code of the class from the view:
class View2 {
constructor($interval, $scope) {
'ngInject';
this.cardRow = [
{name: 'Drilling Heat', color: 'white', value: 0},
{name: 'Drilling Speed', color: 'white', value: 0},
{name: 'Milling Heat', color: 'white', value: 0},
{name: 'Milling Speed', color: 'white', value: 0}
];
this.type = ['bar', 'line', 'pie', 'doughnut', 'radar'];
this.chartRow = [
{
name: 'Chart1',
type: 'bar',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: ['Series A'],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
datasetOverride: [{yAxisID: 'y-axis-1'}],
options: {
animation: false,
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
},
{
name: 'Chart2',
type: 'line',
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
series: ['Series A'],
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
datasetOverride: [{yAxisID: 'y-axis-1'}],
options: {
animation: false,
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
}]
}
}
}
];
$interval(this.update, 1000);
}
update() {
for (var i = 0; i < this.cardRow.length; i++) {
this.cardRow[i].value = Math.round((Math.random() * 10) * 10);
var value = this.cardRow[i].value;
switch (true) {
case (value > 80):
this.cardRow[i].color = 'red';
break;
case (value > 60):
this.cardRow[i].color = 'orange';
break;
case (value > 40):
this.cardRow[i].color = 'yellow';
break;
default:
this.cardRow[i].color = 'green';
break;
}
}
for (var y = 0; y < this.chartRow.length; y++) {
for (var z = 0; z < this.chartRow[y].data.length; z++) {
this.chartRow[y].data[z] = this.chartRow[y].data[z + 1];
}
this.chartRow[y].data[z - 1] = Math.round((Math.random() * 10) * 10);
}
}
}
The $interval should call the function "update" every second but then the variable is unknown. it throws an error like this:
TypeError: Cannot read property 'length' of undefined
at update (view2.js:74)
at callback (modules.js?hash=7db65c4…:46346)
at Scope.$eval (modules.js?hash=7db65c4…:51381)
at Scope.$digest (modules.js?hash=7db65c4…:51194)
at Scope.$apply (modules.js?hash=7db65c4…:51489)
at tick (modules.js?hash=7db65c4…:46336)
What can I do to solve this problem? And is there a way to use Meteor with the old Javascript Version?
I want to insert 3 value of radio button into Database using MVC.
User need to select one material for each categories(Walls,Roof,Floor)
Currently the user can only select one value (may need to do grouping).But when I do grouping only the structInfo value is inserted into database. I need all the 3 value inserted into database.
This is how the database design look like
the struct inf(walls,roof,floor) the materialinfo is (bricks.concrete,woods, etc)
So can I make all the 3 value choosed by user save into database?
This is my view
#foreach (var structIN in Model.structInfo)
{
if (structIN.structId.Equals(1))
{
#Html.Label(structIN.structNm) #:
foreach (var material in Model.materialInfo)
{
if (material.materialId.Equals(1) || material.materialId.Equals(2) || material.materialId.Equals(3))
{
#Html.RadioButtonFor(model => model.buildInfo.materialId, material.materialId)#Html.Label(material.materialNm)
#Html.HiddenFor(model => model.buildInfo.structId, new { Value = structIN.structId })
}
}
}
else if(structIN.structId.Equals(2))
{
<br />
#Html.Label(structIN.structNm) #:
foreach (var material2 in Model.materialInfo)
{
if (material2.materialId.Equals(2) || material2.materialId.Equals(4) || material2.materialId.Equals(5))
{
#Html.RadioButtonFor(model2 => model2.buildInfo.materialId, material2.materialId)#Html.Label(material2.materialNm)
#Html.HiddenFor(model2 => model2.buildInfo.structId, new { Value = structIN.structId })
}
}
}
else if (structIN.structId.Equals(3))
{
<br />
#Html.Label(structIN.structNm) #:
foreach (var material3 in Model.materialInfo)
{
if (material3.materialId.Equals(6) || material3.materialId.Equals(3))
{
#Html.RadioButtonFor(model3 => model3.buildInfo.materialId, material3.materialId) #Html.Label(material3.materialNm)
#Html.HiddenFor(model3 => model3.buildInfo.structId, new { Value = structIN.structId })
}
}
}
}
my GET method
[HttpGet]
public ActionResult RegisterForm()
{
PopulateStructMaterialData();
using (var dataBase = new TMXEntities())
{
var model = new RegisterInfoPA()
{
//OTHER CODES
};
return View(model);
}
}
Populating Data
private void PopulateStructMaterialData()
{
var list = new List<strucMaterial>
{
new strucMaterial{ifOthers = "", materialId = 1, materialNm = "Bricks", structId = 1, structNm = "Walls", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 2, materialNm = "Concrete", structId = 1, structNm = "Walls", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 3, materialNm = "Woods", structId = 1, structNm = "Walls", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 2, materialNm = "Concrete", structId = 2, structNm = "Roof", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 4, materialNm = "Tiles", structId = 2, structNm = "Roof", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 5, materialNm = "Zinc", structId = 2, structNm = "Roof", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 3, materialNm = "Woods", structId = 3, structNm = "Floor", insuranceReqId = 0, isSelected = false},
new strucMaterial{ifOthers = "", materialId = 6, materialNm = "Reinforced Concrete", structId = 3, structNm = "Floor", insuranceReqId = 0, isSelected = false},
};
ViewBag.populatebuilding = list;
}
In View
List<Insurance.ViewModels.strucMaterial> viewModelSM = ViewBag.populatebuilding;
for(int i=0; i<viewModelSM.Count; i++)
{
#Html.DisplayFor(m => viewModelSM[i].structNm)
#Html.HiddenFor(m => viewModelSM[i].structId)
#Html.CheckBoxFor(m => viewModelSM[i].isSelected)
#Html.HiddenFor(m => viewModelSM[i].materialId)
#Html.Label(viewModelSM[i].materialNm)
}
My POST method
[HttpPost]
public ActionResult RegisterForm(RegisterInfoPA viewmodel, List<strucMaterial> list)
{
using (var dataBase = new TMXEntities())
{
var model = new RegisterInfoPA()
{
//OTHER CODES
};
if (ModelState.IsValid)
{
//OTHER CODES
var register = viewmodel.reg;
var personalinfo = viewmodel.pinfo;
//Save Register
db.registers.Add(register);
db.SaveChanges();
//Retriving required Id's
var getid = register.registrationId;
var getRegTypeID = register.regisTypeId;
//SAVE PERSONAL INFO
personalinfo.registrationId = getid;
db.personalInfoes.Add(personalinfo);
db.SaveChanges();
//---HOW SHOULD I SAVE THE CHECKBOX HERE?-----------
**> tHIS IS MY CODE, BUT IT IS NOT WORKING**
foreach(var item in list) (<< error starts here)
{
buildingInfo.materialId = item.materialId;
buildingInfo.structId = item.structId;
buildingInfo.insuranceReqId = item.insuranceReqId;
db.buildingInfoes.Add(buildingInfo);
}
db.SaveChanges();
}
}
}
I am always getting this error
System.NullReferenceException: Object reference not set to an instance of an object.
How the proper code should look like? Thank you.
I need to add one vertical line in current year (x axis)
Configuration Options in my code follows.
var options = {
title: '*****',
curveType: 'function',
height: 300,
legend: { position: 'bottom' },
chartArea: {width: '80%'},
pointSize:5,
width: 500,
annotation: {
1: {
style: 'line'
}
}
}
Please note I have used annotation for this, but problem is a bit line alone visible. I need a line for full height .
My Full Code :
var options = {
title: 'Chart',
curveType: 'function',
height: 300,
legend: { position: 'bottom' },
chartArea: {width: '80%'},
pointSize:5,
annotation: { height: 300 }
},
chartData = JSON.parse(window._data.chartData), chartPoint = new Array(), i = 0, j = 0;
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Google');
data.addColumn('number', 'Yahoo');
data.addColumn({type: 'boolean', role: 'certainty'});
data.addColumn('number', 'Value');
data.addColumn({type: 'boolean', role: 'certainty'});
data.addColumn({type: 'string', role: 'annotation'});
if(Object.keys(chartData.myMap).length > 0) {
$.each(chartData.myMap, function(k, v) {
var val = Math.round(v * 100) / 100;
chartPoint[i] = new Array();
var cDate = new Date();
if(cDate.getFullYear()==k)
chartPoint[i] = [k, val, null, false, null, false,k];
else
chartPoint[i] = [k, val, null, false, null, false,null];
i++;
});
i--;
}
if(Object.keys(chartData.myDataMap).length > 0) {
$.each(chartData.myDataMap, function(k, v) {
var val = Math.round(v * 100) / 100;
var val1 = Math.round(chartData.averageMap[k] * 100) / 100;
if(j==0) {var l = val; j++; } else l = null;
chartPoint[i] = new Array();
chartPoint[i] = [k,l,val,false,val1, false, null];
i++;
});
}
data.addRows(chartPoint);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
It should be like in this page [http://jsfiddle.net/NC37X/][3]
I have three forks from your fiddle that might be along the lines of what you are looking for:
data.addRow(["G", ' ', 'Foo annotation', 8, 1, 0.5]);
http://jsfiddle.net/Balrog30/W2JWa/1/ -
Using annotations, but just placing a space makes nothing print, but still draws a line.
annotations: {
style: 'line',
textStyle: {
opacity: 0
}
}
http://jsfiddle.net/Balrog30/W2JWa/2/ -
Text is still in annotation, but text opacity set to 0 so that text is totally transparent.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// example copied from Google Visualization API playground,
// modified for category axis annotations
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow([{v: 0, f:"A"}, null, null, 1, 1, 0.5]);
data.addRow([{v: 1, f:"B"}, null, null, 2, 0.5, 1]);
data.addRow([{v: 2, f:"C"}, null, null, 4, 1, 0.5]);
data.addRow([{v: 3, f:"D"}, null, null, 8, 0.5, 1]);
data.addRow([{v: 4, f:"E"}, null, null, 7, 1, 0.5]);
data.addRow([{v: 5, f:"F"}, null, null, 7, 0.5, 1]);
data.addRow([{v: 6, f:"G"}, null, null, 8, 1, 0.5]);
data.addRow([{v: 7, f:"H"}, null, null, 4, 0.5, 1]);
data.addRow([{v: 8, f:"I"}, null, null, 2, 1, 0.5]);
data.addRow([{v: 9, f:"J"}, null, null, 3.5, 0.5, 1]);
data.addRow([{v: 10, f:"K"}, null, null, 3, 1, 0.5]);
data.addRow([{v: 11, f:"L"}, null, null, 3.5, 0.5, 1]);
data.addRow([{v: 12, f:"M"}, null, null, 1, 1, 0.5]);
data.addRow([{v: 13, f:"N"}, null, null, 1, 0.5, 1]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {
curveType: 'function',
width: 500,
hAxis: {
ticks: [{v:6, f:"G"}, {v:10, f:"K"}]
},
height: 400,
vAxis: {
maxValue: 10
},
annotations: {
style: 'line'
}
});
}
http://jsfiddle.net/Balrog30/W2JWa/3/ -
The third one changes the horizontal axis to a continuous type axis so that I can add ticks. This only works if your x-axis is numberic or date/time in nature. This also kind of messes up your axis labeling because the labeling is tied to the ticks, but I'm not really sure what you're trying to display, so it may or may not matter to you.
I am using a slightly modified reusable column chart script from https://gist.github.com/llad/3766585
Works great. However, I was just trying to add some tooltips on hover, that would display additional data from the JSON file for each column, but the additional data is not there. I look in the inspector and just see the two values used to calculate x and y. Is there something obvious in the way the script is written that is not binding the full data set?
The script:
function columnChart() {
var margin = {top: 30, right: 10, bottom: 50, left: 50},
width = 420,
height = 420,
xRoundBands = 0.2,
xValue = function(d) { return d[0]; },
yValue = function(d) { return d[1]; },
xScale = d3.scale.ordinal(),
yScale = d3.scale.linear(),
xFormat = '',
yFormat = '',
yAxis = d3.svg.axis().scale(yScale).orient("left"),
xAxis = d3.svg.axis().scale(xScale);
function chart(selection) {
selection.each(function(data) {
// Convert data to standard representation greedily;
// this is needed for nondeterministic accessors.
data = data.map(function(d, i) {
return [xValue.call(data, d, i), yValue.call(data, d, i)];
});
// Update the x-scale.
xScale
.domain(data.map(function(d) { return d[0];} ))
.rangeRoundBands([0, width - margin.left - margin.right], xRoundBands);
// Update the y-scale.
yScale
.domain(d3.extent(data.map(function(d) { return d[1];} )))
.range([height - margin.top - margin.bottom, 0])
.nice();
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);
// Otherwise, create the skeletal chart.
var gEnter = svg.enter().append("svg").append("g");
gEnter.append("g").attr("class", "bars");
gEnter.append("g").attr("class", "y axis");
gEnter.append("g").attr("class", "x axis");
gEnter.append("g").attr("class", "x axis zero");
// Update the outer dimensions.
svg .attr("width", width)
.attr("height", height);
// Update the inner dimensions.
var g = svg.select("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Update the bars.
var bar = svg.select(".bars").selectAll(".bar").data(data);
bar.enter().append("rect");
bar.exit().remove();
bar.attr("class", function(d, i) { return d[1] < 0 ? "bar negative" : "bar positive"; })
.attr("x", function(d) { return X(d); })
.attr("y", function(d, i) { return d[1] < 0 ? Y0() : Y(d); })
.attr("width", xScale.rangeBand())
.attr("height", function(d, i) { return Math.abs( Y(d) - Y0() ); })
.on("click", function(d, i)
{
d3.selectAll('.bar').classed('fade', true);
d3.select(this).classed("sel", true).classed("fade", false);
})
.on("mouseover", function(d, i)
{
d3.select(this).classed("hover", true);
})
.on("mouseout", function(d, i)
{
d3.select(this).classed("hover", false);
});
// x axis at the bottom of the chart
g.select(".x.axis")
.attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
.call(xAxis.orient("bottom").tickFormat(xFormat));
// zero line
g.select(".x.axis.zero")
.attr("transform", "translate(0," + Y0() + ")")
.call(xAxis.tickFormat("").tickSize(0));
// Update the y-axis.
g.select(".y.axis")
.call(yAxis);
// Horizontal grid
g.insert("g", ".bars")
.attr("class", "grid horizontal")
.call(d3.svg.axis().scale(yScale)
.orient("left")
.tickSize(-(width-margin.left-margin.right), 0, 0)
.tickFormat("")
);
});
}
// The x-accessor for the path generator; xScale ∘ xValue.
function X(d) {
return xScale(d[0]);
}
function Y0() {
return yScale(0);
}
// The x-accessor for the path generator; yScale ∘ yValue.
function Y(d) {
return yScale(d[1]);
}
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
return chart;
};
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.x = function(_) {
if (!arguments.length) return xValue;
xValue = _;
return chart;
};
chart.y = function(_) {
if (!arguments.length) return yValue;
yValue = _;
return chart;
};
chart.yTickFormat = function(_) {
if (!arguments.length) return yFormat;
yFormat = _;
return chart;
};
chart.xTickFormat = function(_) {
if (!arguments.length) return xFormat;
xFormat = _;
return chart;
};
return chart;
}
The initialization:
function renderGraph(view){
var chartWidth = mainWidth();
var chartHeight = 400;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var xFormat = d3.time.format("%b %e");
var data = [];
var req = $.ajax({
url: '/data/column-data.json',
type: 'GET',
dataType: 'json',
success: function(response) {
data = response;
}
});
$.when(req).done(function() {
d3.select("#columnChart")
.datum(data.widgets)
.call(columnChart()
.width(chartWidth)
.height(chartHeight)
.x(function(d, i) { return parseDate(d[0]); })
.xTickFormat(xFormat)
.y(function(d, i) {
var yData;
if (view === 'thisView'){
yData = d[1];
}else if (view === 'thatView'){
yData = d[2];
}
return yData;
}));
});
}
and the data looks like this:
{ "widgets" : [
["2013-09-15", 1, 66622, 1, 3],
["2013-09-16", 0, 0, 0, 0],
["2013-09-17", 2, 76316, 2, 2],
["2013-09-18", 4, 291244, 8, 12],
["2013-09-19", 1, 74674, 2, 2],
["2013-09-20", 5, 287965, 7, 5],
["2013-09-21", 0, 0, 0, 0],
["2013-09-22", 0, 0, 0, 0],
["2013-09-23", 7, 459249, 15, 22],
["2013-09-24", 2, 317320, 1, 6],
["2013-09-25", 3, 100269, 3, 10],
["2013-09-26", 4, 181080, 8, 4],
["2013-09-27", 1, 38056, 1, 1],
["2013-09-28", 0, 0, 0, 0],
["2013-09-29", 0, 0, 0, 0],
["2013-09-30", 3, 449334, 2, 13],
["2013-10-01", 9, 403929, 5, 15],
["2013-10-02", 4, 222512, 7, 12],
["2013-10-03", 1, 196012, 3, 9],
["2013-10-04", 2, 391716, 2, 8],
["2013-10-05", 0, 0, 0, 0],
["2013-10-06", 0, 0, 0, 0],
["2013-10-07", 4, 260312, 8, 14],
["2013-10-08", 1, 34350, 1, 1],
["2013-10-09", 3, 179067, 9, 18],
["2013-10-10", 2, 124250, 8, 19],
["2013-10-11", 2, 381186, 4, 9],
["2013-10-12", 0, 0, 0, 0],
["2013-10-13", 0, 0, 0, 0],
["2013-10-14", 5, 393400, 11, 17]
]
}
The tooltip should display the full data for any one column. The web inspector shows an array of 2 for each column (I'm expecting an array of 5)
How do I modify the script to bind the full data for each column?
Thanks!
UPDATE:
I still haven't solved this, though #adam-pearce got very close. I've put together a couple jsbin's to help.
A bin for the original script is here: http://jsbin.com/EjugosA/2/edit
and the script with Adam's answer is here: http://jsbin.com/IPoDutA/1/edit
this just has the following commented out:
//data = data.map(function(d, i) {
// return [xValue.call(data, d, i), yValue.call(data, d, i)];
//});
You can see in the second that both x and y axis fail to render, though the full data set I wanted is bound to each bar. The web inspector shows the following error:
'undefined' is not a function (evaluating 'd.getMonth()')" which points to line 8410 in d3.v3.js, in d3_time_formats.
How to I modify this script to get the full data without breaking the axis?
data = data.map(function(d, i) {
return [xValue.call(data, d, i), yValue.call(data, d, i)];
});
Removes everything but the first two columns from data. Looking over the code, I think it would still work if you commented out those three lines.
In responce to your comment:
// x axis at the bottom of the chart
g.select(".x.axis")
.attr("transform", "translate(0," + (height - margin.top - margin.bottom) + ")")
.call(xAxis.orient("bottom"));//.tickFormat(xFormat));
You're trying to print strings as dates which doesn't work without parsing the strings first.