I have implemented dash with Highchart for my requirement . Objective is when I click a button the Highchart with display . Basically it has draggable points along y axis. Working Code below
import dash
import dash_alternative_viz as dav
import dash_html_components as html
from dash.dependencies import Input, Output
import random
import dash_core_components as dcc
from dash.exceptions import PreventUpdate
external_scripts = [
"https://code.highcharts.com/highcharts.js",
"http://code.highcharts.com/highcharts-more.js",
"http://code.highcharts.com/maps/modules/map.js",
"http://code.highcharts.com/maps/modules/data.js",
"http://www.highcharts.com/samples/data/maps/world.js",
"https://code.highcharts.com/modules/draggable-points.js"
]
app = dash.Dash(__name__,external_scripts=external_scripts)
app.layout = html.Div([
html.Button(id="my_button", children="Apply!"),
dav.HighChart(id="my_highchart")
])
@app.callback(
Output("my_highchart", "options"),
[Input("my_button", "n_clicks")])
def random_chart(n_clicks):
if n_clicks is None:
raise PreventUpdate
else:
return {
'title': { 'text': 'Demo' },
'series': [{
'data': [29, 71.5],
'color':'white',
'marker': {
'fillColor': 'blue',
},
'cursor': 'move',
'dragDrop': {
'draggableX': False,
'draggableY': True
}
}]
}
if __name__ == "__main__":
app.run_server( port = 8052, debug=True)
My question is If I have moved y axis from 29 to 40 , how should I pass the new y axis value to the next callback function as input ? I could find the new y values in e.newPoint.y but im not able to pass that to dash variable which will be used as an Input to next callback in dash.
Any suggestions please !
Thanks, Meera