Multiple Webdatarocks pivots gives exception
"is not a constructor at displaygrids"
script is included properly but no resolution.. There is also & issue on how to differentiate export of data for both grids separately when on the same page.
Following is the code :
'''
function displaygrids(parsed_data,parsed_data_2) {
var pivot = new webdatarocks({
container: "#d1-component",
//toolbar: true,
// beforetoolbarcreated: customizeToolbar,
//height: 295,
report: {
dataSource: {
data: parsed_data,
}
}
});
var p1= new webdatarocks({
container: "#d2-component",
//toolbar: true,
// beforetoolbarcreated: customizeToolbar,
//height: 295,
report: {
dataSource: {
data: parsed_data_2,
}
}
});
}
'''
here is a reference to the WebDataRocks thread with a similar question - https://www.webdatarocks.com/question/how-to-put-pivottable-in-bootstrap-grid/ .
They placed 2 WebDataRocks in a row with a help of Bootstrap.
Related
I have implemented a client-side join from a GitHub based CSV to a Mapbox tileset using a Papa-parse promise function, similar to how it is implemented in: Data Joins : Mapbox JS.
The promise is fulfilled and the data is stored correctly, the outlines of the regions I am trying to visualise show, but there is an issue with data-driven styling with the "interpolate", ['linear'] parameters I am trying to use, from my past experience. The 'accessibilityOutline' ID layer shows its data correctly, so it is confusing to why this is happening.
An error keeps coming up declaring
"Input/output pairs for "interpolate" expressions must be defined using literal numeric values (not computed expressions) for the input values."
I am wondering if anyone else has had this problem, and the way it was overcome. Any help would be grateful.
The code implemented is below, this is all based off the link above. The data is read in correctly and through debug testing I can see that all the data is in the correct format as the
dynamicTyping: true,
is present in the Papa.parse function. However, mapbox looks like it is unable to read this data.
function papaPromise(url) {
return new Promise(function(resolve,reject) {
Papa.parse(url, {
download: true,
header: true,
skipEmptyLines: true,
complete: resolve,
dynamicTyping: true,
});
});
}
const accessibilityCSV = papaPromise("some random url of data");
const mapContainer = useRef();
useEffect(() => {
const map = new mapboxgl.Map({
container: mapContainer.current,
style: "mapbox://styles/mapbox/outdoors-v11",
center: [-2.597, 53.39],
zoom: 9.5,
});
map.on("load", () => {
accessibilityCSV.then(function (results) {
console.log(results.data);
results.data.forEach((row) => {
map.setFeatureState({
source: 'lsoa_ultra_generalised-3gznbd',
sourceLayer: 'lsoa_ultra_generalised-3gznbd',
id: row.lsoa_code
}, {
lsoa_name: row.lsoa_name,
Total_LSOA_population: row.Total_LSOA_population,
LSOA_population_low_income: row.LSOA_population_low_income,
airport_jt60: row.airport_jt60,
airport_jt90: row.airport_jt90,
seaport_jt60: row.seaport_jt60,
seaport_jt90: row.seaport_jt90,
city_jt60: row.city_jt60,
city_jt90: row.city_jt90,
visitor_attraction_jt60: row.visitor_attraction_jt60,
visitor_attraction_jt90: row.visitor_attraction_jt90,
beach_jt60: row.beach_jt60,
beach_jt90: row.beach_jt90,
national_park_jt60: row.national_park_jt60,
national_park_jt90: row.national_park_jt90,
biz_60: row.biz_60,
biz_90: row.biz_90,
NPIER_60: row.nPIER_60,
NPIER_90: row.nPIER_90,
uni_places_60: row.uni_places_60,
uni_places_90: row.uni_places_90
},
);
});
});
map.addSource('northOutline', {
type: "vector",
url: "vectorURL"
})
map.addSource("accessibilitySource", {
type: "vector",
url: "vectorURL",
promoteId: 'LSOA11CD'
});
map.addLayer({
id: 'accessibility',
type: 'fill',
source: 'accessibilitySource',
'source-layer': 'lsoa_ultra_generalised-3gznbd',
paint: {
"fill-color":[
"interpolate",
['linear'],
['number', ["feature-state","Total_LSOA_population"]],
0,
"#fee5d9",
2075,
"#fcae91",
4150,
"#fb6a4a",
6225,
"#de2d26",
8300,
"#a50f15",
/* other */, "#ccc",
],
},
});
map.addLayer({
id:'accessibilityOutline',
type:'line',
source: 'accessibilitySource',
'source-layer': 'lsoa_ultra_generalised-3gznbd',
paint: {
"line-color": '#000000'
},
});
I'm working on dashaboard stats on one of my projects, and I'm using the C3js to add charts to my dashboard, and all it works fine,
but when I wanna generate a pdf of this dashboard using Rotativa Plugin and wkhtmltopdf, but it doesn't work properly, it generates a pdf with data but not showing charts.
This happen only when I'm using Json, but when I insert data directly it works fine.
Conf Application:
Server-Side : ASP.Net MVC5
Client-Side :Javascript, Rotativa, C3js
Exemple
Controller :
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Print()
{
return new ViewAsPdf("Index");
}
public JsonResult Data()
{
var d1 = new ArrayList() { "Data1", 1, 4, 7, 8, 10 };
return Json( d1 , JsonRequestBehavior.AllowGet);
}
}
The View :
<div id="chart" style="width:500px;height:300px"></div>
#section scripts{
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
url: "http://localhost:58762/Home/Data",
mimeType: 'json',
type: 'bar',
}
});
</script>
}
Render in web page (Index Action) :
But, when I execute the Print action, It's samply blank without chart.
Update
I'm also trying to resolve the problem in a different way but without success :
I retreive data with a simple ajax request and store the data in a variable, after I draw chart without calling ajax into the c3 chart function. the html render is absolutly fine, but the pdf print is not working. there is my file bellow :
<div id="chart" style="width:500px;height:300px">Example 1</div>
#section scripts{
<script>
dataT= $.ajax({
method:'GET',
url: 'http://localhost:58762/Home/Data',
context: document.body,
global: false,
async: false,
success: function (result) {
return result;
}
}).responseJSON;
datad = [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
];
console.log('Datad: ' + datad);
console.log('DateT: ' + dataT);
var chart = c3.generate({
data: {
columns: dataT,
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
}
});
</script>
}
It might be any of these:
The JavaScript default execution timeout is set by default to 200 and your
request to data might be taking longer.
Your server does not support cross origin requests, wkhtmltopdf runs
the AJAX request from the filesystem, so if your server does not
support CORS then it will just block the incoming request for data.
C3JS simply does not work in the rendering engine of wkhtmltopdf
These are the things that I would try:
For (1): check in the documentation how to increase this number
For (2): check this issue in Rotativa GitHub's page:https://github.com/webgio/Rotativa/issues/79#issuecomment-75938649
For (3): to debug this problem and be sure of this, just remove the call to c3 and make a simple print of the data returned by the server (you will have to make your own AJAX call probably). If you see the data, then add the call to C3. If you don't see the chart, then it means that C3 has some sort of incompatibility with the rendering engine (wkhtmltopdf).
After trying a lot of solution and exploring a lot of topics, I come out with the conclusion that wkhtmltopdf is not able to resolve the Ajax call url, so I changed my thinking way and pass all data from the controller, and All it works like sharpe.
This is my solution :
View & Script :
#{
ViewBag.Title = "Home Page";
}
<div id="chart" style="width:500px;height:300px">Lorem Ipsum</div>
#section scripts{
<script>
var infos = #Html.Raw(Json.Encode(ViewBag.data));
var chart = c3.generate({
data: {
columns:infos,
mimeType: 'json',
type: 'bar'
},
bar: {
width: {
ratio: 0.5
}
}
});
</script>
}
Controller :
public ActionResult Print()
{
var data = Data().Data;
ViewBag.data = data;
return new ViewAsPdf("Index");
}
public JsonResult Data()
{
var d1 = new ArrayList() { "data1", 30, 200, 100, 400, 150, 250 };
var d2 = new ArrayList() { "data2", 130, 100, 140, 200, 150, 50 };
var d = new ArrayList() { d1, d2 };
return Json( d, JsonRequestBehavior.AllowGet);
}
Result :
So i have this function onDisplayError which is called each time if request fails. This means if user press save button and 3 request are failing i currently getting 3 popup messages. My goal is that this function checks if my popup window is already opened. If it is then i will append errors in my already opened window otherwise it should open this error popup
onDisplayError: function (response, message) {
var errorPanel = Ext.create('myApp.view.popup.error.Panel',{
shortMessage: message,
trace: response
});
if(errorPanel.rendered == true){
console.log('Do some other stuff');
}else{
errorPanel.show();
}
},
This is Panel.js
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
requires: [
'myApp.view.popup.error.PanelController'
],
controller: 'myApp_view_popup_error_PanelController',
title: 'Fail',
glyph: 'xf071#FontAwesome',
floating: true,
draggable: true,
modal: true,
closable: true,
buttonAlign: 'center',
layout: 'border',
shortMessage: false,
width: 800,
height: 200,
initComponent: function() {
this.items = [
this.getMessagePanel(),
this.getDetailsPanel()
];
this.callParent(arguments);
},
getMessagePanel: function() {
if(!this.messagePanel) {
var message = this.shortMessage;
this.messagePanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
height: 200,
region: 'center',
border: false,
html: message
});
}
return this.messagePanel;
},
getDetailsPanel: function() {
if(!this.detailsPanel) {
this.detailsPanel = Ext.create('Ext.panel.Panel', {
title: 'Details',
hidden: true,
region: 'south',
scrollable: true,
bodyPadding: 5,
height: 400,
html: '<pre>' + JSON.stringify(this.trace, null, 4) + '</pre>'
});
}
return this.detailsPanel;
}
The problem is that i'm still getting multiple popups displayed. I think that the problem is that var errorPanel loses reference so it can't check if this popup (panel) is already opened. How to achieve desired effect? I'm working with extjs 6. If you need any additional information's please let me know and i will provide.
You could provide to your component definition a special xtype.
Ext.define('myApp.view.popup.error.Panel', {
extend: 'Ext.panel.Panel',
xtype:'myxtype'
and then you could have a very condensed onDisplayError function:
onDisplayError: function (response, message) {
var errorPanel = Ext.ComponentQuery.query('myxtype')[0] || Ext.widget('myxtype');
errorPanel.appendError(message, response)
errorPanel.show();
},
The panel's initComponent function should initialize an empty window, and appendError should contain your logic to append an error (which may be the first error as well as the second or the third) to the list of errors in the panel.
Using Ext.create will always create a new instance of that class.
You can use the reference config to create a unique reference to the panel.
Then, use this.lookupReference('referenceName') in the controller to check if the panel already exists, and show().
You also have to set closeAction: 'hide' in the panel, to avoid panel destruction on close.
Otherwise, you can save a reference to the panel in the controller
this.errorPanel = Ext.create('myApp.view.popup.error.Panel' ....
Then, if (this.errorPanel) this.errorPanel.show();
else this.errorPanel = Ext.create...
There are several tabs on a FormPanel:
Code:
var podform = new Ext.FormPanel({
labelAlign: 'left',
id: 'tab_6',
frame:true,
title: 'Договоры подряда',
bodyStyle:'padding:5px 5px 0',
width: 600,
listeners: {
'activate' : function(podform,records,options) {
console.log("store:"+store_form);
this.loaded = true;
var record = store_form.getAt(0);
podform.getForm().loadRecord(record);
}
},
reader : new Ext.data.XmlReader({
record : 'zem',
// success: '#success'
}, [
]),
items: []
});
podform.add(tabs_pod);
Now i try submit data to server:
podform.addButton({
text: 'Submit',
//disabled:true,
handler: function(){
podform.getForm().submit({
url:url_servlet+'submit.jsp',
waitMsg:'Saving Data...',
success: function(form, action) {
Ext.Msg.show({
title:'Success'
,msg:'Form submitted successfully'
,modal:true
,icon:Ext.Msg.INFO
,buttons:Ext.Msg.OK
});
}
});
}
});
But firebug says that i subbmit data only with panels that I have seen. Its means if i not click on second tab i cant get data from it.
Its possible to fix it?
UPDATE
When i use deferredRender:false, first tab shows normal but another tabs looks like this:
I think the problem you are seeing is that the tab panel is not rendering the fields in inactive tabs dues to lazy rendering - a performance enhancing technique. You can try to explicitly force rendering of those sub panels with deferredRender:false
see full doc here
ExtJS 3.4 -> http://docs.sencha.com/ext-js/3-4/#!/api/Ext.TabPanel-cfg-deferredRender
ExtJS 4.1 -> http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-cfg-deferredRender
The below code uses Ext.data.Store to retrieve a JSON with table metadata (for the column headings) and the table's data. The backend PHP script is working correctly and the Ext.data.Store contains valid records for the data - I just can't get them to go "into" the Grid itself.
The API Documentation makes it seem as if I just define a store property for Ext.grid.GridPanel and it will handle the rest.
Note: The code below is a separate from the rest of the application. We have pulled this portion out to see if we can just get a grid working, without the influence of the rest of the application.
Ext.BLANK_IMAGE_URL = 'js/ext/resources/images/default/s.gif';
Ext.onReady(function() {
var columns = [];
var fields = [];
var tabPanel = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
height: 700
});
var queryHeaders = Ext.data.Record.create([
{name: 'id'},
{name: 'table'},
{name: 'field'},
{name: 'title'}
]);
var applicationStore = new Ext.data.Store({
autoLoad: true,
reader: new Ext.data.JsonReader({root: 'fields'}, queryHeaders),
url: 'http://localhost/aargh/index.php/applications/hardware',
listeners: {
'load': function() {
console.info(applicationStore);
applicationStore.each(function(r) {
this_column = [];
this_column['header'] = r.data['title'];
this_column['dataIndex'] = r.data['id'];
columns.push(this_column);
this_column = []
this_column['name'] = r.data['id'];
fields.push(this_column);
});
console.info(fields);
var queryFields = Ext.data.Record.create([fields]);
var queryStore = new Ext.data.Store({
autoLoad: true,
reader: new Ext.data.JsonReader({root: 'fields'}, queryFields),
url: 'http://localhost/aargh/index.php/query/execute/applications/hardware',
listeners: {
'load': function() {
console.info(queryStore);
tabPanel.add(new Ext.grid.GridPanel({
title: 'Hardware',
store: queryStore,
columns: columns,
autoHeight: true,
frame: true
}));
tabPanel.doLayout();
}
}
});
}
}
});
});
As I review the applicationStore and queryStore objects in Firebug I can see the expected data results perfectly in applicationStore.data.items.#.json and queryStore.data.items.#.json (of course, replacing # with the record number).
Any ideas?
Wow - this has been giving us trouble for three days. Turns out I was making an array within an array at var queryFields = Ext.data.Record.create([fields]);
Changing that to: var queryFields = Ext.data.Record.create(fields); fixed the issue.