plotly / dash-alternative-viz

Dash components & demos to create Altair, Matplotlib, Highcharts , and Bokeh graphs within Dash apps.

dash-alternative-viz

In Dash's built-in dash_core_components library, the dcc.Graph component uses standard Plotly figures.

Dash’s component plugin system provides a toolchain to create Dash components from any JavaScript-based library. dash-alternative-viz is a proof-of-concept Dash component library that provides Dash interfaces to Altair, matplotlib (or any compatible system like Seaborn, Pandas.plot, Plotnine and others!), Bokeh (with or without HoloViews), and HighCharts.

usage.py demo

Looking for something more generic?

The following components and component libraries are all MIT-licensed and free for you to use, just like Dash and Plotly:

• For general images (SVG, PNG, JPG, GIF), see the html.Img component.
• For XSS-safe Python interfaces for HTML, see dash_html_components
• For raw HTML or SVG strings, see dash_dangerously_set_inner_html
• For interactive data tables, see dash_table
• For interactive network graphs, see dash_cytoscape
• For interactive controls & plotly graphs, see dash_core_components
• For bioinformatics components including circos, dendrograms, ideograms and more, see dash_bio
• For interactive image editing and annotation, see dash_canvas
• For technical components for data acq and engineering hardware, see dash_daq

Having trouble choosing which graphing library to use?

Of course we’re biased, but we think that the Plotly library has you covered for almost any use-case. It’s in active development with dedicated full-time staff, and here are some new features ICYMI:

• Easy one-liner grammar-of-graphics-inspired dataframe plotting with Plotly Express
• Fast static image export with plotly.io
• Jupyter Widget support with FigureWidget
• A free JupyterLab Chart Editor
• JupyterLab support
• Datashader support

dash-alternative-viz's Issues

HighCharts : No callbacks triggered on User interaction.

The options property doesn't trigger the callback when the user interacts with HighCharts.

Is it because the HighChart.react.js only has a render( ) event and no onChange() event?
This onchange() event should in some way implement a setProps in order to trigger the callcack?

Thanks for looking into this.

This issue + example code is mentioned on the plotly forum.

Example with a Gantt Chart

import dash_alternative_viz as dav
import dash_html_components as html
from dash.dependencies import Input, Output, State
import datetime, time


external_scripts = [  
    "https://code.highcharts.com/gantt/highcharts-gantt.js",
    "https://code.highcharts.com/gantt/modules/gantt.js", 
    "https://code.highcharts.com/modules/draggable-points.js"
]
app = dash.Dash(
    __name__,
    external_scripts=external_scripts
    )

def epoch_js(date_time):
    return int(time.mktime(date_time.timetuple())) * 1000


app.layout = html.Div(
    [
        html.Div("Drag the task or it's extremities to update OPTIONS PROPERTY (does not work)"),
        dav.HighChart(
            id="my_highchart",
            constructorType = 'ganttChart', 
            options = {
                'title': {
                    'text': 'Interactive Gantt Chart',
                    'align': 'left'
                    },
                'xAxis': {
                    'min': epoch_js(datetime.datetime(2023, 8, 17)),
                    'max': epoch_js(datetime.datetime(2023, 10, 30)),
                    },
                'plotOptions': {
                    'series': {
                        'animation': False, # Do not animate dependency connectors
                        'dragDrop': {
                            'draggableX': True,
                            'draggableY': True,
                            'dragMinY': 0,
                            'dragMaxY': 2,
                            'dragPrecisionX': 86400000, # 1day = 1000 * 60 * 60 * 24 (millis)
                            },
                        'dataLabels': {
                            'enabled': True,
                            'format': '{point.name}',
                            'style': {
                                'cursor': 'default',
                                'pointerEvents': 'none'
                                }
                            },
                        'allowPointSelect': True,
                        }
                    },
                'series': [
                    {
                        'name': 'Project',
                        'data': [
                            {
                                'name': 'Start prototype',
                                'start': epoch_js(datetime.datetime(2023, 9, 10)),
                                'end'  : epoch_js(datetime.datetime(2023, 10, 10)),
                                'completed': {
                                    'amount': 0.5
                                    }
                                }
                            ]
                        }
                    ],
                }
            ),
        html.Div('This should update the options property data whenever the user interacts with the Gantt Chart'),
        html.Div(id='output'),
        ]
    )


