Algolia's instant search pagination not returning the correct pages - algolia

I've created an index with 2166 objects in it. In the configuration, I have this:
cProjectSearch.addWidget(
instantsearch.widgets.hits({
container: '#hits-container',
hitsPerPage: 200,
templates: {
item: getMustacheTemplate('hit'),
empty: getMustacheTemplate('no-results')
}
})
);
cProjectSearch.addWidget(
instantsearch.widgets.pagination({
container: '#cp-pagination-container',
scrollTo: false
})
);
When the search starts, it returns the 1st 200 results on page one. But the pagination widget only shows:
1 2 3 4 5 › »
and when I go to to page 5, it shows:
« ‹ 1 2 3 4 5
Pages 6 - 10 are not shown.
How can I fix this?

The is the default behaviour in Algolia, the total number of hits return is set to 1000 for performance reason. That's why you only have 5 page (200 hits * 5 pages). But you can override this parameter with the settings paginationLimitedTo, you can find more informations about it in the documentation.
Also note that the hits widget doesn't accept the hitsPerPage attribute. You can pass it through the searchParameters attribute on the InstantSearch instance instead you can find more informations about it in the documentation.
instantsearch({
appId: "xxx",
apiKey: "xxx",
indexName: "index_name"
searchParameters: {
hitsPerPage: 200
},
});

Related

How to set min and max as a variable in quickcharts?

Currently, I am creating quickcharts line graphs and attached it to my mail body. But the dataset is fetched using a mysql query and the dataset changes time to time. Here is my sample code.
$chartConfig = "{
type: 'line',
data: {
labels: [$date_array2],
datasets: [{
data: [$value_array2],
backgroundColor: ['#F5DEB3'],
fill: false,
}]
},
options: {
title: {
display: true,
text: 'UGW Max Daily Throughput, in Gbps',
},
legend: {
display: false
},
}
}";
In here both $date_array2 and $value_array2 are fetched using a mysql query. But now I need to make a scale to visualize this graph more clear, so I dont want to start the graph with zero. But I could not make min and max values since the dataset is changing day by day. What I need to do is, I need to check the dataset(only 7 day) and idenitify the min and max values and adjust the y axis. I have read https://www.chartjs.org/docs/2.9.4/charts/line.html but couldnot find a proper solution.. Can someone propose a method to do this?

how to make simple paging extjs4

