Home » excel » javascript – How to display excel chart in browser?

javascript – How to display excel chart in browser?

Posted by: admin April 23, 2020 Leave a comment

Questions:

I have an excel sheet containing excel chart. I am able to display entier excel sheet on browser using an iframe. However, I only want to display the chart present inside the excel sheet on the browser.

How do I achieve this? I see that it needs Javascript + ActiveX APIs. I tried but couldn’t get it to work.

Please see code given below. It doesn’t work as I am not able to set data attribute of “object” tag dynamically. It doesn’t allow.

<object id="objFrame" data="" type="application/vnd.ms-excel"></object>

<script>
var Excel = new ActiveXObject("Excel.Application"); 
Excel.Visible = false;
document.getElementById("objFrame").data  = Excel.Workbooks.Open("Test.xls").Sheets("Chart1");
Excel.Quit();
</script>

Is there any other way to achieve this? Please post sample code. Thanks.

How to&Answers:

You should check this tool out, I believe this will achieve exactly what you’re looking for, without having to load the memory bloat/leak known as the Office COM server, into browser memory, and feel like your violating security best practices.

Answer:

SpreadsheetGear for .NET provides the ability to load Excel workbooks, plug in values, calculate and then render a chart (or a range of cells which contain a chart) on the server which can then be displayed in the browser. You can see live ASP.NET (C# and VB) samples here.

Disclaimer: I own SpreadsheetGear LLC

Answer:

You might want to check the Funfun Excel add-in. Basically, Funfun allows you to use JavaScript directly in your Excel as the image below shows.

enter image description here

Here I have a sample chart which is plotted using HighChart.js with data in the spreadsheet. You could see the chart at the right side of your Excel. You could then click the button at the left-top corner of the chart to open the chart in default browser. Which looks like this.

enter image description here

Also, if you want to show both the spreadsheet and the chart in the browser. You have two option.

The first is to use Excel online. Then you have the same thing on your browser as in your local Excel.

enter image description here

As for the second option, Funfun also has an online editor in which you could explore with your JavaScript code alongside with your data.

enter image description here

You could check the detailed code of this example on the link below.

https://www.funfun.io/1/edit/5a439b96b848f771fbcdedf0

Disclosure: I’m a developer of Funfun