14

My friend asked me to make for a simple application to generate charts (bar, curves) from an Excel file. I opted to use JavaScript as a language since I know already the powerful chart.js. However before using chart.js, I have to gather data from the Excel file. So how to read an Excel file via JavaScript?

After some research I have managed to do this with Internet Explorer with (using ActiveX), but I need it to work across browsers.

4
  • 1
    I think it's going to be easier for you to explain to him how to set-up a server than to do this in JavaScript honestly. Just tell him to download XAMPP, couldn't be easier than that really... Or maybe you can just export to csv. Commented May 19, 2013 at 0:44
  • Doing this in Javascript borders on impossible. Excel files are very complex files and getting the data out of them to display outside of Excel would be very complicated. If Excel is present on the client machine, you can just download the Excel file and open it in Excel and then show charts within Excel. Commented May 19, 2013 at 0:54
  • Whats wrong with the charts in excel? Unless they specifically asked for a web based chart (if they dont have a web-server, probably not?) using the charts in excel would be a whole lot simpler. Commented May 19, 2013 at 10:56
  • the probleme he'd use Excel only for typing data and refresh the browser, honestly if I cant fix this issue with Chrome or FF I'll teach him how to use WAMP or XAMPP and php will do the rest with PHP-ExcelReader and sending a JSON to javascript client-side which is ready to draw charts Commented May 19, 2013 at 16:31

4 Answers 4

10

There are JavaScript libraries which allow XLS & XLSX to be parsed in pure JavaScript. I tested with Chrome (albeit on Windows) and it worked fine.

Sign up to request clarification or add additional context in comments.

Comments

4

Here is another perspective on this problem, instead of reading an Excel file with JavaScript, you could directly use JavaScript in Excel with the help of the Funfun Excel add-in. Basically, Funfun is a tool that allows you to use JavaScript in Excel so you could use libraries like Chart.js to plot chart from the data in the spreadsheet.

Basically, what you need to do is

1). Insert the Funfun add-in from Office Add-ins store

enter image description here

2). Create a new Funfun or load a sample from Funfun online editor

enter image description here

3). Write JavaScrip code as you do in any other JavaScript editor. In this step, in order to directly use the data from the spreadsheet, you need to write some JSON I/O to make Excel cell reference. The place this value is in Setting-short But this would be just several lines. For example, let's assume we have some data like below in the spreadsheet. The Average hours is in cell A1.

Average hours    Jan    Feb   Mar    Apr
Baby Jones       93.5   81    94.5   95.5
Joanne Jones     91.5   90    88.5   85.5

In this case, the JSON I/O value would be:

{
    "months": "=C6:G6",
    "manager1": "=C7:G7",
    "manager2": "=C8:G8"
}

You could check the Funfun documentation for more explanation.

4). Run the code to plot chart

Here is a sample chart that I made using JavaScript(Chart.js) and Excel data on Funfun online editor. You could check it on the link below. You could also easily load it to your Excel as described in Step2.

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

Disclosure: I'm a developer from Funfun.

Comments

1

There is a Chart.js plugin chartjs-plugin-datasource that makes it easy to load data from Excel files.

Let's suppose you have an Excel file as shown below, and it is saved as mydata.xlsx in the same directory as your HTML file:

+---------------+---------+----------+-------+-------+------+------+------+
|               | January | February | March | April | May  | June | July |
+---------------+---------+----------+-------+-------+------+------+------+
| Temperature   |       7 |        7 |    10 |    15 |   20 |   23 |   26 |
+---------------+---------+----------+-------+-------+------+------+------+
| Precipitation |     8.1 |     14.9 |  41.0 |  31.4 | 42.6 | 57.5 | 36.0 |
+---------------+---------+----------+-------+-------+------+------+------+

Include Chart.js, SheetJS (js-xlsx) and chartjs-plugin-datasource in your page:

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/xlsx.full.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"> </script>

<canvas id="myChart"></canvas>

Then, specify mydata.xlsx in your script.

var ctx = document.getElementsById("myChart");
var chart = new Chart(ctx, {
    type: 'bar',
    data: {
        datasets: [{
            type: 'line',
            yAxisID: 'temperature',
            backgroundColor: 'transparent',
            borderColor: 'rgb(255, 99, 132)',
            pointBackgroundColor: 'rgb(255, 99, 132)',
            tension: 0,
            fill: false
        }, {
            yAxisID: 'precipitation',
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'transparent'
        }]
    },
    plugins: [ChartDataSource],
    options: {
        scales: {
            yAxes: [{
                id: 'temperature',
                gridLines: {
                    drawOnChartArea: false
                }
            }, {
                id: 'precipitation',
                position: 'right',
                gridLines: {
                    drawOnChartArea: false
                }
            }]
        },
        plugins: {
            datasource: {
                url: 'mydata.xlsx'
            }
        }
    }
});

Comments

-1

i think without the use of ActiveX you cant read the excel file..I am not sayin that you cant read excel file file without ActiveX may be there is a way ,but i dont know that way so if you want to read using Activex then here is the code you can use for reading the excel file

<input type="button" id="btnSubmit" onclick="readdata(1, 2)" value="Submit" />
<script>
var xVal = 1;
var yVal = 2

    function readdata(x,y) {
        x = xVal;
        y = yVal;
        try {
            var excel = new ActiveXObject("Excel.Application");
            excel.Visible = false;
            var excel_file = excel.Workbooks.Open("D:\\Test.xls");// alert(excel_file.worksheets.count);
            var excel_sheet = excel_file.Worksheets("Sheet1");

            for(i=0;i<5;i++)
            {
               var data = excel_sheet.Cells(i,2).Value;
                drawWithexcelValue(data);
            }


        }
        catch (ex) {
            alert(ex);
        }

</script>

it will run only in IE 9 and above ,and you have to activate activeX functionality from the settings ..

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.