CODEWITHSUNDEEP
javascriptexcelvbaopenxmlhighcharts
Aodh
Aodh

Reputation: 682

Excel charting to JavaScript

Can anyone suggested approaches to creating JavaScript charts from an MS Excel chart such that colours and other formatting options are preserved? Ideally I could create a HighCharts char or something that would look at least close to the one created by a user in Excel. At the moment, I'm looking into the Open XML / Drawing ML file formats or possibly VBA to create a translation layer to some JavaScript charting lib e.g. HighCharts.

Note it's not just a case of exporting as a simple CSV file, the key consideration here is preserving the chart formatting..

Thanks for any suggestions,

A,

Upvotes: 3

Views: 1318

Answers (2)

nicolas dejean
nicolas dejean

Reputation: 431

I can suggest an add-in called Funfun, you can code some Javascript, HTML and css in Excel. It hosts an online editor with an embedded spreadsheet to make the transition easier to Excel.

I'm going to take a bubble chart example from Highcharts and change the data, here is what I get:

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

I store my data in the embedded spreadsheet, and thanks to a json file I can use it in my javascript code:

{
    "data": "=A1:E16"
}

I format my data in my script.js so I can directly load it in Highcharts (for numbers you must convert your data into floats or int):

var data = [];

for (var i = 1; i < $internal.data.length; i++)
  data.push(
    {
      x: parseFloat($internal.data[i][2]),
      y: parseFloat($internal.data[i][3]),
      z: parseFloat($internal.data[i][4]),
      name: $internal.data[i][1],
      country: $internal.data[i][0]
    }
  );

And you add your data in the chart:

series: [{
        data: data
    }]

You can of course change the settings of your chart (color, text, font, type of chart...).

Once you are finished, you can directly load it in Excel by pasting the URL in the Funfun add-in. Here is how it looks like with my example:

final

I used Highchart for my example, because you mentioned it but you can of course use many other powerful libraries like chart.js and plotly.js (for 3D charts).

Disclosure : I’m a developer of Funfun.

Upvotes: 2

dominicbri7
dominicbri7

Reputation: 2599

JavaScript? This would be easier with server-side PHP plug-in's, unless the file is loaded client-side.

Please give more information about your situation

Upvotes: 0

Related Questions