I need to display some JSON data vertically instead of horizontally:
Column1: Value1
Column2: Value2
and so on.
These values are coming from a database and I'll need the ability to scroll through the records being returned from the database.
This is for an MVC3 application using C#, and I'm open to whatever possible solutions are out there.
UPDATE:
While the below wasn't exactly what I needed, it put me on the right path to using a pivot table which I hadn't thought about previously.
If you want to use linq, You convert like this:
var pivotTable = from m in db.table
select new
{
Column1 = (from t1 in m
where t1.Field == "column1"
select t1.Value,
Column2 = (from t2 in m
where t2.Field == "column2"
select t2.Value
};
Json(pivotTable, JsonRequestBehavior.AllowGet)
First Look:
-----------------
Field | Value |
-----------------
column1 | 14 |
column2 | 34 |
column1 | 14 |
column2 | 36 |
column1 | 18 |
column2 | 34 |
After linq query
Column1 | Column2 |
-------------------
14 | 34 |
14 | 36 |
18 | 34 |
Related
I have this table
inventory
id | name | location | quantity
1 | test | loc1 | 0
2 | test | loc2 | 0
3 | test2 | loc1 | 0
4 | test2 | loc2 | 0
I want to update
test loc 1 with quantity 50
and
test2 loc2 with quantity 100
how do I it?
I have tried using INSERT ON DUPLICATE KEY UPDATE but it doesn't work it just creates new rows
here's the guide I used ITS ON #3
I'm using javascript (nodejs)
On my site I have a table with numerous numbers, and I'm doing simple math on them to find the best method for the user. The table looks something like this:
US locale
+-------+-------+------------+---------+----------------------------------------+
| Gain | Price | Price/Gain | Amount | Outcome (round(Price * Amount)) |
+-------+-------+------------+---------+----------------------------------------+
| 15.75 | 47 | 2.98 | 827,583 | 38,896,401 |
| 52.5 | 240 | 4.57 | 248,275 | 59,586,000 |
| 297.5 | 4,106 | 13.80 | 43,814 | 179,900,284 |
+-------+-------+------------+---------+----------------------------------------+
Here's how the table SHOULD look with the de-DE locale (notice the switching of the . and , characters)
+-------+-------+------------+---------+----------------------------------------+
| Gain | Price | Price/Gain | Amount | Outcome (round(Price * Amount)) |
+-------+-------+------------+---------+----------------------------------------+
| 15,75 | 47 | 2,98 | 827.583 | 38.896.401 |
| 52,5 | 240 | 4,57 | 248.275 | 59.586.000 |
| 297,5 | 4.106 | 13,80 | 43.814 | 179.900.284 |
+-------+-------+------------+---------+----------------------------------------+
The way my code works, each column is populated separately. So first, the Gain column is populated for all rows, formatted, and using jQuery, I changed the value of row n to the Gain. Then Price is calculated, and again the values are populated.
The issue arises when Price/Gain is calculated. For the US locale, everything is fine. But with the de-DE locale, the table actually ends up looking like this:
+-------+-------+------------+---------+----------------------------------------+
| Gain | Price | Price/Gain | Amount | Outcome (round(Price * Amount)) |
+-------+-------+------------+---------+----------------------------------------+
| 15,75 | 47 | 0,03 | 827.583 | 38.896.401 |
| 52,5 | 240 | 0,46 | 248.275 | 59.586.000 |
| 297,5 | 4.106 | 0,00 | 43.814 | 179.900 |
+-------+-------+------------+---------+----------------------------------------+
When the Price/Gain is being calculated, the , and . are being ignored from the Gain and Price columns. As you can see in the third row,
4.106 / 2975 = 0.0014 (rounded to 0.00, or 0,00)
This is also causing an issue with the Outcome, as the Price, again, is being parsed literally, rather than converted from de-DE to US first. So in the third row, again, we can see
4.106 * 43814 (this is parsed correctly for some reason) = 179,900 or 179.900
Here's how my code is publishing these values and reading them in when needed:
// This code populates the Gain field
var gain = grabPresetGain(); // grabs a hardcoded value from a JSON object
gain = addCommasToNumber(new Intl.NumberFormat("de-DE", {}).format(gain .toFixed(2)));
row += "<div class='col-lg-1 col-md-1 col-sm-1 col-xs-1 row-gain text-center'>" + gain + "</div>";
// This code populates the price field
outcome = addCommasToNumber(new Intl.NumberFormat("de-DE", {}).format(outcome));
$(this).children(".row-price").text(outcome);
// And finally this code populates the Price/Gain field
// for loop going through each row of the table
var gain = convertToNumber($(this).children(".row-gain").text());
var price = convertToNumber($(this).children(".row-price").text());
var pricePerGain = (price / gain);
pricePerGain = addCommasToNumber(new Intl.NumberFormat("de-DE", {minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(pricePerGain .toFixed(2)));
$(this).children(".row-pricegain").text(pricePerGain );
And here's two of the helper functions being used:
function convertToNumber(x) {
if (typeof x == "string") {
x = x.replace(/\,/g,'');
}
return Number(x);
}
function addCommasToNumber(n) {
return n.toLocaleString();
}
All in all - is there a consistent way to parse, manipulate, and output numbers of different locales?
Any insight would be great as I'm pretty stuck as to what to do at the moment.
Thanks
Give formatJS a try. From the site:
FormatJS is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.
If you're just dealing with numbers, you might even be able to get away without using a library at all, and just directly accessing the window.Intl object.
See some examples here, on MDN.
In an MVC application I joined multiple tables and returned it from Controller to View as shown below:
| EmployeeID | ControlID | DoorAddress | DoorID | DoorName |
------------------------------------------------------------
| 921 | 1 | 1 | 101 | Door 1 |
| 921 | 1 | 2 | 102 | Door 2 |
| 921 | 1 | 3 | 103 | Door 3 |
| 921 | 1 | 4 | 104 | Door 4 |
------------------------------------------------------------
Controller:
public ActionResult Edit(int? id)
{
// Create and execute raw SQL query.
string query = "SELECT a.EmployeeID, a.ControlID, a.DoorAddress, t.DoorID, t.DoorName FROM TEmpAccess AS a " +
"INNER JOIN TDoor AS t ON a.ControlID = t.ControlID and a.DoorAddress = t.DoorAddress where EmployeeID = " + id.ToString();
IEnumerable<EmpAccessViewModel> data = db.Database.SqlQuery<EmpAccessViewModel>(query);
return View(data.ToList());
}
I want to bind DoorName values (Door 1, Door 2, Door 3, Door 4) to a checkbox list and let the user to select them. After that, I want to pass corresponding EmployeeID, ControlID, DoorAddress, DoorID values of the the selected door to the Controller. For example if the user selects Door 1 and Door 3, then I will pass these values below to the Controller:
| EmployeeID | ControlID | DoorAddress | DoorID |
-------------------------------------------------
| 921 | 1 | 1 | 101 |
| 921 | 1 | 3 | 103 |
-------------------------------------------------
By using razor syntax or javascript in the view, how can I do this? Thanks in advance.
If you want a checkbox at the beginning of the Table in the view which is to be passed to the controller and each row is uniquely identified by the DoorID you could try something like this.
in View
<table>
#foreach (var item in Model)
{
<tr>
<td><input type="checkbox" value="#item.DoorID" name="doorid" /></td>
<td>#item.EmployeeID</td>
<td>#item.ControlID</td>
<td>#item.DoorName</td>
</tr>
}
</table>
In controller
public void ControllerName(int[] doorid)
{
foreach(var item in doorid)
//do something
}
I want to select data from a table, get the result in JavaScript and print it in a graph (x = date, y = numbers)
I have the following DATA table (note: I tried to put it in markdown so it appears as an HTML table, but it doesn't seems to work):
| date | number |
|---------|--------|
| 2015-01 | 12 |
| 2015-02 | 7 |
| 2015-04 | 4 |
and the following SQL select:
SELECT date_format(date, '%Y-%m') AS date, number
FROM DATA
WHERE date >= '2015-01' AND date <= '2015-05'
GROUP BY date
ORDER BY date;
which gives me exactly the same table as output. However, what I'd want is a row per each months with 0 if the month is not recorded. For instance, March is not recorded in the database, so the result that I want:
| date | number |
|---------|--------|
| 2015-01 | 12 |
| 2015-02 | 7 |
| 2015-03 | 0 |
| 2015-04 | 4 |
| 2015-05 | 0 |
the table goes to May, because in the SELECT I want every months between January and May.
The question is: is there a way to do it in SQL, or do I have to post-process the results in JavaScript to add the empty months in my final table?
thanks for your help
edit: the begin and end dates are variable and can cover several years. So, I guess it is possible to do something with a special table containing the months but I have no idea how...
If the answer is to post-process, it's OK (disappointing but OK ^^)
edit2: the problem is "gap filling" as stated #mauro. It looks quite complex in MySQL, so I'm going to post-process my request.
see How to fill date gaps in MySQL?
I would create a second table DATA2 with one row per month and number=zero. Then, instead of selecting:
FROM DATA
I would select from:
FROM ( SELECT * FROM DATA UNION ALL SELECT * FROM DATA2 ) D
This way... if DATA contains values for a given month, you will get totals from DATA, if not... you will get zero from DATA2
Here is a sample with no temp table. it use the sequence ENGINE. The only difference is you must fill the start date an the count of month (seq_0_to_4).
SELECT `DATE`, SUM(number) as number
FROM (
SELECT
date_format( IF(d.`DATE` IS NULL, init.`DATE`, d.`DATE`) ,'%Y-%m') AS `DATE`
, IF(d.number IS NULL,0,d.number) as number
FROM (
SELECT '2015-01-01' + INTERVAL seq MONTH AS `DATE`, 0 AS number
FROM seq_0_to_4
) AS INIT
LEFT JOIN DATA d ON date_format(d.`DATE`,'%Y-%m') = date_format( init.`DATE` ,'%Y-%m')
) AS result
GROUP BY `DATE`
ORDER BY `DATE`;
Result
+---------+--------+
| DATE | number |
+---------+--------+
| 2015-01 | 7 |
| 2015-02 | 0 |
| 2015-03 | 7 |
| 2015-04 | 0 |
| 2015-05 | 0 |
+---------+--------+
5 rows in set (0.00 sec)
Table
MariaDB > select * from data;
+------------+--------+
| date | number |
+------------+--------+
| 2015-01-01 | 4 |
| 2015-01-02 | 3 |
| 2015-03-05 | 7 |
+------------+--------+
3 rows in set (0.00 sec)
MariaDB >
How to collapse and expand the table based on multiple columns grouping.
For example I have table like this
---------------------------------------------------------------
location | size | cont_no | price | depot | cond |
---------------------------------------------------------------
USA | XX | 123 | 230 | SED | LK |
USA | YY | 343 | 330 | ASD | HK |
UAE | XX | 233 | 230 | SED | LK |
IND | ZZ | 123 | 230 | SAD | FK |
IND | XX | 213 | 430 | ASD | KK |
IND | YY | 433 | 870 | GFD | FK |
USA | YY | 865 | 230 | SED | LK |
UAE | XX | 976 | 430 | SED | HK |
USA | ZZ | 342 | 230 | CCD | HK |
UAE | XX | 132 | 445 | SED | KK |
UAE | ZZ | 064 | 323 | YYD | LK |
IND | YY | 452 | 130 | ITG | HK |
---------------------------------------------------------------
This is how I need to group the above table
-------------------------------
location | XX | YY | ZZ |
-------------------------------
UAE | 3 | 0 | 1 |
USA | 1 | 2 | 1 |
IND | 1 | 2 | 1 |
-------------------------------
I want to group based on location and size column, Eg: USA has 3 XX and 0 YY and 1 ZZ,
And then when i click the row i want to expand and show those 3 XX and 0 YY and 1 ZZ other four column cont_no, price, depot, cond
please someone help me or give me some suggestion or link for reference.
Thank you
I think this is what your trying to make !
check the following question and answer
DataTables hidden row details example - the table header is misplaced (test case attached)
JSFIDDLE Sample 1
JSFIDDLE Sample 2
It could be done as shown in Row details example.
The trick would be to pre-process the data and perform the calculations and grouping with JavaScript before giving data to DataTables. This would depend on where your data comes from, static table or Ajax request. If you're producing the data on the server, this could be done server-side as well.
Basically the result data in JSON format could be as shown below. This will simplify working with child rows in DataTables.
[
{
"location": "UAE",
"XX": 2,
"YY": 0,
"ZZ": 1,
"details": [
["UAE","XX","123","230","SED","LK"],
// more records for the same location
]
},
// more locations
]
you can hack your way through other libs. will it worth the effort??.
or you can use Tabulator. which has multi column grouping.
example :
//load data as json
var tableData = [
{id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
{id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
{id:3, name:"Christine Lobowski", age:"42", height:0, col:"green", dob:"22/05/1982", cheese:"true"},
{id:4, name:"Brendon Philips", age:"125", gender:"male", height:1, col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", gender:"female", height:5, col:"yellow", dob:"31/01/1999"},
{id:6, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
]
var table = new Tabulator("#example-table", {
height:"311px",
layout:"fitColumns",
groupBy:function(data){
return data.gender + " - " + data.age; //groups by data and age
},
autoColumns:true,
});
table.setData(tableData);
<script src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet"/>
<div id="example-table"></div>
the only table lib that can group by multi col is Tabulator, AFAIK.
here are the other table libs.
-------- group by -------
single column | multi column
tabulator : yes | yes
bootstrap-table : yes | no
datatables.net : yes | no
dynatable.js : no | no
tabulator has bootstrap , simple white theme:
theme overview : http://tabulator.info/docs/4.1/theme
live view themes : http://tabulator.info/examples/4.1?#theming
read more:
http://tabulator.info/docs/4.2/group
https://datatables.net/examples/advanced_init/row_grouping.html
https://examples.bootstrap-table.com/index.html#extensions/group-by-v2.html