pranjal-goswami / multifact-pivottable

A JavaScript plugin for PivotTable.js. It renders multiple aggregations simultaneously with added configurations for rendering beautiful tables http://pranjalgoswami.in/multifact-pivottable/examples/index.html
MIT License
18 stars 13 forks source link

Cannot run Multifact-Pivottable with Jupyter notebook #17

Open VanNhan2012 opened 2 years ago

VanNhan2012 commented 2 years ago

This plugin is very great but when I run the sample 1_multiple-aggregations with Jupyter notebook. It return an empty pivot. I'm new to this. Would you please help to advice. Thanks a lot.

Below is my code : from pivottablejs import pivot_ui from IPython.display import HTML from IPython.display import IFrame import json, io import pandas as pd import numpy as np TEMPLATE = u""" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Multifact-PivotTable
Back to Examples

Multiple Aggregations




Made with by pranjalgoswami

"""

df = pd.read_csv('data/medium-data.csv')

def pivot_cht_ui(df, name, url="", width="100%", height="500",json_kwargs='', **kwargs): print(name) outfile_path = name + '.html' with io.open(outfile_path, 'wt', encoding='utf8') as outfile: csv = df.to_csv(encoding='utf8') if hasattr(csv, 'decode'): csv = csv.decode('utf8') outfile.write(TEMPLATE % dict(csv=csv, kwargs=json.dumps(kwargs),json_kwargs=json_kwargs))

return IFrame(src=url or outfile_path, width=width, height=height)

And this is the result : image

codythegreat commented 2 years ago

@VanNhan2012 Looks like you are using "data/medium-data.csv" as your data source. Have you tried embedding your data in the HTML template just to test? For instance:

var data = [
  [FIELD1, FIELD2, FIELD3],
  [VALUE1, VALUE2, VALUE3],
  ...
  [VALUE1, VALUE2, VALUE3]
]

If you get results with an array of data like above then it might be a problem with your data import.

Also, does Jupyter notebook have some sort of JavaScript console that logs errors? That would be very helpful in solving this issue.

VanNhan2012 commented 2 years ago

@VanNhan2012 Looks like you are using "data/medium-data.csv" as your data source. Have you tried embedding your data in the HTML template just to test? For instance:

var data = [
  [FIELD1, FIELD2, FIELD3],
  [VALUE1, VALUE2, VALUE3],
  ...
  [VALUE1, VALUE2, VALUE3]
]

If you get results with an array of data like above then it might be a problem with your data import.

Also, does Jupyter notebook have some sort of JavaScript console that logs errors? That would be very helpful in solving this issue.

Dear Codythegreat I can see the errors now :
1_multiple-aggregations.html:1
Access to XMLHttpRequest at 'file:///C:/Users/vnhan/OneDrive%20-%20Marvell/Desktop/project/Data_management/dashboard/multifact-pivottable-master/multifact-pivottable-master/examples/data/medium-data.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted. GET file:///C:/Users/vnhan/OneDrive%20-%20Marvell/Desktop/project/Data_management/dashboard/multifact-pivottable-master/multifact-pivottable-master/examples/data/medium-data.csv net::ERR_FAILED _readChunk @ papaparse.min.js:6 _nextChunk @ papaparse.min.js:6 stream @ papaparse.min.js:6 t @ papaparse.min.js:6 (anonymous) @ 1_multiple-aggregations.html:84

VanNhan2012 commented 2 years ago

It seems that the chrome do not allow to load local file so I cannot load

codythegreat commented 2 years ago

@VanNhan2012

You can actually take the source code and embed it inside an HTML script element like so:

<script type="text/javascript">
  // content from "multifact-pivottable.js" goes here
</script>

It'll be > 1000 lines vs importing it as a local file but this did work for me as I had a similar issue.