To Display Excel Spreadsheet with Charts on Websites - javascript

Is there anyway to display Excel Spreadsheet with charts (Live, does not need to be editable) on Websites?
Currently I have some Excel reports with charts. I am building a website to display these spreadsheet data. The spreadsheet doesn't need to be editable. But I want it to be displayed right away, instead of a link downloading it locally every time and open it.
Is there anyway easy way I can do this?
Some methods that I have researched but would not work in my case:
Google Doc
Saving as html output in excel (I want it to be automatically. All the spreadsheet generation/ HTML code creation would be in linux)
Sharepoint
Thanks!

I would suggest to utilize Excel Services for that purpose.
Prerequisite: Excel Services service application has to be configured
Prepare excel data
Assume the following excel file
that contains the following items in the workbook:
table (how to Create or delete an Excel table in a worksheet)
chart
Important:
Before uploading file into SharePoint library, go to File -> Browse View Options -> choose Items in the Workbook as demonstrated below. Then save file and upload it into SharePoint Documents library.
Once the excel file is uploaded into Documents library the chart could be rendered in browser using the following endpoint:
Url: https://contoso.sharepoint.com/_vti_bin/ExcelRest.aspx/Documents/sample.xlsx/Model/Charts('Chart1')
Method: GET
Results
Display chart on page via ScriptEditor/ContentEditor web part
Content: <img src="/_vti_bin/ExcelRest.aspx/Documents/sample.xlsx/Model/Charts(%27Chart1%27)" alt=""/>
References
Using the Excel Services 2010 REST API

Related

Django HTML template to pdf consisting JS (Vue.js) charts and graphs

I am trying to generate a PDF from Html page. The Html includes various data returned from django view and also from Vue.js
I tried using 'Weasyprint' but it only generated data that returned from Django but not the charts and graphs that were generated from Vue. What will be an easy way to generate all the data as well as the graphs in PDF from the Html page.
To generate a PDF with those charts, you will need to render the web-page first (in a browser) in order to run the client-side code and use that "result" to generate the final PDF.
It will depend on where you want to generate that PDF (on the server or on the client). In case it is on the server, one possible solution is to use phantomJS (or other similar projects) to render and save the result in a file with render().

I want to convert an huge excel workbook (with multiple tabs) and few columns and rows hidden on WEB Page

When I tried saving the excel sheet in HTML and displaying I've got few problems:
The numbers in each cell are distorted
Hidden rows and columns are displayed (I want them to keep hidden)
Top rows of my Excel sheet are freezed, I want them to keep freezed.
The Sheet is updated daily and I want the changes to be reflected in Web as well.
Could you suggest a way other than saving excel sheet in HTML? Any other way I could start this project?
P.S: I hold the knowledge of HTML, CSS, JavaScript.
Do I need to learn any additional skill set to get pull this project?
If you are running IIS or can otherwise run .NET code on your server, you can use the Open XML SDK. There are plenty of examples of using the SDK. Apparently, it even works with Mono if you're using Apache.
If not, if you've got some machine that can get to the Excel file and copy files to your web server and from which you can run a scheduled task, you can schedule a task on that machine that using the Open XML SDK to translate the Excel file to HTML, then upload that HTML to the server.
It doesn't have to be a complete page; it can just be the parts of the HTML you need. You can then have some JavaScript on the page that fires off an AJAX request to get the HTML file. This is true regardless of whether your serving content dynamically generated by code running under IIS or a static file generated by code elsewhere and pushed to the server.
You might have something like:
<!-- page where the spreadsheet should go -->
<div id="put-excel-worksheet-here"></div>
Then:
$.ajax({
url: "/path/to/converted-data-partial-html.html"
, success: function(excelHtml) {
$("#put-excel-worksheet-here").append($(excelHtml));
}
});
And your ASP.NET page response or scheduled task would convert your Excel file to something like <table><thead><tr><th id='column-one-th'>....
Either way, I'd recommend you work with a copy of the file rather than the original, since I've found Office can get a little finicky with files being open in two places at once.
As for freezing the top rows, here's a fiddle with an example.
Good luck!
edit: As an alternative to putting millions of cells worth of HTML onto a single page, it might make sense load the Excel data into a relational database like MySQL or Microsoft SQL Server and do some custom web development to pull the data out of that with pagination and filters and other nice reporting features.
If the data in the Excel file is coming OUT of another system, you might be able to set up a system-to-system integration. If not through an integration, though, the Open XML SDK is how I'd do it. You don't have millions of rows to put up per your comments above, so this suggestion doesn't make sense.
edit: Oh, and I recommend your scheduled task run during a time when people aren't likely going to be using the system. If, for example, your users are all in a few adjacent time zones, have the task run at 3:00 AM in the Eastern-most time zone.