Good day everyone, I'm new user to Extjs 4. Right now, I have a problem in creating a simple paging (a test run just to familiarized on this). Please take a look at the example below.
//creating a store data first
var itemsPerPage = 2;
var productivity = Ext.create('Ext.data.Store',{
fields : ['name','aht','numberOfCalls'],
pageSize: itemsPerPage,
autoLoad: true,
data:{'items':[
{name: 'Magelyn Cunanan', aht:'6:00', numberOfCalls:'50'},
{name:'Martin Dejaresco', aht:'7:30', numberOfCalls:'40'},
{name:'Emerson Dela Pena', aht:'8:00', numberOfCalls:'45'}
]},
proxy: {
type: 'ajax',
url: 'pagingstore.js',
reader: {
type: 'json',
root: 'items',
totalProperty:'total'
}
}
});
productivity.load({
params:{
start:0,
limit: itemsPerPage
}
});
then on my paging,
//... some code here. by the way this is a viewport container
region: 'center',
xtype: 'tabpanel',
autoScroll: true,
activeTab: 2,
items: [{
title: 'Agent\'s Productivity',
xtype: 'gridpanel',
store: productivity,
//for flex, indicates the amount of space this component will take up in its parent container. eg. if 1 this will take 100% of the container
columns: [
{text: 'Agent name',dataIndex: 'name', flex: 1},
{text: 'Handling Time',dataIndex:'aht',flex:1},
{text: 'Number of calls' ,dataIndex: 'numberOfCalls',flex:1}
],
dockedItems:[{
xtype: 'pagingtoolbar',
store: productivity,
dock: 'bottom',
displayInfo: true
}],
all of these codes that I mentioned earlier are inside in app.js. The problem is when I run the program. The data that I stored doesn't appeared on the grid. It shows only no results plus 0 displays on the dockedItems.. I'm using this just to familiarize on how the extjs works and I need to use this extjs for my programming project in the future.
your answer and explanations to your answer is highly appreciated :)
thank you
What is apparent from your code:
you use inline data plus ajax proxy. These two are mutually exclusive - you either want some inline data or you want to pull data from a server via ajax.
proxy url points to a file (at least I guess it from the name pagingstore.js. This is not going to work as server side has to honor start and limit parameters, it has to return only matching recors and it has to return total number of records for paging to work.
you must never fiddle with start and limit yourself when loading the store. Store already knows what to do and sends these parameters automatically.
For inline paging just need to code this
pageSize: itemsPerPage
proxy: {
type: 'memory',
enablePaging: true
}
oh boy.. I made myself difficult on this one :) but thanks for the reference

gridx with JSONRest - Creating and querying

Just wondering if anyone can help me with this issue. I have a Gridx connected to a JSONRest store. It works but when the grid starts up it seems to make a call to my server. I dont want this to happen. The server call takes two parameters and i only want this to be called when i query the store.
my code:
var restStore = new
dojo.store.JsonRest({target: "search"});
grid = new Grid({
id: 'grid',
cacheClass: Cache,
store: restStore,
autoHeight:true,
pageSize: 10,
modules: [
Pagination,
PaginationBar
],
paginationBarSizes: [10, 25, 50],
paginationBarVisibleSteppers: 4,
paginationBarGotoButton: false,
paginationBarDescription: true,
structure: [
{id: "description", field: 'description', width: '100%',
formatter: formatter,
}
]
});
query to the store which works
grid.model.clearCache();
grid.store.query({term : term, category : category}).then(function(results){
});
Also if i have the gridx inside another widget, it gets called again when the other widget starts up.
Any body any ideas how i get around this?
Gridx takes a 'query' parameter in it's initialization arguments, which sets initial query for the store. gridx queries the store on startup to populate itself for the first time. just specify
.......
query: {term : term, category : category},
......
in gridx initialization and it will perform that query for you on startup to populate your grid

How can I show a highstock graph with a linear timeline

I have generated a graph inside highstock (see example - http://jsfiddle.net/szFQa/),
however, by default, it groups data that is chronologically close together, and stops the timeline from showing time in a linear form.
I've tried using the following options, there seems to be no change though.
plotOptions : {
series : {
dataGrouping : {
enabled : false
},
}
},
What options need to be set to stop the grouping and show the timeline as linear?
In case when you disable dataGrouping like this http://jsfiddle.net/szFQa/1/ then points are not grouped, because in your data you have 16 points and on the chart is also 16 points.
plotOptions: {
series: {
dataGrouping:{
enabled:false
},
marker: {
enabled: true
}
}
},

Maintaing page number of MVC 2 pagination on refresh

I'm using MVC 2 Pagination (not the jquery one) and my partial page gets refreshed in every 5 second.
I want to maintain my page number on refresh. Can you please suggest me how that can be done.
Here is the code for the page refresh in every 5 sec
setInterval(function () {
$.ajax(
{
type: "GET",
url: '<%=Url.Action("divtobeupdated", "DefaultController") %>',
data: {},
dataType: "text",
success: function (result) { $("#FileListContainer").html(result); }
}
)
}, 5000);
you can try 2 solution:
1) you pass the number of the page to the server and you pass it back to the view(no so good because you hace to change many code)
2) set a javascript global variable and you set it in the setInterval, like this:
var numOfPage;
setInterval(function () {
numOfPage = getNumofPage();
$.ajax(
{
type: "GET",
url: '<%=Url.Action("divtobeupdated", "DefaultController") %>',
data: {},
dataType: "text",
success: function (result) {
//heare you can use numOfPage
$("#FileListContainer").html(result);
}
}
)
}, 5000);
I hope understund good your question.
Marco