I have google chart on my page, but right now chart is drawn when Google Visualization library is loaded on the page load, and I have to give data dynamically through ajax, so is it possible to change the callback method, or is there any alternative?
I managed with it as i wanted, It can be helpful for someone, and if there is better solution for this please do suggest.
I removed this setOnLoadCallback function - google.setOnLoadCallback(drawChart);
This call back will call the drawChart() as soon as the visulization library is loaded,
(but I didn't wanted it, i wanted to call it on button click).
so I called drawChart(); function directily in the button click function code.
Then I faced problem with rendering the dynamic data to the datatable, when I was putting hard coded values, the chart drawn fine, but as I put variables instead of those values, it was unable to generate chart.
so i parsed the variable into integer by parseInt(doc_pre),
And it worked fine.
You can check this :
Jquery Charts
Related
I've been searching for an hour on how to nagivate within my Laravel website without refreshing the website (page layout), but I couldn't find a proper solution: one that not just loads the HTML, but actually replaces the content view within the layout.
This is my current dashboard:
So when clicking on a menu item within the blue area, I want the red content area to change without page refresh. What would be a scalable solution for this? I'm trying to follow the DRY (Don't repeat yourself) principle as much as possible.
Oh, please don't mark this topic as a clone of other topics as I've seen most of them but without proper solution. Hope anyone can help me out.
Changing a view without page load means we need to use the ajax techology. Vuejs is a frontend frameework the allows us to acomplish that easily with its axios library
I believe you can get this done by using jQuery load function -
$(function () {
$("#menu_option_a").on("click", function () {
$("#dashboard").load("View1.html");
});
$("#menu_option_b").on("click", function () {
$("#dashboard").load("View2.html");
});
});
The situation is I need to load data for a long time, and I need to show a loading icon when loading, but it seems d3 stop my jquery code. My loading icon only display when the calculateAroundCenter function finished, I think it is because the jquery execute after the d3 scope end.
$("#loadingBox").show()
calculateAroundCenter();
so how to show the icon? Like $.timeout in angularjs, I wish you know this js.
Thanks a lot!
D3 doesn't provide anything for this, but you can easily make your own as follows:
showLoadingIcon();
d3.json(url, function(error, data) {
// do something with the data
removeLoadingIcon();
});
I've used this technique here.
I am using Sencha ExtJs grid 4.2 . I am using a Expander plugins for my grid and try to load data under expanded region from Ajax. Right now I am using this code to show data on expanding.
plugins: [{
ptype: 'rowexpander',
rowBodyTpl: new Ext.XTemplate(
'<br><img height="31" width="32" src="../upload/patient/thumb/{patient_image}">',
' <p><b>{fname}, {lname}</b></p>',
'<br> {accordian_view}'
)
}],
Here you can see that data is pre populated, but my requirement is to load data on expanding. I am trying hard to find the event or process to do it. But still no luck. If anyone have any idea please share.
Thanks in Advance
You might check out the expandbody event on the RowExpander plugin: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.plugin.RowExpander-event-expandbody
This event passes not only the row's bound record, but also the expanded element, so you could:
Request data via Ext.Ajax.request({...})
Handle response
Add content to expanded row
One thing to keep in mind, however, is the async nature of this approach. That is, the row is going to expand immediately, regardless of how long the subsequent request takes to come back. So it would probably be a good idea to do something like this instead when handling the expandbody event:
Add "loading" text/icon/whatever into expanded row area
Make Ajax request
Handle response
Replace loading text/icon/whatever with the data returned from the Ajax request
It's likely someone has already done so, but you could also (and I would highly suggest it) wrap this process into a custom plugin of your own that extends the RowPlugin. That way you could use it elsewhere in your app for any grid. If you end up creating a custom plugin, please share it with the community!
EDIT: A quick Google revealed a number of custom plugins that do precisely this. For example: https://github.com/nickbretz/Ext.ux.AsyncRowExpander/blob/master/AsyncRowExpander.js
So I have an asynchronous call to a controller in c# to obtain say 100 objects.
After this is done I load it into my html page and through a parameter in the link I intend to scroll to it.
So for instance: localhost/page.aspx?scrollToId=85
I do this as follows:
var selectedItem = $("tr[data-scrollToId='" + selectedItemId() + "']");
$('body').scrollTo(selectedItem );
selectedItem.fadeOut().fadeIn();
This works when I have static elements but because of the asynchronous call the dom is loaded way later and it doesnt scroll to it. (It does fade out and in again).
I have been looking at the afterRender method of knockout itself but this too didn't give any change.
Is there a way to wait for the actual dom to render all elements and only after this is done, scroll to it?
Many thanks in advance.
The issue was actually that afterRender only works on templates. I moved my view to a template then afterRender works.
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.