Visualize data

Glean insights from your data, visually.

Create beautiful visualizations using our in-app Plotly support. Plotly support works just as you're used to in Python, displaying your chart straight to the spreadsheet.

Getting started

Building charts in Quadratic is centered around Python charting libraries, starting with Plotly. Building charts in Plotly is broken down into 3 simple steps:

1. Create and display a chart

Line charts

# Install plotly
import micropip
await micropip.install('plotly')

# Import library 
import plotly.express as px

# Create figure 
fig = px.line(df, x='col1', y='col2', title="Power generation") 

# Display figure to the spreadsheet
fig.show()

Bar charts

# Install plotly
import micropip
await micropip.install('plotly')

# Bar chart using plotly express, can create with plotly graph objects as well
import plotly.express as px

# Create figure with specified data, assumes DataFrame df with column names col1 and col2
fig = px.bar(df, x=df['col1'], y=df['col2'])

# Display figure to spreadsheet
fig.show()

Histograms

# Install plotly
import micropip
await micropip.install('plotly')

# Import Plotly
import plotly.express as px

# Create figure
fig = px.histogram(df, x = 'output')

# Display to sheet 
fig.show()

Scatter plots

# Install plotly
import micropip
await micropip.install('plotly')

import plotly.express as px

fig = px.scatter(df, y="col1", x="col2", color="col3")
fig.update_traces(marker_size=10)
fig.update_layout(scattermode="group")
fig.show()

Heatmaps

# Install plotly
import micropip
await micropip.install('plotly')

# Import library
import plotly.express as px

# Assumes 2d array Z
fig = px.imshow(Z, text_auto=True)

# Display chart
fig.show()

More chart types

For more chart types, explore the Plotly docs: https://plotly.com/python/

2. Styling

For more styling, explore the Plotly styling docs: https://plotly.com/python/styling-plotly-express/

# Example chart styling options to get started
fig.update_layout(
    xaxis=dict(
        showline=True,
        showgrid=False,
        showticklabels=True,
        linecolor='rgb(204, 204, 204)',
        linewidth=2,
        ticks='outside',
        tickfont=dict(
            family='Arial',
            size=12,
            color='rgb(82, 82, 82)',
        ),
    ),
    yaxis=dict(
        showgrid=False,
        zeroline=False,
        showline=False,
        showticklabels=True,
    ),
    autosize=False,
    showlegend=False,
    plot_bgcolor='white',
    title='Historical power usage by month (1985-2018)'
)

3. Chart controls

Resize by dragging the edges of the chart.

Last updated