I am using highcharts to create charts on my site, it works fine. how i display "loading" message until the chart loading on my page. data loaded dynamically from rails array object not a url.
You haven't specified loading option in your highchart configuration. To use showloading() you do need to have this configuration defined. It uses some default time duration to show loading screen. here a complete option url http://api.highcharts.com/highcharts#loading.hideDuration that might help you.
Related
I am using jspdf-autotable for generating pdf report. I want the header text will only be shown for the first page but not working when setting this option showHead: 'firstPage'
For example: Here is a jsfiddle
Can anyone help me?
The showHead option is for the table header and will not affect the hooks. If you want to have the same behavior for the hooks you can check the data parameter data.pageNumber and conditionally draw your content base on it.
I am using ASP.NET MVC with Kendo UI. I want to export grid to an HTML page and print it. Online help is not available. What have your done previously. Thanks in advance.
Did you find a solution to this? I'm looking at the same thing currently and have found a couple of options:
Firstly Telerik have a Javascript example which renders your grid to a new print window, see https://docs.telerik.com/kendo-ui/controls/data-management/grid/print-export
Just alter the name of
var gridElement = $('#grid'),
to your own existing grid name and omit the function:
$(function () {
var grid = $('#grid').kendoGrid({
...
};
};
However, this only renders what is currently displayed on screen (so if your grid has multi pages it may not be suitable).
The second option that I'm exploring is exporting to pdf (and then user can then print that if they wish). There are example of this at
https://demos.telerik.com/aspnet-mvc/grid/pdf-export and https://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export
This does have multi-page printing support (although I haven't got it to work just yet, they have examples which show it working). They do mention potential problems if you have a lot of data as it needs to load all the data on the client side (even if you have paging). There are some example projects to work on data server side in the above links.
In the end our requirements didn't need the paging but I've gone with the pdf option as that delivers quite a nice layout that you can template further.
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
On my webpage, after the user presses a button, they are directed to another page which displays charts (using Chart.js). However, before the page is loaded I first fetch the data used to plot the charts from different server and store them into an ActiveRecord database with rails. However, this takes considerable time as there's a lot of data to be fetched.
So I am running the data fetching using a different thread (via Thread.new do). However, now I'm trying to solve the following problem:
When I am still fetching data to populate the database, I would like to have a loading animation (to indicated data is being fetched) and finally display the chart when all the data has been fetched.
How can I determine when my thread has finished running? And how can I tell my view that the thread has finished and should display the chart?
I've looking into gems such as Sidekiq, but they seem overkill for simply fetching data from a server.
How should I go about doing this?
There is no simple way to make view interact with controller, because view is being executed on client side, but controller is executed on server's.
What you could do is to use some jQuery code to show animation after user press the button, but before next document is loaded (without any progress being shown).
Put div with animation element (example) to you submit page like this:
<div class="progress">
some .gif here
</div>
<div class="your_content">
all other code
</div>
Add code like this to your application.js file
function showProgress() {
$('.your_content').hide();
$('.progress').fadeIn("slow");
}
$(document).ready(function () {
$('.progress').hide(); //hide gif on page load
$('.your_button_class').on('click', showProgress); //and show it after clicking your button
});
Other working solutions will include relatively complicated AJAX code.
Also consider using caching for both - model and view.
Perhaps you could use a DelayedJob and use long-polling or interval polling to determine if the job is finished. Once the job is finished it is removed from the DelayedJobs table so all you need to do is check if it exists. On the client-side you can initially show the animation then when the long-polling or interval polling response says that it is finished, disable the animation and show the chart.
I want to achieve print functionality such that user can print out the web form and use it as paper form for the same purpose. Of course I do not need all the web page header and footer to be printed, just content of a div which take most of the page. I did play around with media print css and menage print result to look almost as original page. But the I tried to print it in another browser(Chrome) and it is all messed. (before I tried Mozilla).
For the web form I user css framework Twitter Bootstrap and I had to override its css (in print media) for almost each element individually to get some normal look in the print result.
My question is is there some way (framework/plugin) to print just what you see on the page, maybe as an image or something?
Any other suggestions are welcome.
Thanks.
If you are familiar with PHP you can try the PHP class files of TCPDF or those of FPDF.
Or there is also dompdf which renders HTML to PDF, but this will include more than just the information of one div.
And for further info here is a post on Stack where users are discussing which they think is best.