I want to get the summary of the column stay time on my grid. But I can't seem to understand or figure out how to use the summary grid in extjs. Could anyone please help me or guide me?
Here's my grid code:
Ext.ns('dlti.view.widget');
Ext.define('dlti.view.widget.PlaylistDetailsGrid' ,{
extend: 'Ext.grid.Panel',
id: 'playlist-details',
alias: 'widget.PlaylistDetailsGrid',
forceFit: true,
stripeRows: true,
selType: 'rowmodel',
autosync: true,
height: 150,
width: 950,
store: new dlti.store.PlaylistDetailsStore(),
columns: [
{
text: 'Filename',
dataIndex: 'filename',
renderer: function renderDescTarget(val, p, record) {
var desc = '';
desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
return desc;
}
},
{
text: 'Transition',
dataIndex: 'transition',
renderer: function renderDescTarget(val, p, record) {
var desc = '';
desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
return desc;
}
},
{
text: 'Stay Time',
dataIndex: 'timeframe',
renderer: function renderDescTarget(val, p, record) {
var desc = '';
desc = '<p style="color:#000;font-size:12px;">' + val + '</p>';
return desc;
}
}
]
});
You can specify summaryType and summaryRenderer like this:
summaryType: 'count',
summaryRenderer: function(value, summaryData, dataIndex) {
return ((value === 0 || value > 1) ? '(' + value + ' Tasks)' : '(1 Task)');
}
summaryType can have values like count, max, average, sum etc. and summaryRenderer is similar to the column renderer where you can give any custom logic for formatting the summary.
Related
I want to get all the products by range price with discount.
this is what it looks like in sql:
WHERE (
CASE WHEN p.discount IS NOT NULL THEN ROUND(
p.unit_price * (100 - p.discount) / 100, 1)
ELSE p0_.unit_price END ) >= :min
AND (
CASE WHEN p.discount IS NOT NULL THEN ROUND(
p.unit_price * (100 - p.discount) / 100, 1)
ELSE p0_.unit_price END ) <= :max
is there a way to do the same with range condition?
$fieldRange = new \Elastica\Query\Range('unitPrice', array('gte' => 300, 'lte' => 1500));
here is my config:
fos_elastica:
clients:
default: { url: '%env(ELASTICSEARCH_URL)%' }
indexes:
product:
properties:
unitPrice:
type: integer
discount:
type: keyword
attributeValues:
type: "nested"
properties:
value:
type: keyword
product:
type: keyword
persistence:
driver: orm
model: App\Entity\Product
provider: ~
listener: ~
finder: ~
here is the full query:
$query = new \Elastica\Query();
$query->setSize(0);
$boolQuery = new \Elastica\Query\BoolQuery();
/* filter checked */
$fieldQuery = new \Elastica\Query\Match();
$fieldQuery->setFieldQuery('attributeValues.value', 'Brand');
$domainQuery = new \Elastica\Query\Nested();
$domainQuery->setPath('attributeValues');
$domainQuery->setQuery($fieldQuery);
$fieldQuery2 = new \Elastica\Query\Match();
$fieldQuery2->setFieldQuery('attributeValues.value', 'Another Brand');
$domainQuery2 = new \Elastica\Query\Nested();
$domainQuery2->setPath('attributeValues');
$domainQuery2->setQuery($fieldQuery2);
$fieldRange = new \Elastica\Query\Range('unitPrice', array('gte' => 300, 'lte' => 1500));
$boolQuery->addMust($domainQuery);
$boolQuery->addMust($domainQuery2);
$boolQuery->addMust($fieldRange);
$query->setQuery($boolQuery);
$agg = new \Elastica\Aggregation\Nested('attributeValues', 'attributeValues');
$names = new \Elastica\Aggregation\Terms('value');
$cardinality = new \Elastica\Aggregation\Cardinality('unique_products');
$cardinality->setField('attributeValues.product');
$names->setField('attributeValues.value');
$names->setSize(100);
$names->addAggregation($cardinality);
$agg->addAggregation($names);
$query->addAggregation($agg);
$companies = $this->finder->findPaginated($query);
$asd = $companies->getAdapter()->getAggregations();
here is the result:
array(
"attributeValues" => array:2(
"doc_count" => 406,
"value" => array:3(
"doc_count_error_upper_bound" => 0,
"sum_other_doc_count" => 0,
"buckets" => array:42(
2 => array:3(
"key" => "Another Brand",
"doc_count" => 15,
"unique_products" => array:1(
"value" => 9
)
)
)
)
)
);
here is native request (just in case):
{
"size": 0,
"query": {
"bool": {
"must": [
{
"nested": {
"path": "attributeValues",
"query": {
"match": {
"attributeValues.value": {
"query": "Brand"
}
}
}
}
},
{
"nested": {
"path": "attributeValues",
"query": {
"match": {
"attributeValues.value": {
"query": "Another Brand"
}
}
}
}
},
{
"range": {
"unitPrice": {
"gte": 300,
"lte": 1500
}
}
}
]
}
},
"aggs": {
"attributeValues": {
"nested": {
"path": "attributeValues"
},
"aggs": {
"value": {
"terms": {
"field": "attributeValues.value",
"size": 100
},
"aggs": {
"unique_products": {
"cardinality": {
"field": "attributeValues.product"
}
}
}
}
}
}
}
}
a little explanation - I am making a smart filter that disables options when there are no products in it, which I calculate with this query. But I don't know how to calculate the price range with a discount (%) in elastica. I show how I do it in sql.
The title of the question is a bit vague because its difficult to explain so please bear with me.
First off i'm using Meteor to build my application and the data is being fetched from MongoDB.
My MongoDB data looks like this:
And currently I have my highcharts large tree map pointing just to the 'BILL' category of the data. It works fine and renders the chart. The code for my chart looks like this (Unfortunately I cannot configure it to be a running working version) :
Template.chart.onCreated(function chartOnCreated() {
this.subscribe('someData');
});
Template.chart.onRendered(function chartOnRendered() {
this.autorun(() => {
if (this.subscriptionsReady()) {
const data = MyCollection.findOne({_id: "HaQpg4pxhkrGhJPsX"}).BILL;
var points = [],
categoryPoints,
categoryVal,
categoryI = 0,
issueTypePoints,
issueTypeI,
currencyPoints,
currencyI,
periodPoints,
periodI,
ECHoldingPoints,
ECHoldingI,
ECConcentrationPoints,
ECConcentrationI,
ECBPoints,
ECBI,
issueCountryPoints,
issueCountryI,
issueNamePoints,
issueNameI,
ISINPoints,
ISINI,
zeroI,
zeroPoints,
category,
issueType,
currency,
period,
ECHolding,
ECConcentration,
ECB,
issueCountry,
IssueName,
ISIN,
zero,
mil,
causeMil,
causeMilI;
for (category in data) {
if (data.hasOwnProperty(category)) {
categoryVal = 0;
categoryPoints = {
id: 'id_' + categoryI,
name: category,
color: Highcharts.getOptions().colors[categoryI]
};
issueTypeI = 0;
for (issueType in data[category]) {
if (data[category].hasOwnProperty(issueType)) {
issueTypePoints = {
id: categoryPoints.id + '_' + issueTypeI,
name: issueType,
parent: categoryPoints.id,
};
points.push(issueTypePoints);
currencyI = 0;
for (currency in data[category][issueType]) {
if (data[category][issueType].hasOwnProperty(currency)) {
currencyPoints = {
id: issueTypePoints.id + '_' + currencyI,
name: currency,
parent: issueTypePoints.id
};
points.push(currencyPoints);
periodI = 0;
for (period in data[category][issueType][currency]) {
if (data[category][issueType][currency].hasOwnProperty(period)) {
periodPoints = {
id: currencyPoints.id + '_' + periodI,
name: period,
parent: currencyPoints.id,
};
points.push(periodPoints);
ECHoldingI = 0;
for (ECHolding in data[category][issueType][currency][period]) {
if (data[category][issueType][currency][period].hasOwnProperty(ECHolding)) {
ECHoldingPoints = {
id: periodPoints.id + '_' + ECHoldingI,
name: ECHolding,
parent: periodPoints.id,
};
points.push(ECHoldingPoints);
ECConcentrationI = 0;
for (ECConcentration in data[category][issueType][currency][period][ECHolding]) {
if (data[category][issueType][currency][period][ECHolding].hasOwnProperty(ECConcentration)) {
ECConcentrationPoints = {
id: ECHoldingPoints.id + '_' + ECConcentrationI,
name: ECConcentration,
parent: ECHoldingPoints.id,
};
points.push(ECConcentrationPoints);
ECBI = 0;
for (ECB in data[category][issueType][currency][period][ECHolding][ECConcentration]) {
if (data[category][issueType][currency][period][ECHolding][ECConcentration].hasOwnProperty(ECB)) {
ECBPoints = {
id: ECConcentrationPoints.id + '_' + ECBI,
name: ECB,
parent: ECConcentrationPoints.id,
};
points.push(ECBPoints);
issueCountryI = 0;
for (issueCountry in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB]) {
if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB].hasOwnProperty(issueCountry)) {
issueCountryPoints = {
id: ECBPoints.id + '_' + issueCountryI,
name: issueCountry,
parent: ECBPoints.id,
};
points.push(issueCountryPoints);
issueNameI = 0;
for (issueName in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry]) {
if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry].hasOwnProperty(issueName)) {
issueNamePoints = {
id: issueCountryPoints.id + '_' + issueNameI,
name: issueName,
parent: issueCountryPoints.id,
};
points.push(issueNamePoints);
ISINI = 0;
for (ISIN in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName]) {
if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName].hasOwnProperty(ISIN)) {
ISINPoints = {
id: issueNamePoints.id + '_' + ISINI,
name: ISIN,
parent: issueNamePoints.id,
};
points.push(ISINPoints);
causeMilI = 0;
for (mil in data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName][ISIN]) {
if (data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName][ISIN].hasOwnProperty(mil)) {
causeMil = {
id: ISINPoints.id + '_' + causeMilI,
name: mil,
parent: ISINPoints.id,
value: Math.round(+data[category][issueType][currency][period][ECHolding][ECConcentration][ECB][issueCountry][issueName][ISIN][mil])
};
categoryVal += causeMil.value;
points.push(causeMil);
causeMilI = causeMilI + 1;
}
}
ISINPoints = ISINPoints + 1;
}
}
issueNameI = issueNameI + 1;
}
}
issueCountryI = issueCountryI + 1;
}
}
ECBI = ECBI + 1;
}
}
ECConcentrationI = ECConcentrationI + 1;
}
}
ECHoldingI = ECHoldingI + 1;
}
}
periodI = periodI + 1;
}
}
currencyI = currencyI + 1;
}
}
issueTypeI = issueTypeI + 1;
}
}
categoryPoints.value = Math.round(categoryVal / issueTypeI);
points.push(categoryPoints);
categoryI = categoryI + 1;
}
}
Highcharts.chart('chart', {
credits: {
enabled: false
},
plotOptions: {
series: {
turboThreshold: 0,
boostThreshold: 0
}
},
series: [{
type: 'treemap',
layoutAlgorithm: 'squarified',
allowDrillToNode: true,
animationLimit: 1000,
dataLabels: {
enabled: false
},
levelIsConstant: false,
levels: [{
level: 1,
dataLabels: {
enabled: true,
},
borderWidth: 3
}],
data: points
}],
title: {
text: ''
},
},
);
}
});
});
<template name="chart">
<div id="chart" style="width: 450px; height: 260px; margin: 0 auto;"></div>
</template>
Here is a link to a JSFiddle of the chart too (But again this is not a working version just the code)
What I would like to have is a toggle drop down list containing 'BILL' 'BOND' 'MTN' and 'NOTE' and when the user selects an option the string here:
const data = MyCollection.findOne({_id: "HaQpg4pxhkrGhJPsX"}). <USERS SELECTION>;
The USERS SELECTION will be updated with their choice - For example .BILL - and the chart will render that data.
Can anybody help with how I would do that?
Many thanks,
G
You should try const data = MyCollection.findOne({_id: "HaQpg4pxhkrGhJPsX"})["<USERS SELECTION>"];
In javascript, you can access to a value of a certain JSON object field by many ways:
var obj = { key : 'value' }
var lookup = 'key'
console.log( obj.lookup ) //undefined
console.log( obj.key ) //value
console.log( obj[lookup] ) //value
In the pagination example, how do I replace the text at the bottom, "rows" with another word e.g. "products"?
Showing 1 to 10 of 800 rows
becomes
Showing 1 to 10 of 800 products
Ported from issue # 882 on bootstrap-table's issue tracker.
This text is part of bootstrap-table's localizations. English (en-US) is loaded by default.
Solution # 1
Create and include a custom locale
/js/locale/bootstrap-table-en-US-custom.js
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['en-US-custom'] = {
formatLoadingMessage: function () {
return 'Hold your horses...';
},
formatRecordsPerPage: function (pageNumber) {
return pageNumber + ' bananas per page';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' products';
},
formatSearch: function () {
return 'Search';
},
formatNoMatches: function () {
return 'No matching records found';
},
formatPaginationSwitch: function () {
return 'Hide/Show pagination';
},
formatRefresh: function () {
return 'Refresh';
},
formatToggle: function () {
return 'Toggle';
},
formatColumns: function () {
return 'Columns';
},
formatAllRows: function () {
return 'All';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['en-US-custom']);
})(jQuery);
It is also important to note, that the localization settings get merged in to the table settings -meaning that you can simply
Solution # 2 Pass them as an argument in your table settings:
$('#table').bootstrapTable({
// .. your other table settings
pagination: true,
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' rows';
}
});
or you can
var $table = $('#bootstrap-table');
$table.bootstrapTable({
toolbar: ".toolbar",
clickToSelect: true,
showRefresh: true,
search: true,
showToggle: true,
showColumns: true,
pagination: true,
searchAlign: 'left',
pageSize: 8,
clickToSelect: false,
pageList: [8,10,25,50,100],
formatRecordsPerPage: function(pageNumber){
return pageNumber + " rows visible";
},
formatShowingRows: function(pageFrom, pageTo, totalRows){
//do nothing here, we don't want to show the text "showing x of y from..."
return 'Showing ' + pageFrom + ' to ' + pageTo + ' of ' + totalRows + ' ';
}
});
based on jtrumbull`s totally correct answer, I would spent a third one:
Solution # 3 use a locale and merge / overwrite parts of them with your own:
in this example, we will overwrite the already defined "formatShowingRows" function.
// create an array where you store your own translations
var mylocale = {
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return 'Ergebnisse <b>' + pageFrom + '-' + pageTo + '</b> von <b>' + totalRows + '</b>';
}
}
// extend the used locale
$.extend(true, $.fn.bootstrapTable.locales.de, mylocale);
How to avoid getting a exception from jQgrid when the row count is zero and filters are applied. my code looks like this
function filterGrid(grid, siteId, buildingId, cityId, selectedType) {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) { dd = '0' + dd } if (mm < 10) { mm = '0' + mm } today = mm + '/' + dd + '/' + yyyy;
if (cityId == -1) {
grid.setGridParam({ search: false });
}
else {
var filter = { groupOp: "AND", rules: [{ field: "CityID", op: "eq", data: cityId}] };
if (siteId >= 0)
filter = { groupOp: "AND", rules: [{ field: "CityID", op: "eq", data: cityId }, { field: "SiteID", op: "eq", data: siteId}] }; // , { field: "BuildingID", op: "eq", data: buildingId}
if (buildingId >= 0)
filter = { groupOp: "AND", rules: [{ field: "CityID", op: "eq", data: cityId }, { field: "SiteID", op: "eq", data: siteId }, { field: "BuildingID", op: "eq", data: buildingId}] };
if (selectedType == "Outstanding Books")
filter = { groupOp: "AND", rules: [{ field: "CityID", op: "eq", data: cityId }, { field: "SiteID", op: "eq", data: siteId }, { field: "BuildingID", op: "eq", data: buildingId }, { field: "IsReturnDateNull", op: 'eq', data: true }, { field: "DueDate", op: 'gt', data: today}] };
//For filtering
grid.setGridParam({ search: true, postData: { filters: JSON.stringify(filter)} });
//For searching
//grid.setGridParam({ search: true, postData: { searchOper: "eq", searchField: "Status", searchString: selectedVal} });
}
grid.trigger("reloadGrid");
}
The Code that i have written works perfectly fine BUT if the datasource has no records to bind with the grid then i get an exception, I thought of getting the row count into a hidden field on the server side and on the client side if the row count is zero in the hidden field then skip searching, but since the datasource is getting assigned to the jqgrid during an asynchronous call back hence value in the hidden field is not getting updated(always get empty string in hiddenfield on client side) so can any body help me how to avoid getting a null exception from the jqgrid when there is no data bound to it.
I finally found an answer to this question. I used the event onsearching of the jqgrid and on the server side i get the row count from a hidden field that contains the current row and if the row count is 0 then i cancel the search operation.
protected void grdBookTransaction_Searching(object sender, Trirand.Web.UI.WebControls.JQGridSearchEventArgs e)
{
if (string.IsNullOrEmpty(GridCount.Value) || GridCount.Value == "0")
{
e.Cancel = true;
}
}
I have a columnrange graph and want to define the color of a single bar line. If you see the second set in the picture. depending on a certain condition I would liek to change this to different color. $schedule[] = array($date_from, ( date('Y-m-d',strtotime($model['ProjectEndDate'])) > date('Y-m-d') )? $today*1000 : $date_to); if endate is not greater than today then change color to red.
How would I do this?
in view
$('#container').highcharts({
'chart':{
'type':'columnrange',
'inverted':true,
},
'exporting':{
'enabled':true
},
'title':{
'text':'Projects incomplete in 2013'
},
'xAxis':{
'categories':<?=$cat?>
},
'yAxis':{
'title':'Date',
'type':'datetime',
'dateTimeLabelFormats':{
'month':'%b'
},
'min':Date.UTC(2013,00,01)
},
'tooltip':{
formatter: function(){
return '<b>' +this.series.name + ':</b> '+ Highcharts.dateFormat('%e %b, %Y', this.point.low) + ' - ' + Highcharts.dateFormat('%e %b, %Y', this.point.high) +'<br/>' ;
}
},
'legend':{
'enabled':false
},
'series':[
{
'name':'Start - End',
'data':<?=$data?>
},
{
'name':'Forecast',
'data':<?=$schedule?>,
'color': 'green'
},
{
'name':'Actual',
'data':<?=$complete?>,
'color': 'yellow'
}
]
});
In my controller I have
public function actionGraph(){
$command = Yii::app()->db->createCommand("
SELECT
view_webprojectreport.PROJECT,
view_webprojectreport.StartDATE,
view_webprojectreport.ProjectEndDate,
view_webprojectreport.PERCENT,
view_webprojectreport.ASAAREA
FROM
view_webprojectreport
WHERE
view_webprojectreport.StartDATE >= '2013' AND
view_webprojectreport.ProjectEndDate IS NOT NULL AND
view_webprojectreport.PERCENT < 100
ORDER BY
view_webprojectreport.PERCENT DESC
")->queryAll();
$series = array();
$cat = array();
$totalLength = array();
$schedule = array();
$complete = array();
foreach ($command as $key => $model) {
$cat[] = $model['PROJECT'];
$date_from = (strtotime($model['StartDATE']) + 1*86400)*1000;
$date_to = (strtotime($model['ProjectEndDate']) + 1*86400)*1000;
$totalLength[] = array($date_from,$date_to);
$today = time();
$startdate = strtotime($model['StartDATE']);
$enddate = strtotime($model['ProjectEndDate']);
$diff_total = $enddate - $startdate;
$diff_today = $today - $startdate;
$percentage_date=round(($diff_today/$diff_total)*100,2);
$duration = ( ((strtotime($model['ProjectEndDate']) + 1*86400)*1000) - ((strtotime($model['StartDATE']) + 1*86400)*1000) );
$burn = ((time() )*1000) - ((strtotime($model['StartDATE']) + 1*86400)*1000);
$pBurned = $burn/$duration;
$time = $time = strtotime( ($date_from + $pBurned) );
//echo date('Y-m-d') . " : " . date('Y-m-d',strtotime($model['ProjectEndDate'])) . "<br>";
// place check for calculating if project end date is in past
$schedule[] = array($date_from, ( date('Y-m-d',strtotime($model['ProjectEndDate'])) > date('Y-m-d') )? $today*1000 : $date_to);
$percentage_to_get = round((float)$model['PERCENT'],2);
$percentage_of_days = ((int)$model['PERCENT'] == 0)? 0 : floor($diff_total/100*$percentage_to_get);
//echo date('Y-m-d', $startdate) . " : " . date('Y-m-d', $startdate + $percentage_of_days ) . "<br>";
//echo $startdate . " : " . ($startdate + $percentage_of_days) . "<br>";
$percentComplete = (($startdate + $percentage_of_days)+ 1*86400)*1000;
$complete[] = array($date_from,$percentComplete);
}
$series = array("series"=>array(
array(
'name'=>'Start - End',
'data'=>$totalLength
),
array(
'name'=>'Forecast',
'data'=>$schedule,
'color'=> 'green'
),
array(
'name'=>'Actual',
'data'=>$complete,
'color'=> 'yellow'
)
));
print_r($series);
$this->render('graph',array(
'cat'=>json_encode($cat),
"data"=>json_encode($totalLength),
"schedule"=>json_encode($schedule),
"complete"=>json_encode($complete),
"series"=>json_encode($series)
));
}
output of schedule
[[1357689600000,1372064004000],[1360972800000,1.3686588e+12],[1359158400000,1372064004000],[1.3630464e+12,1365721200000],[1359417600000,1372064004000],[1.3709916e+12,1372064004000],[1.3686588e+12,1372064004000],[1.3681404e+12,1372064004000],[1.3699548e+12,1372064004000],[1366930800000,1372064004000]]
How would I incorporate the color in this?
$schedule[] = array($date_from, ( date('Y-m-d',strtotime($model['ProjectEndDate'])) > date('Y-m-d') )? $today*1000 : $date_to);
I have found http://jsfiddle.net/Q2JMF/2/ and trying to implement but not working. graph displays nothing
My example on jsfiddle http://jsfiddle.net/shorif2000/z4HXX/2/
Your point should be object like :
{
y:10,
color: 'red'
}
So data should looks like:
data:[{
y:10,
color: 'red'
},4,5,6,7,7]
How to prepare correct structure:
http://php.net/manual/en/function.json-encode.php