CODEWITHSUNDEEP
javascript
ARoy
ARoy

Reputation: 181

draw a linechart by reading excel data from excel file using javascript

Here is my excel file as follows==

Data

20.248602 18.54032 18.254036 15.217833 13.194518 17.521723 17.78833 24.018597 18.401508 24.46464 20.752457 22.570473 17.870035 22.474863 20.783422 24.075064 17.72947 20.202723 16.776543 19.087515 7.232176 8.508578 7.5457883 10.0660925 13.344348 5.5784864 5.3469315 17.087952

I'm trying to read exceldata from excel file and using those data i want to draw a line chart using javascript.but i can't figure it out how will i use the data to draw a chart even though i read the exceldata from excel sheet without using ActiveXObject.Here is my code==

function Upload() 
{  
    var fileUpload = document.getElementById("fileUpload");  
    var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.csv|.txt)$/;  
  if (regex.test(fileUpload.value.toLowerCase())) 
        {  
            if (typeof(FileReader) != "undefined") 
            {  
                var reader = new FileReader();  
                reader.onload = function(e) 
                {  
                    var table = document.createElement("table");  
                    var rows = e.target.result.split("\n");  
                    for (var i = 0; i < rows.length; i++) 
                        {  
                            var row = table.insertRow(-1);  
                            var cells = rows[i].split(",");  
                            for (var j = 0; j < cells.length; j++) 

                            {  
                                var cell = row.insertCell(-1);  
                                cell.innerHTML = cells[j];  
                            }  
                        }  
                    var dvCSV = document.getElementById("dvCSV");  
                    dvCSV.innerHTML = "";
                    dvCSV.appendChild(table);

                //  dvCSV.appendChild("Workdate \t Data \t Status");  

                }  


            reader.readAsText(fileUpload.files[0]);  
        } 
        else 
            {  
                alert("This browser does not support HTML5.");  
            }  
} 
    else 
    {  
        alert("Please upload a valid CSV file.");  
    }  
} 
</script> 
<body>
<input type="file" id="fileUpload" />
<input type="button" id="upload" value="Upload" onclick = "Upload()" />
<hr />

<div id="dvCSV">

</div>

Please can anyone help me out...

Upvotes: 1

Views: 527

Answers (1)

Chuan Qin
Chuan Qin

Reputation: 675

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.

First of all, you need to arrange your data a little bit to look like below.(I only took 10 of your data points as example)

enter image description here

Then, here are some steps to what you need to do to use JavaScript in Excel.

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. If you creat a new funfun, you could write your own JavaScript code. In this case, I've already made a sample in Funfun online editor using JavaScript and Chart.js. You could directly load the code from the URL below.

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

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 this case, the JSON I/O value would be:

{
    "data": "=B2:K2",
    "label": "=B1:K1"
}

You could check the Funfun documentation for more explanation.

4). Run the code to plot chart

Have fun:)

enter image description here

Disclosure: I'm a developer of Funfun.

Upvotes: 2

Related Questions