Consider this plunker
HTML
<chart [options]="options"
(load)="saveGraphInstance($event.context)"></chart>
<div (click)="switchGraph()">switch</div>
<div (click)="showLoadingForce()">show loading</div>
Typescript
class AppComponent {
constructor() {
this.options = {
title : { text : 'simple chart' },
series: [{
data: [29.9, 71.5, 106.4, 129],
}],
lang:{
loading: 'your text here',
},
};
}
options: Object;
graph: any;
switchGraph() {
this.options = {
title : { text : 'different chart' },
series: [{
data: [129.9, 171.5, 106.4, 129],
}],
lang:{
loading: 'your text here',
},
};
this.graph.showLoading() // This doesn't work
setTimeout(function() {
this.graph.showLoading() // This also doesn't work
}, 4000);
}
showLoadingForce() {
this.graph.showLoading() // User clicked work
}
saveGraphInstance(graph) {
this.graph = graph;
//this.graph.showLoading() // after loading work
}
}
We see from the above code that in the same function that option change, show loading does not work even if I set time out for more than 4 second
But if its done after load trigger or user initiated, then it always work.
This is very interesting, so my question is the following
If I click switch div and immediately click show loading div, the loading text will show, then the setimeout will execute (because 4 sec delay), but only the setimeout will run into error ERROR TypeError: Cannot read property 'showLoading' of undefined. How is that possible? If showLoadingForce is successful that means saveGraphInstance must have happened
When is (load) execute and resolve? I cannot find the relevant information in github source code
Regarding Q1,
ERROR TypeError: Cannot read property 'showLoading' of undefined
This is an issue with accessing this inside setTimeout(). Inside the setTimeout method this default to window object. To fix this pass the save the the reference to this then access it in setTimeout method.
Refer to the "this" problem.
Regarding Q2, load is defined as output ChartEvent binding in the ChartComponent. This will invoke new instance of EventEmitter.
Use following code to hide the loading image after setTimeout: Updated plunker
saveGraphInstance(graph) {
this.graph = graph;
this.graph.showLoading();
var that = this;
setTimeout(function(graph) {
that.graph.hideLoading();
}, 4000);
}
JS API Reference
Related
I was following simple example to set data to Highcharts using this Angular2-Highcharts module
As shown in the following example, i have made small tweak to dynamically set data to Highcharts. Following is the code snippet :
constructor() {
this.options = {
chart: { type: 'spline' },
title: { text : 'dynamic data example'},
series: [{ data: [2,3,5,8,13] }]
};
setTimeout(() => {
this.chart.series[0].setData([21,31,51,81,13]);
}, 3000);
setTimeout(() => {
this.chart.series.push({data:[]});
this.chart.series[1].setData([100,200,300]);
}, 5000);
}
Plunker link for the same .
Error :
ERROR TypeError: _this.chart.series[1].setData is not a function
at eval (run.plnkr.co/QZBbWi3BVy3DeOzT/app/main.ts!transpiled:28)
My Observation :
What is evident with that error is there is no setData function in the series array in the 1st element. Alternate approach to resolve this is, initializing this.options with empty object with data property :
constructor() {
this.options = {
chart: { type: 'spline' },
title: { text : 'dynamic data example'},
series: [{ data: [2,3,5,8,13] },
{ data: [] },
]
};
}
This is very crude way as i need to do the same for 50 elements in this.options.series if i see them coming dynamically
Is there any efficient and better approach to resolve this error ?
PS : Am new to Highcharts, so please bear with me if am doing something completely wrong at basic level.
setData modifies a series which already exists - if you do not have the series you cannot modify it.
If you want to add a new series, you should use chart.addSeries() method like this:
setTimeout(() => {
this.chart.addSeries({
data: [21,31,51,81,13]
});
}, 5000);
example: http://plnkr.co/edit/61IgH8t3YKjtIOgzpUPB?p=preview
In my web app I am showing alerts for loading content and another alert when there is an error.
I am using AngularJS/AngularStrap
right now this is what I have:
var noLinesAlert = $alert({
title: 'Sorry, no lines at this moment :(',
container: '.no-lines-alert',
type: 'danger',
dismissable: false,
show: false
}),
loaderAlert = $alert({
content: 'Loading content. Please wait...',
container: '.alerts-container',
type: 'info',
show: true
});
and I am calling these alerts this way, example noLinesAlert.show() or loaderAlert.hide() and so on... but just imagine that I will have 4 more alerts for special cases, do I have to create those vars with the object inside every time or is there a way to do it more programmatically? and how.
Well, you can store "default" settings for those 4 special cases in dedicated object, for example: ALERTS_SETTINGS = { notice: {} }, and then the call would be much more concise:
var noticeOptions = angular.extend(ALERTS_SETTINGS.notice, { title: "My custom property one" })
var notice = $alert(noticeOptions)
Using angular.extend you can override any default setting from the original object by those you provide in the second argument.
For every alert the title, container, type, and show property changes. You need to give the program that information, so you can't do this any shorter.
Make it dynamic by putting the $alert into a function. Allow the function to pass parameters to the $alert. Set the show property to true.
Call the function when needed. For example:
var displayAlert = function(alertTitle, className) {
var alertOptions = {
title: alertTitle,
container: className,
type: 'danger',
dismissable: false,
show: true
};
var alert = $alert(alertOptions);
}
// Call the function when needed
$scope.displayAlert('Sorry, no lines at this moment :(','.no-lines-alert')
I'm trying to create a dialog window in ExtJS to perform a save function, but I'm getting problems loading the page.
A (reduced) example of the code window definition is:
Ext.define('MyRequest.SaveDraftOrTemplateWindow', {
extend: 'Ext.window.Window',
alias: 'widget.saveDraftOrTemplateWindow',
requires: ['Ext.toolbar.Toolbar'],
modal: true,
initComponent: function() {
this.items = [ saveDraftOrTemplateForm ];
Ext.apply(this, {
dockedItems: [{
xtype: 'toolbar',
items: [
{
iconCls: 'saveas-draft',
text: '<b>Save</b>',
id: 'saveDraftTemplate',
handler: saveAsDraftRequest(textFieldDraftOrTemplateName.getValue(), checkBoxSaveAsTemplate.getValue()),
scope: this
}
]
}]
});
this.callParent();
}
});
function saveAsDraftRequest(draftName, isTemplate) {
Ext.getBody().mask('Saving draft request...'); // Errors actually occurs on this line
}
// This line is the start of the stack causing the problem...
var saveDraftOrTemplateWindowInstance = Ext.create('MyRequest.SaveDraftOrTemplateWindow', {
Id: 'saveDraftOrTemplateWindow',
xtype: 'saveDraftOrTemplateWindow',
width: 400,
height: 180,
bodyPadding: 0
});
The problem is that is seems to be 'calling' the saveAsDraftRequest() function when the page initially loads which gives the Javascript error "Uncaught TypeError: Cannot read property 'mask' of null", and prevents the page loading. I don't really understand why the function is getting called at this point, as the handler presumably shouldn't be called until the button is actually clicked.
I assume that if the page were already correctly loaded then Ext.getBody() would correctly return a result instead of null, but why is this getting called during the initial page load?
You are invoking saveAsDraftRequest function in initComponent in line:
handler: saveAsDraftRequest(textFieldDraftOrTemplateName.getValue(), checkBoxSaveAsTemplate.getValue())
You should change it to
handler: saveAsDraftRequest
Then you need resolve draftName and isTemplate in handler. You can for example assign them to button:
handler: saveAsDraftRequest,
draftName: textFieldDraftOrTemplateName.getValue(),
isTemplate: checkBoxSaveAsTemplate.getValue()
Then you can access them in handler like so:
function saveAsDraftRequest(sender) {
console.log(sender.draftName);
console.log(sender.isTemplate);
}
Ah, #Lolo has given me the hint I need - I see now that the initialisation code was invoking the function to get the handler to use - what I could have done is:
handler: function() {
saveAsDraftRequest(textFieldDraftOrTemplateName.getValue(), checkBoxSaveAsTemplate.getValue());
},
... if I wanted to invoke it there.
I'm trying to use jqTree to render a collapsible tree to display data from a MySQL database via an ASP.NET project using AJAX.
The Problem:
I can successfully get the string containing the jqTree formatted data (which is not JSON even though they say it supports it) back from my AJAX call. However, once I get it there it get rendered as a vertical string of characters. If I do a typeof call on the data, it says it's a string, even though it 'looks' like an object when visually inspected via console.log.
I have tried a number of different ways to get the string into an object, with varying results.
I'm using this in the code behind to return the manufactured string:
return sb.ToString();
The resultant string looks like this (notice no wrapping quotation marks):
[{label: 'PCBID: 350',children:[{label: 'TimeStamp: 04-Sep-14 10:30:23'},{label: 'User: DAVEG'},{label: 'PCBID: 350'},{label: 'Assembly Drawing: 41411'},{label: 'PCB Drawing: 10348'},{label: 'Vendor: SBE'},{label: 'PO Number: 98019'}]},{label: 'Serial Number: Not Assigned'},{label: 'Assembly Drawing: 41411'},{label: 'Last Test Result: None Found'}]
Which gets rendered like this in my div:
[
{
l
a
b
e
l
:
'
P
C
B
I
D
...and so on...
I know these are being rendered by jqTree because I can drag & drop them, they highlight when clicked on, etc., but instead of a tree view, I get a "dangling vine" view, not exactly useful.
If I simply take that same exact same string and declare it as a var inside the JS (not using the return value of message.d):
var data = [{label: 'PCBID: 350',children:[{label: 'TimeStamp: 04-Sep-14 10:30:23'},{label: 'User: DAVEG'},{label: 'PCBID: 350'},{label: 'Assembly Drawing: 41411'},{label: 'PCB Drawing: 10348'},{label: 'Vendor: SBE'},{label: 'PO Number: 98019'}]},{label: 'Serial Number: Not Assigned'},{label: 'Assembly Drawing: 41411'},{label: 'Last Test Result: None Found'}]
inside my JS code & use that, it displays perfectly and typeof thinks it's an object.
Working Example so you can see what I'm looking for:
JSFiddle
The Code on the JS side:
Here's the Success portion of my AJAX call with a bunch of commented out versions that don't work either:
success: function (message)
{
console.log("SUCCESS: Inside processEvent AJAX success call");
console.log(message.d);
console.log(typeof message);
console.log(typeof message.d);
var data = message.d;
//this method works, but not very useful as it's hard coded:
//var data = [{ label: 'PCBID: 350', children: [{ label: 'TimeStamp: 04-Sep-14 10:30:23' }, { label: 'User: DAVEG' }, { label: 'PCBID: 350' }, { label: 'Assembly Drawing: 41411' }, { label: 'PCB Drawing: 10348' }, { label: 'Vendor: SBE' }, { label: 'PO Number: 98019' }] }, { label: 'Serial Number: Not Assigned' }, { label: 'Assembly Drawing: 41411' }, { label: 'Last Test Result: None Found' }];
var data = $.getJSON(message.d);
//var data = { JSON.parse(message.d) };
//var data = ({}).valueOf.call($.parseJSON(message.d));
//var data = object.create(message.d);
console.log(typeof data);
console.log(data);
$(function ()
{
$('#tree1').tree({
data: data,
autoOpen: false,
saveState: true,
dragAndDrop: true
});
});
The Question:
So after all that, my question is, how do I take the string from the AJAX message.d and turn it into an object so that jqTree can use it to render the tree I'm looking for?
Working Code:
I've added back in some of the success user informing stuff (jGrowl) so don't let that throw you. The bit of code that fixed it is here: data = eval($.parseJSON(message.d));
success: function (message)
{
console.log("SUCCESS: Inside processEvent AJAX success call");
console.log(message.d);
//if it's a non query event, do this
if (DTO.eventData.eventType != "PCBID_query")
{
$.jGrowl("\nSuccessfully inserted a " + DTO.eventData.eventType + " event into the MySQL database.",
{ header: 'SUCCESS', theme: "pcb-success", life: 10000 });
}
//if processData was used for a PCBID query, process this code
if (DTO.eventData.eventType === "PCBID_query")
{
var data = {};
data = eval($.parseJSON(message.d));
$(function ()
{
//force reload of tree data
$('#tree1').tree('loadData', data);
$('#tree1').tree({
data: data,
autoOpen: false,
saveState: true,
dragAndDrop: true
});
});
}
I know the eval is evil & presents a security hole, however, this is all internal code that'll only be used on local servers & production floor computers so I think the risk is acceptable (as does my manager).
eval(data) would work in this case, but using eval() is usually a security issue, especially when getting data from public areas, such as user submitted SQL data.
The best solution would be to look for a real way to export JSON from your ASP.NET. Without knowing your code, a little googling shows there are solutions out there.
I have the following problem. I have a JS-file which has a handful of variables. Those I initialize in a function:
var currentYear;
var previousYear;
var urlQuarterDates;
var urlHalfYear;
var urlYear;
var urlMonth;
var urlProposalsSentAndReceived; //= '/Marketing/ListProposalsSentAndReceived';
var urlProposalsResponsibleMonth;
function initTabReportProposalsMonth(_currentYear, _previousYear, _urlViewProposal,
_urlQuarterDates, _urlHalfYear, _urlYear, _urlMonth, _urlProposalsSentAndReceived,
_urlProposalsResponsibleMonth) {
currentYear = _currentYear;
previousYear = _previousYear;
urlQuarterDates = _urlQuarterDates;
urlHalfYear = _urlHalfYear;
urlYear = _urlYear;
urlMonth = _urlMonth;
urlProposalsSentAndReceived = _urlProposalsSentAndReceived;
urlProposalsResponsibleMonth = _urlProposalsResponsibleMonth;
}
I have defined an event handler in the same JS-file:
function onPeriodSelect(combo, rec, i) {
var conn = new Ext.data.Connection();
var params = { };
switch(rec.get('myId'))
{
case _currentQuarter1:
conn.url = urlQuarterDates;
params.y = currentYear;
params.index = 1;
break;
}
reload(); //
}
The variables urlQuarterDates and currentYear are readily accessible. So far, so good...
I also have an ExtJs Grid with a data store which is declared inline:
var gridSentAndReceived = new Ext.grid.GridPanel({
title: 'Totaal',
autoHeight: true,
autoWidth: true,
store: new Ext.data.Store({
id: 'idStoreSentAndReceived',
proxy: new Ext.data.HttpProxy({ url: urlProposalsSentAndReceived,
timeout: 1800000 }),
reader: new Ext.data.JsonReader(
{
root: 'rows'
},
[
{ name: 'Status' },
{ name: 'nrOfProposals' },
{ name: 'TotalRevenueHardware' },
{ name: 'TotalRevenueYearly' },
{ name: 'TotalRevenueHours' }
]),
remoteSort: false
}),
frame: true,
iconCls: 'icon-grid',
columns: [
...
],
viewConfig: {
forceFit: true
}
});
The reload() function calls the load of the store of gridSentAndReceived. This generates an exception: the url is not defined at all. If I initialize the url right at its declaration (which is currently commented out' it works fine. When I browse using the debugger it shows that urlProposalsSentAndReceived is initialized. Still, it claims there is no URL.
This seems to be a scope problem, since variables are accessible from the event handler but obviously not elsewhere. Anybody knows how to fix it? The URLs are created using server tags and those cannot be put in JS files. I wouldn't enjoy putting them directly in the JS file as a text string. Is there a possible solution?
Update
I have tried a few more things but nothing works.
I have tried:
'beforeload': function (store, options) {
store.proxy.setUrl('/Marketing/ListProposalsSentAndReceived');
}
but even that didn't work. Still got the same exception. I really have no clue why that failed though, I took the code from the ExtJs Documentation under 'api'.
Now I have no choice but hardcoding the urls in my js-file though I'd very much prefer to use servertags and add them dynamically. Hopefully, one day, I'll find a solution rather than getting runtime errors when I change the location of a controller action.
This is not a scope issue. At the time you run your code urlProposalsSentAndReceived is not defined. If you set that variable via an event handler, the value is always set after gridSentAndReceived is initialized.