CODEWITHSUNDEEP
javascriptexcelchartsspreadsheetchartist.js
Sivvio
Sivvio

Reputation: 297

is possible to feed data to chartist.js from an excel sheet?

I am trying to build an application that takes data from an excel sheet and transforms it into a graph. The library I intend to use is chartist.js. If the excel sheet is manipulated that should recreate a graph without refreshing the page. I want to ask the following:

  1. Is this a good tool for the intended purpose? if not, what are good alternatives?
  2. How would I take the data directly from excel using javascript and use it to feed the chart? Can it be done only through the use of JSON or other technologies such as angular.js? if the data changes every minute or so, wouldn't that be very expensive to do?
  3. If it's possible in anyway, could you please provide an example for me using any chart shown in the documentation?

Thanks in advance.

Upvotes: 1

Views: 592

Answers (1)

nicolas dejean
nicolas dejean

Reputation: 431

There is a useful tool that exists that is pretty similar to what you want to build. It's an Excel add-in called Funfun, that also hosts an online editor with an embedded spreadsheet.

Here is a chart I made with chartist.js. As you asked, it is a chart shown on the first page of the chartist.js website under RESPONSIVE CHARTS CONFIGURATION:

https://www.funfun.io/1/#/edit/5a69b5ddfa7bd43614770df9

To make the transition from an excel spreadsheet to javascript I indeed use a JSON file, it is the short file under Settings, I select the colunms I want from the spreadsheet like so:

{
    "data": "=A1:B7"
}

And I store it in local variable in the script.js file, like so:

var label = [];
var values = [];

for (var i = 1; i < $internal.data.length; i++)
{
  label.push($internal.data[i][0]);
  values.push($internal.data[i][1]);
}

This is optionnal, you can directly add the data to the chart library but it is cleaner.

You can of course change the value of the selected data and the chart will change instantly.

You can then load your chart in Excel by pasting the URL in the Funfun Excel add-in. Here is how it looks like with this example:

final

To answer your question: is this a good tool for the intended purpose ?

I think Javascript is a great language for data processing and data visualization, and for people wanting to build dynamic and interactive charts in excel there are powerful libraries with javascript such as plotly.js(for 3D charts) or Highcharts.

And this tool is the bridge between excel and other languages like javascript. This could be an alternative to VBA.

Disclosure : I’m a developer of Funfun.

Upvotes: 1

Related Questions