I have jqxgrid.I am very new to jqxgrid.I want to display total of recordes or values in column.
Can any tell me how to do
enter image description here
jqxgrid have feature to show aggregates for some column, that aggregates could be 'SUM', 'COUNT', or 'AVERAGE'
you can set the aggregates types when u set the column setting in jqxgrid declaration.
for simple example is like this :
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
showstatusbar: true,
statusbarheight: 50,
showaggregates: true,
columns: [
{ text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 170 },
{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
{ text: 'Price', datafield: 'price', cellsalign: 'right', cellsformat: 'c2', aggregates: ['sum', 'avg'] }
]
});
for custom aggregates, u can learn from this link
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?arctic
for complete documentation for aggregates please check the API's documentation from their documentation.
hope this helps
I have a Jqgrid, In my MVC view, there is no problem in displaying the data in the grid. But I want to apply the custom paging in the grid, so i have created the method in my controller which takes two parameters (pageNumber and rowSize) and returns the data based on the these two parameters.
Now my question is that how can i send these two property of grid to the controller and get the changes reflected on the grid.
Note: i also tried to send the value of rowSize using ajax on the button click but after executing the code in the server there is no changes in the grid(as i expected).
View:
<table id="jQGridDemo">
</table>
<div id="jQGridDemoPager">
</div>
<script type="text/javascript">
jQuery("#jQGridDemo").jqGrid({
datatype: "json",
colNames: ['Id', 'First Name', 'Last Name', 'Last 4 SSN', 'Department',
'Age', 'Salary', "Address", 'Marital Status'],
colModel: [
{ name: 'ID', index: '_id', width: 20, stype: 'text' },
{ name: 'FirstName', index: 'FirstName', width: 150 },
{ name: 'LastName', index: 'LastName', width: 150 },
{ name: 'LastSSN', index: 'LastSSN', width: 100 },
{ name: 'Department', index: 'Department', width: 80, align: "right" },
{ name: 'Age', index: 'Salary', width: 80, align: "right" },
{ name: 'Salary', index: 'Salary', width: 80, align: "right" },
{ name: 'Address', index: 'Address', width: 150, sortable: false },
{ name: 'MaritalStatus', index: 'MaritalStatus', width: 100, sortable: false }
],
rowNum: 10,
loadonce: false,
rowList: [5, 10, 20, 50],
pager: "#jQGridDemoPager",
height: "100%",
sortname: 'ID',
viewrecords: true,
sortorder: "desc",
caption: "List Employee Details",
url: '/Home/Records'
});
$(".ui-pg-input").click(function () {
alert(this.value);
$.ajax({
type: 'POST',
url: window.location + "Home/Records",
data: {
pageNumber: this.value
},
success: function (data) {
alert("ajax call completed");
},
error: function () {
alert("Something went Wrong");
}
});
})
</script>
Controller
public JsonResult Records(int pageNumber=3, int rowSize = 5)
{
// code for custom paging
return json;
}
JSON Returned from Server:
[{"ID":1,"FirstName":"Alan","LastName":"Donald","LastSSN":"123","Department":"Bowler","Age":"44 ","Salary":"1000000 ","Address":"South Africa","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":1}],"IsTemporary":false}},{"ID":2,"FirstName":"Donald","LastName":"Duck","LastSSN":"345","Department":"Actor","Age":"98 ","Salary":"2000000 ","Address":"USA","MaritalStatus":null,"EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":2}],"IsTemporary":false}},{"ID":3,"FirstName":"Virat","LastName":"Kohli","LastSSN":"111","Department":"Batsman","Age":"28 ","Salary":"1000000 ","Address":"India","MaritalStatus":"Unknown ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":3}],"IsTemporary":false}},{"ID":4,"FirstName":"MS","LastName":"Dhoni","LastSSN":"112","Department":"Captain","Age":"31 ","Salary":"9000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":4}],"IsTemporary":false}},{"ID":5,"FirstName":"Sachin","LastName":"Tendulkar","LastSSN":"113","Department":"Superman","Age":"40 ","Salary":"90000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":5}],"IsTemporary":false}},{"ID":6,"FirstName":"Virendra","LastName":"Sehwag","LastSSN":"114","Department":"Batsman","Age":"36 ","Salary":"8000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":6}],"IsTemporary":false}},{"ID":7,"FirstName":"Zaheer","LastName":"Khan","LastSSN":"115","Department":"Bowler","Age":"36 ","Salary":"3000000 ","Address":"India","MaritalStatus":"Married ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":7}],"IsTemporary":false}},{"ID":8,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":8}],"IsTemporary":false}},{"ID":9,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":9}],"IsTemporary":false}},{"ID":10,"FirstName":"Demo","LastName":"Demo","LastSSN":"Demo","Department":"Demo","Age":"Demo ","Salary":"Demo ","Address":"Demo","MaritalStatus":"Demo ","EntityState":2,"EntityKey":{"EntitySetName":"tbl_Details","EntityContainerName":"JQGridDBEntities","EntityKeyValues":[{"Key":"ID","Value":10}],"IsTemporary":false}}]
I think there are misunderstanding how jqGrid works. If you don't use loadonce: true option jqGrid send automatically request to url with additional parameters which specify the page size and the requested page. So you don't need to many any $.ajax and you don't need to bind $(".ui-pg-input").click. Default names of 1-based "page number" parameter is page and the name of "row size" parameter is rows. So you need just rename parameters of Records actions.
Alternatively you can use prmNames option of jqGrid (see the documentation) to inform jqGrid to use other parameter names as default page and rows. For example you can add the option
prmNames: {page: "pageNumber", rows: "rowSize"}
to solve your problem.
I'm struggling a bit trying to integrate spiderfier https://github.com/jawj/OverlappingMarkerSpiderfier with https://github.com/apneadiving/Google-Maps-for-Rails
In my map.html.haml:
= gmaps(:markers => {:data => #map, :options => { "rich_marker" => true, :raw => '{ animation: google.maps.Animation.DROP }' } }, :map_options => { :draggable => true, :auto_zoom => false, :zoom => 9, :disableDefaultUI => false, :scrollwheel => true, :disableDoubleClickZoom => true, :custom_infowindow_class => "province" })
- content_for :scripts do
:javascript
Gmaps.map.infobox = function(boxText) {
return {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, -50)
,alignBottom: true
,zIndex: 999
,hideCloseButton: false
,boxStyle: {
background: "white"
,width: "280px"
,padding: "10px"
,border: "1px solid #b2b2b2"
,arrowStyle: 0
,arrowPosition: 50
,arrowSize: 20
}
,infoBoxClearance: new google.maps.Size(10, 10)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
}};
This works fine, but how would one integrate spiderfier https://github.com/jawj/OverlappingMarkerSpiderfier#how-to-use ?
This is an old question using an old version of Gmaps 4 Rails, however to anyone that is interested in working with both libs in their latest versions, here's how to do it.
This example is based off the documentation sample code
handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers([
{
"lat": 0,
"lng": 0,
"picture": {
"url": "https://addons.cdn.mozilla.net/img/uploads/addon_icons/13/13028-64.png",
"width": 36,
"height": 36
},
"infowindow": "hello!"
}
]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
// Create a OverlappingMarkerSpiderfier instance
var oms = new OverlappingMarkerSpiderfier(handler.getMap(), {
keepSpiderfied: true
// Other options you need
});
// Track each marker with OMS
_.each(markers, function(marker) {
oms.addMarker(marker.getServiceObject());
});
});
The important thing here is to get down to the native Google objects that Gmaps4Rails wraps inside its own classes.
If you need click events on your markers, add a single handler to oms as it is explained in the doc.
I'm using Ruby on Rails and HighCharts:
So here is the print-screen that I see when setting my highchart:
Here is the code:
#chart = LazyHighCharts::HighChart.new('pie') do |f|
f.chart({:defaultSeriesType=>"pie" , :margin=> [50, 200, 60, 170]} )
series = {
:type => 'pie',
:name => 'Browser share',
:data => [['say', 100],['may', 500]]
}
f.series(series)
f.options[:title][:text] = "Total spend on services"
f.legend(:layout=> 'vertical',:style=> {:left=> 'auto', :bottom=> 'auto',:right=> '50px',:top=> '100px'})
f.plot_options(:pie=>{
:allowPointSelect=>true,
:cursor=>"pointer" ,
:dataLabels=>{
:enabled=>true,
:color=>"white",
:style=>{
:font=>"13px Trebuchet MS, Verdana, sans-serif"
}
}
})
end
All is good, apart from I don't see the labels on the pie... It seems there is a small string below the chart, however the label is not initialized.
Anyone know how to solve this issue?
Is it because you have it set to white?
:color=>"white",
I would like some help in order to prepare my data gathered from the database for charting.
I have a Browser model where I store all the data.
From each model I want to select the name attribute, I will put a color according an integer attribute in the model (for example if integer is 1, color => "#4572A7") and the y attribute from the model.
Can someone provide an example of the most efficient way to achieve this data format?
Final format of the data:
[
{
:name=> 'Firefox',
:y=> 1,
:color => "#4572A7"
},
{
:name=> 'IE',
:y=> 1,
:color => "#AA4643"
},
{
:name=> 'Chrome',
:y=> 1,
:color => "#89A54E"
},
{
:name=> 'Safari',
:y=> 1,
:color => "#80699B"
},
{
:name=> 'Opera',
:y=> 1,
:color => "#3D96AE"
},
{
:name=> 'Others',
:y=> 1,
:color => "#DB843D"
}
]
You could have a method that does the number-to-color translation and have something like
#browsers.to_json(methods: [:the_method_that_translates_numbers_to_colors], only: [:name, :y])
Hope that helps,
NHI