# GETTING THE OPTIONS AFTER USER INTERACTION
# DOES NOT WORK
@app.callback(  # THIS DOES NOT TIGGER AS EXPECTED !!!
    Output("output", "children"),
    Input("my_highchart", "options"),
    prevent_initial_callback = True,
    ) 
def get_options(options):
    print(options)
    return f'{options}'

if __name__ == "__main__":
   app.run_server( port = 8050, debug=False)``` 

There is a typo in library yoooooo word gets printed along with library

at left top corner typo yooooooo is present , will you please help me regarding that

Can not create Bubble Chart using Dash-Alternative-Viz

I want to create a bubble chart using this library. This is the code

import dash
import dash_alternative_viz as dav
import pandas as pd
import plotly.express as px
from dash import html

app = dash.Dash(__name__, external_scripts=["high-charts-more.js", "high-charts.js"]) # Loaded more js


bubble_fig = {
    "chart": {"type": "bubble", "plotBorderWidth": 1, "zoomType": "xy"},
    "legend": {"enabled": False},
    "title": {"text": "Sugar and fat intake per country"},
    "subtitle": {
        "text": 'Source: <a href="http://www.euromonitor.com/">Euromonitor</a> and <a href="https://data.oecd.org/">OECD</a>'
    },
    "accessibility": {
        "point": {
            "valueDescriptionFormat": "{index}. {point.name}, fat: {point.x}g, sugar: {point.y}g, obesity: {point.z}%."
        }
    },
    "xAxis": {
        "gridLineWidth": 1,
        "title": {"text": "Daily fat intake"},
        "labels": {"format": "{value} gr"},
        "plotLines": [
            {
                "color": "black",
                "dashStyle": "dot",
                "width": 2,
                "value": 65,
                "label": {
                    "rotation": 0,
                    "y": 15,
                    "style": {"fontStyle": "italic"},
                    "text": "Safe fat intake 65g/day",
                },
                "zIndex": 3,
            }
        ],
        "accessibility": {"rangeDescription": "Range: 60 to 100 grams."},
    },
    "yAxis": {
        "startOnTick": False,
        "endOnTick": False,
        "title": {"text": "Daily sugar intake"},
        "labels": {"format": "{value} gr"},
        "maxPadding": 0.2,
        "plotLines": [
            {
                "color": "black",
                "dashStyle": "dot",
                "width": 2,
                "value": 50,
                "label": {
                    "align": "right",
                    "style": {"fontStyle": "italic"},
                    "text": "Safe sugar intake 50g/day",
                    "x": -10,
                },
                "zIndex": 3,
            }
        ],
        "accessibility": {"rangeDescription": "Range: 0 to 160 grams."},
    },
    "tooltip": {
        "useHTML": True,
        "headerFormat": "<table>",
        "pointFormat": '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>'
        + "<tr><th>Fat intake:</th><td>{point.x}g</td></tr>"
        + "<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>"
        + "<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>",
        "footerFormat": "</table>",
        "followPointer": True,
    },
    "plotOptions": {
        "series": {"dataLabels": {"enabled": True, "format": "{point.name}"}}
    },
    "series": [
        {
            "data": [
                {"x": 86.5, "y": 102.9, "z": 14.7, "name": "DE", "country": "Germany"},
                {"x": 80.8, "y": 91.5, "z": 15.8, "name": "FI", "country": "Finland"},
                {
                    "x": 80.4,
                    "y": 102.5,
                    "z": 12,
                    "name": "NL",
                    "country": "Netherlands",
                },
                {"x": 80.3, "y": 86.1, "z": 11.8, "name": "SE", "country": "Sweden"},
                {"x": 78.4, "y": 70.1, "z": 16.6, "name": "ES", "country": "Spain"},
                {"x": 74.2, "y": 68.5, "z": 14.5, "name": "FR", "country": "France"},
                {"x": 73.5, "y": 83.1, "z": 10, "name": "NO", "country": "Norway"},
                {"x": 69.2, "y": 57.6, "z": 10.4, "name": "IT", "country": "Italy"},
                {"x": 68.6, "y": 20, "z": 16, "name": "RU", "country": "Russia"},
                {
                    "x": 65.5,
                    "y": 126.4,
                    "z": 35.3,
                    "name": "US",
                    "country": "United States",
                },
                {"x": 65.4, "y": 50.8, "z": 28.5, "name": "HU", "country": "Hungary"},
                {"x": 63.4, "y": 51.8, "z": 15.4, "name": "PT", "country": "Portugal"},
            ]
        }
    ],
}

highchart_barplot = html.Div(dav.HighChart(id="bar-plot", options=bubble_fig))
app.layout = html.Div([highchart_barplot])
app.run(port=8001, debug=True)

I get this error

Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=bubble
 - missingModuleFor: bubble

Unable to reproduce the output of usage.py

I run the usage.py file but the bokeh graphics is missing from the output.
There is also an import error in the downloaded script it tries to import plotly_express instead of plotly.express. Once this is solved it runs without errors but doesn't show the bokeh figure (I'm interested in this to have bokeh dealing with graphics inside a dash app).
The only output at terminal is:

dash-alternative-viz-master/usage.py:122: UserWarning: Starting a Matplotlib GUI outside of the main thread will likely fail.
  fig, ax = plt.subplots()
WARNING: QApplication was not created in the main() thread.

I'm using dash 1.14.0, bokeh 2.2.3, holoviews 1.13.5.

dash-vega-components for Vega-Altair charts

For anyone landing on this repository and looking for a way to show Vega-Altair charts in your Dash application, see dash-vega-components.

There is typo in package, after adding your package i got yoooo printed on my screen plz fix this typo asap, your code is working perfect

yooooo word is getting printed on dashboard,

How can we convert this plotly graph into highcharts and also get the hover data?

import plotly.graph_objects as go
import numpy as np
import plotly.express as px

df = px.data.gapminder().query("country=='Canada'")
fig = go.Figure()
fig.add_trace(
go.Scatter(
x=df["year"],
y=df["pop"],
name="line1",
hoverinfo="text+name",
line_shape="spline",
mode="markers+lines",
line=dict(
color="Blue",
width=4,
),
)
)
fig.add_trace(
go.Scatter(
x=df["year"],
y=df["lifeExp"],
name="line2",
hoverinfo="text+name",
line_shape="vh",
mode="markers",
line=dict(color="red", width=5),
)
)

fig.show()

installtion issue

No installation link provided tried installing by pip3 install dash-alternative-viz
but installation failed as
ERROR: Could not find a version that satisfies the requirement dash-alternative-viz (from versions: none)
ERROR: No matching distribution found for dash-alternative-viz

Installation issue

No installation link provided tried installing by pip3 install dash-alternative-viz
but installation failed as
ERROR: Could not find a version that satisfies the requirement dash-alternative-viz (from versions: none)
ERROR: No matching distribution found for dash-alternative-viz

Installation Error

pip3 install dash-alternative-viz
ERROR: Could not find a version that satisfies the requirement dash-alternative-viz (from versions: none)
ERROR: No matching distribution found for dash-alternative-viz

environment: Python 3.8.6

Candlestick charts are not working

I see the following warning in Chrome DeveloperTools console:

'The "constructorType" property is incorrect or some required module is not imported.'

Sample code to reproduce the issue:

import dash
import dash_alternative_viz as dav
import dash_html_components as html
from dash.dependencies import Input, Output
import requests

data = requests.get('https://cdn.jsdelivr.net/gh/highcharts/[email protected]/samples/data/new-intraday.json').json()
print(data)
candlestick = {
      'series': [{
            'name': 'AAPL',
            'type': 'candlestick',
            'data': data,
            'tooltip': {
                'valueDecimals': 2
            }
        }]
    }

print(data[:5])
app = dash.Dash(__name__)
app.layout = html.Div([
  html.Button(id="my_button", children="More data!"),
  dav.HighChart(id="my_highchart",  constructorType='stockChart', options=candlestick)
])

if __name__ == '__main__':
    app.run_server(debug=True)