I'm using the bootstrap table plugin and can't seem to get it to load any values into the table. I've used it before with success, but can't figure out what I'm doing wrong here. The amount of rows is coming through, so I know the JSON data is being read by the bootstrap table, its just that the values are all empty in the table. I think the JSON is in the proper format, and the field names are all consistent. Any ideas?
Javacript
function populate_quote_table()
{
$('#quote_table').bootstrapTable({
onSearch: function (text) {
},
onLoadSuccess: function (data) {
console.log(data);
//$('#test').html(data);
},
url: "<?php echo $site_url?>/quotes.php",
striped: true,
search: true,
showRefresh:true,
showColumns:true,
pagination: true,
showFilter: true,
columns: [{
field: 'QID',
title: 'QID',
}, {
field: 'CID',
title: 'Customer ID',
}, {
field: 'Distance',
title: 'Distance',
}]
});
};
});
PHP
$i = 0;
$quotes[] = array();
if ($result) {
while($row = mysql_fetch_array($result)) {
$quotes[$i]['"QID"'] = $row['quote_id'];
$quotes[$i]['"CID"'] = $row['customer_id'];
$quotes[$i]['"Distance"'] = $row['distance'];
$i++;
}
}
echo json_encode($quotes);
JSON Output
[
{
"QID": "1",
"CID": "1",
"Distance": "1"
},
{
"QID": "2",
"CID": "2",
"Distance": "11"
},
{
"QID": "3",
"CID": "20",
"Distance": "5"
},
{
"QID": "4",
"CID": "21",
"Distance": "67"
}
]
Extra quotes were not needed
Original -
$quotes[$i]['"QID"'] = $row['quote_id'];
Working -
$quotes[$i]['QID'] = $row['quote_id'];
Related
I have a json object for chart like below:
{
"results": [
{
"dataSets": {
"One": {
"label": "testLabel",
"labels": "test",
"data": [
"10",
"58"
]
}
},
"chart": [
{
"key": "test",
"label": "chart-1",
"chartType": "bar",
"order": "1",
"dataSets": [
{
"style": "line",
"key": "One"
},
]
}
]
}
]
}
I want to get dataSets values like label, labels, data of “one” in chart’s dataSets by providing “one” as key.
Is it possible to do in javascript or vue?
Yes, it is possible. But you will need to make a series of Array.map() to achieve this.
const results = [{
dataSets: {
One: {
label: "testLabel",
labels: "test",
data: ["10", "58"]
}
},
chart: [{
key: "test",
label: "chart-1",
chartType: "bar",
order: "1",
dataSets: [{
style: "line",
key: "One"
}]
}]
}];
const modifiedResult = results.map(result => {
const outerDataSets = result.dataSets;
result.chart = result.chart.map(chart =>
chart.dataSets.map(innerDataSet => ({
...innerDataSet,
...outerDataSets[innerDataSet.key]
}))
);
return result;
});
console.log(modifiedResult);
Also if you are working with Vue, I think its best to put the modification of result on the computed so it will always try to add those dataSets additional data to the chart's dataSets.
Here a sample demo for implementation in Vue.
I have successfully implemented code for a JSONP request, retrieving data for multiple countries and displaying them as lines in a chart.
However, I would need to get the title, units, copyright etc. from the JSON as well, to be able to display that elements on the graph too.
Now, I wonder how this could be done.
The JSON response could look like this:
[
[
"series",
[
{
"data": [
[
2007,
2239300
],
[
2008,
2237490
],
[
2009,
2167070
],
[
2010,
2204450
]
],
"name": "France"
},
{
"data": [
[
2007,
2324234
],
[
2008,
3456352
],
[
2009,
1241422
],
[
2010,
4543231
]
],
"name": "Germany"
}
]
],
[
"title",
{
"text": "Title here"
}
],
[
"yAxis",
{
"text": "The units here"
}
]
]
My client's code would need to be changed then. For the moment it looks like this:
$.getJSON(url, {selectedCountries: "France,Germany,Switzerland", type: "jsonp"})
.done(function(data)
{
options.series = data;
var chart = new Highcharts.Chart(options);
})
.fail(function(jqxhr, textStatus, error)
{
var err = textStatus + ", " + error;
console.log( "Request Failed: " + err );
})
And I guess it must turn into something like this:
options.series = data['series']['data'];
options.title = data['title'];
But that doesn't work. Could anyone give me a hint what I should do? Thanks a lot!
Ok, got it going finally. One has to pass the JSON as an object (and not an array, and neither as string (so, no quotes like ' or " around the object!). Works like a charm here on fiddle.
Here the code:
$(function () {
var options = {
chart: {
renderTo: 'container',
type: 'spline',
marginBottom: 50
},
series: [{}]
};
data = {
"title": {
"text": "Here goes the title"
},
"yAxis": {
"title": {
"text": "Here go the units"
}
},
"series": [{
"name": "France",
"data": [[2006,2189260],[2007,2239300],[2008,2237490],[2009,2167070],[2010,2204450]]
}]
};
options.series = data["series"];
options.title = data["title"];
options.yAxis = data["yAxis"];
var chart = new Highcharts.Chart(options);
});
Thanks a lot for Sebastian Bochan's great support!
Help anyone, I need to use JSON data in my store. Can someone point what is wrong in my jsonstore config? I need to use the rain_value and air_pressure parameter in my graph but 'data' in JSON wont be set as root.
My device model:
Ext.define('device', {
extend: 'Ext.data.Model',
config: {
fields : [
{
name : 'dev_id',
type : 'int'
},
{
name : 'location'
}
],
hasMany : [
{
model : 'stationData',
name : 'data',
associationKey : 'data'
},
]
}
});
My deviceData model:
Ext.define('stationData', {
extend : 'Ext.data.Model',
config : {
fields : [
'dateTimeRead',
'rain_value',
'air_pressure'
]
}});
My jsonStore:
var store = new Ext.data.Store({
autoLoad : true,
model : 'device',
proxy : {
type : 'ajax',
url : 'dataURL',
reader: {
type: 'json',
root: 'data'
},
}
});
JSON Data:
[{
"dev_id": 171,
"location": "Sample location",
"province": "Sample Province",
"cell_num": "0123456789",
"posx": "longitude",
"posy": "latitude",
"elevation": "105",
"battery": "LP",
"region": "VI",
"type_id": "AWS",
"imei_num": "300234011463010",
"is_ftp": false,
"data": [{
"dateTimeRead": "2013-11-14 11:45:32",
"rain_value": "0.52",
"rain_intensity": "19.3",
"air_pressure": "1002.02",
"wind_speed": "7.9",
"air_humidity": "76.7",
"solar_radiation": "-305363.70",
"wind_direction": "327",
"air_temperature": "29.2",
"rain_cum": "238.07",
"soil_moisture1": "8.88",
"soil_temperature1": "28.7",
"soil_moisture2": "6.37",
"soil_temperature2": "27.6",
"rain_duration": "180",
"wind_speed_max": "14.1",
"sunshine_count": "0",
"sunshine_cum": "19286",
"wind_direction_max": "18"
}, {
"dateTimeRead": "2013-11-14 11:30:32",
"rain_value": "0.00",
"rain_intensity": "0.0",
"air_pressure": "1002.02",
"wind_speed": "8.9",
"air_humidity": "68.6",
"solar_radiation": "-239488.50",
"wind_direction": "322",
"air_temperature": "30.2",
"rain_cum": "237.55",
"soil_moisture1": "8.91",
"soil_temperature1": "28.5",
"soil_moisture2": "6.72",
"soil_temperature2": "27.6",
"rain_duration": "0",
"wind_speed_max": "15.1",
"sunshine_count": "455",
"sunshine_cum": "19286",
"wind_direction_max": "10"
}, {
"dateTimeRead": "2013-11-14 11:15:32",
"rain_value": "0.00",
"rain_intensity": "0.0",
"air_pressure": "1002.02",
"wind_speed": "10.2",
"air_humidity": "67.8",
"solar_radiation": "251642.70",
"wind_direction": "333",
"air_temperature": "31.0",
"rain_cum": "237.55",
"soil_moisture1": "8.90",
"soil_temperature1": "28.4",
"soil_moisture2": "7.01",
"soil_temperature2": "27.6",
"rain_duration": "0",
"wind_speed_max": "18.3",
"sunshine_count": "900",
"sunshine_cum": "18831",
"wind_direction_max": "9"
}]
}]
I have the following JSON:
{
"wrapper": {
"table": {
"rows": [
{
"cells": [
{
"fname": "Jack",
"label": "fname",
"editable": false
},
{
"lname": "Kalra",
"label": "lname",
"editable": true,
"details": [
{
"industry": "music"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "Steven",
"editable": true,
"label": "fname"
},
{
"lname": "Martini",
"editable": true,
"label": "lname"
}
]
},
{
"cells": [
{
"fname": "Andrea",
"editable": true,
"label": "fname"
},
{
"lname": "Dmello",
"editable": true,
"label": "lname",
"details": [
{
"industry": "finance"
},
{
"industry": "HR"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "James",
"label": "fname",
"editable": false
},
{
"label": "lname",
"lname": "Diamond",
"editable": true,
"details": [
{
"industry": "music"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "Aba",
"label": "fname",
"editable": true
},
{
"label": "lanme",
"lname": "Duck",
"editable": true,
"details": [
{
"industry": "finance"
},
{
"industry": "technology"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "Henry",
"label": "fname",
"editable": true
},
{
"label": "lname",
"lname": "Hebert",
"editable": true,
"details": [
{
"industry": "finance"
},
{
"industry": "HR"
},
{
"industry": "media"
},
{
"industry": "IT"
}
]
}
]
}
]
}
}
}
All cells are editable.
I'm trying to loop through each row and then each cell to find out the number of properties in "details". In inline editing mode, it should be a text field and the value of text field should be the corresponding number of properties.
Example - for Marc Kalra, the details cell will be a text field with a value of 2.
Here's my code
loadComplete: function(data){
var x, y, cellProp;
for (x = 0; x < data.wrapper.table.rows.length; x++) {
var cellCount = data.wrapper.table.rows[x].cells.length;
for (y = 0; y < cellCount; y += 1) {
cellProp = data.wrapper.table.rows[x].cells[y];
var prop, listCount, cellLabel;
listCount = data.wrapper.table.rows[x].cells[y].details.length;
cellLabel = data.wrapper.table.rows[x].cells[y].label;
function gridCustomEdit (value, options){
var el = document.createElement("input");
el.type="text";
el.value = listCount;
return el;
}
for (prop in cellProp) { if (prop === "details"){
$("#jqgrid").setColProp(cellLabel, {
editable: true,
edittype: "custom",
editoptions: {
custom_element: gridCustomEdit
}
});
}
}
}
}
PROBLEM - is that el.value = listCount; in the above code always returns 4 as the number of properties for each row/cell.
Can someone point me my mistake?
UPDATED
loadComplete: function(data){
var x, y, cellProp;
for (x = 0; x < data.wrapper.table.rows.length; x++) {
var cellCount = data.wrapper.table.rows[x].cells.length;
for (y = 0; y < cellCount; y += 1) {
cellProp = data.wrapper.table.rows[x].cells[y];
var isEditable = cellProp.editable;
if (isEditable === false) {
$("#jqgrid").setColProp(cellProp.label, {
editable: false
});
}else {
var listCount, cellLabel;
listCount = data.wrapper.table.rows[x].cells[y].details.length;
cellLabel = data.form.summary.rows[x].cells[y].label;
$("#jqgrid").setColProp(cellLabel, {
editable: true,
editoptions: {
dataInit: function(elem){
$(elem).myPlugin({listCount: listCount})
}
}
})
}
}
}
}
PLUGIN CODE
(function( $ ){
$.fn.extend({
myPlugin: function(options){
var defaults = {
listCount: 0
};
var options = $.extend(defaults, options);
var o = options;
alert(o.listCount);
if (o.listCount === 3){
$(elem).html("<input type='text' value='" + o.listCount + "'>")
} else {
$(elem).html("<select>") **// this should be a dropdown with values = properties of `details`**
}
}
})
})
GRID CODE
$("#jqgrid").jqGrid({
datatype: "json",
colNames:['fname','lname'],
colModel:[
{name:'fname',index:'fname'},
{name:'lname',index:'lname'},
],
jsonReader: {
root: "wrapper.table.rows",
repeatitems: false
},
onSelectRow: function(id){
$(this).jqGrid('editRow',id);
},
})
If details exist + number of properties in details = 3, then lname is displayed as a text field in inline editing mode.
If details exist + number of properties in details > 3, then lname is displayed as a select field in inline editing mode.
The method setColProp set property for the column and not for the cell in the column. So if you set in the loop setColProp for the same column many times only the last setting will be applied. Because the last row (for "Love Hebert") in your data has 4 items in the details array only the value will be used.
The next error is that you define gridCustomEdit function which has reference to external variable listCount. In the case there are only one instance of the function with the last value of the variable. If you need to have many function instances with different values you should use closure.
In your case it seems to me you can implement all what you need even without the usage of closure and without custom editing (edittype:'custom' with custom_element and custom_value).
I suppose that all what you need to do is to set setColProp inside of onSelectRow (or before the call of editRow) and not inside of loadComplete. See the answer for more information. If you need to change the edittype of the column you can do this in the same way. So you can for example dynamically set edittype: "text" and set editoptions with dataInit which change the value of the element.
If it is needed you can even dynamically switch the edittype between edittype: "text" and edittype: "select" and set all editoptions which are required.
In the way you will receive simple and flexible code which don't use custom editing at all.
I am having a tough time to display footer information using jqGrid. I have followed all the necessary steps to setup footer. The server request is based on some filter condition. The server returns a json with appropriate "userdata" information. Following are the JSON and javascript information.
{
"timeatt": [
{
"empnum" : "12345",
"name" : "ABCDEFG",
"shift" : "1",
"postdate" : "12/27/10",
"regular" : "40",
"ot" : "8",
"dbltime" : "0",
"holiday" : "0",
"vacation" : "0",
"payrate" : "0"
},
{
"empnum" : "67890",
"name" : "HIJKLMN",
"shift" : "1",
"postdate" : "12/27/10",
"regular" : "32",
"ot" : "0",
"dbltime" : "0",
"holiday" : "0",
"vacation" : "8",
"payrate" : "0"
}
],
"userdata": {
"name": "Totals",
"regular": "72",
"ot": "8",
"dbltime": "0",
"vacation": "8",
"holiday": "0"
},
"totalrecords" : "2"
}
jQGrid Information
$("#empinfo").jqGrid({
datatype:'json',
colNames:['Clock#','Name','PostDate','Shift','Regular','Over Time','Dbl Time',
'Vacation','Holiday'],
colModel:[{name:'empnum', index:'empNum', width:60},
{name:'name', index:'name', width:200},
{name:'postdate', index:'postdate', width:60,editable:false,
hidden:true,editrules:{edithidden:false}},
{name:'shift', index:'shift', width:60,editable:true,edittype:'text'},
{name:'regular', index:'regular', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'},
{name:'ot', index:'ot', width:70,editable:true,edittype:'text',
align:"right", formatter: 'number'},
{name:'dbltime', index:'dltime', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'},
{name:'vacation', index:'vacation', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'},
{name:'holiday', index:'holiday', width:70,editable:true,
edittype:'text',align:"right", formatter: 'number'}],
scroll:1,
scrollRows:true,
height:300,
editurl:'clientArray',
footerrow:true,
userDataOnFooter:true,
altRows:true,
onSelectRow: function(rowNum){
if (rowNum && rowNum != lastSel) {
$("#empinfo").saveRow(lastSel);
}
$("#empinfo").editRow(rowNum,true);
lastSel = rowNum;
},
});
I tried everything listed in the jqGrid demo but for somereason, the "userdata" information is not getting populated. Can anybody help me ?
Thanks
SMargabandhu
First of all you should remove comma before }); at the end of your code. Your code is sure not full. For example url parameter is not defined so I suppose the comma come from the reduction of real code.
About your main problem. You should include jsonReader in the jqGrid definition to be able to display the JSON data which you posted. The jsonReader can be following:
jsonReader: {
repeatitems: false,
root:'timeatt',
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.length; }
}
After that the data will be displayed inclusive the 'userdata' will be displayed (see here)
the same name of the columns in (colModel) to return userdata, example:
userdata = new { hours= lista.Sum(x => x.Horas).ToString(), function= "Total HH:" }