Want to Develop a Web Page which will Upload and Delete File from Google Drive

I am trying to build an application which will implement following functionalities
It will displays the filenames in my google drive account
Each file has a Delete File button that can delete the file from my google drive account
Page has a Add File button that lets me upload a new file to my google drive account
Each file has a View File button. If the file is a PDF, display the PDF file in the browser using any open js library of your choice. If the file is not a PDF, download the file to the computer.
Please suggest code or any link or api.
It's all possible with Google Drive REST API. It is well documented and there is a lot of guides and wide variety of languages you can use.
I think the most appreciate for you will be JavaScript. Link to JS quickstart

Change Excel web app source on click in sharepoint 2010

I am working with Share Point webapp 2010 and I need to visualize KPIs on my webpage. I am using excel web access, but I need to change excel source when person click on different links. I am very new to sharepoint
In this case I used HTML web form to add links in the webpage, than in excel web access part in the dropdown portion click on connections->Html web form, It will show all the name attributes of your HTML web form. Select one which you want to use for you application.

how to embed a live excel spreadsheet in html

hi i would like to know how i can embed a excel spreadsheet in a web page and change the excel numbers on the hosted file and this in turn automatically changes the webpage sheet?
would like to know if there is a jquery, javascript, css etc code to help me out
for example, book1.xls will be uploaded to the server and index.html will reflect book1.xls as a table in it. when i update book1.xls, it should automatically show in index.html the changed cells.
thanks in advance
The simple way to actually connect to an XLS is through VBScript, but your server will have to support it (which most do).
Another way would be add an ODBC to your servers connectors pointing to your XLS or MDB or whatever Microsoft data file you choose and use JavaScript or any number of languages to connect to it, retrieve data, make changes, etc. The downside is that you must have Administrative rights to the computer hosting the file. You can use a homecomputer to use as server for that file only for instance and link it to your website, but it will affect loading speeds. This will however require you to take a closer look at your home internet security...!!!...but will enable you to make 'live' changes without going to your website. This method is often used for webshops and online catalogues, places where data can change on a daily basis but a database server is undesirable.
The simplest and easiest way is as mentioned before the use of GoogleDocs, but that will require conversion of the document. You won't be using your XLS as datafile. The downside here is that if you make any changes offline (not through the website) the changes will also not be visible, because you'll be editing a completely different file. So you'll need to convert and upload it to GoogleDocs each and every time.
As you can see the method used greatly depends on how often you plan on updating the data, how much traffic you expect and how secure you want it to be.
A "live" spreadsheet can be shown in a web page via an iframe containing a Google Doc spreadsheet. You cut 'n paste the iframe markup from Google Docs and drop it into your web page. The spreadsheet is editable in GDocs. The iframe view can be set to automatically update when the ss is edited.
Perhaps, this is too bland a solution. But it works. I use it all the time.
I doubt you can do that directly from an .xls file, but if you save your Excel file as .csv, you can read a .csv file via jQuery.
There's a plugin here that displays data from a csv file as a table: http://plugins.jquery.com/project/csv2table
The same/similar question is also asked in these posts:
Read Excel data with JQuery
How to parse an excel file in JavaScript?

Categories