environment issues: ipyvizzu-story implementation in Flask

[rakshasha-medhi]

I want to share how I implemented ipyvizzu-story in Flask, please note since majority of the code is very similar to the complex template in vizzuhq website, the one I write here is how to implement in Flask and how to get the output in the HTML page:

## Starts with
from ipyvizzu import Data, Config, Chart, Style
from ipyvizzustory import Story, Slide, Step
import pandas as pd

DATA = Data()
df = pd.read_csv('filepath/filename')

DATA.add_data_frame(df)

## Placeholder where you set the Styling and add slides to the Story. This part of the code is exactly the same with the example in vizzuhq website

## Ends with
story.export_to_html('filepath/mystory.html')    # This is the most important line of code

In the HTML file for your Flask website, simply place this HTML tag:

<div class="container" id="timeseries">
    <iframe src=" {{url_for('static', filename='mystory.html')}}" seamless></iframe>
</div>

the id = 'timeseries' is just me naming the CSS styling for the iframe container. It can be named however you want.

There is actually a more efficient method to call the html without the need to export to html. to_html() enables this however I cannot set a custom Style when using this to_html() method as it produces blank page. So if I use default Style, the chart will appear correctly as expected.

Below is the code when using to_html() method:

## Ends with
vizzu = story.to_html()

return render_template(vizzu = vizzu)

The code for HTML file for the Flask website:

<div class="container" id="timeseries">
    <iframe src="data:text/html, {{ vizzu }}" seamless></iframe>
</div>

Hope this helps, cheers!

[petervidos]

Thanks a lot @rakshasha-medhi!

[veghdev]

@rakshasha-medhi Thanks, based on your help I have placed a Flask example on the documentation site