# Plots

MecSimCalc supports the two most popular plotting libraries:

1. Matplotlib
2. Plotly

## Matplotlib​

Matplotlib is a comprehensive library for creating static, animated, and interactive visualizations in Python.

Visit matplotlib.org for full documentation on how to use Matplotlib:

Once your Matplotlib figure is ready to be displayed, convert it to a HTML string with the <img> tag that can be embedded into the outputs step. As follows:

### Code​

import matplotlib.pyplot as pltimport numpy as npimport base64import iodef plt_show(plt, width=500, dpi=100):    # Converts matplotlib plt to image data string    #   plt is the matplotlib pyplot or figure    #   width is the width of the graph image in pixels    #   dpi (dots per inch) is the resolution of the image    bytes = io.BytesIO()    plt.savefig(bytes, format='png', dpi=dpi)  # Save as png image    if hasattr(plt, "close"):        plt.close()    bytes.seek(0)    base64_string = "data:image/png;base64," + \        base64.b64encode(bytes.getvalue()).decode("utf-8")    return "<img src='" + base64_string + "' width='" + str(width) + "'>"def main(inputs):    # Create matplotlib figure    x = np.arange(0, 2, 0.01)    y = 2*(np.cos(4*x))    plt.plot(x, y)    # Convert figure to html using plt_show()    plot_html = plt_show(plt)    return {"plot": plot_html}

### Output​

{{ outputs.plot }}

See Example 2 in the introduction section for a detailed example on using Matplotlib.

## Plotly​

Plotly's Python graphing library makes interactive, publication-quality graphs.

Visit plotly.com/python for full documentation on how to use Plotly:

Once your Plotly figure is ready to be displayed, convert it to a HTML string that can be embedded into the outputs step. As follows:

### Code​

import plotly.express as pximport pandas as pdimport numpy as npdef main(inputs):    # Create plotly figure    x = np.arange(0, 2, 0.01)    y = 2*(np.cos(4*x))    fig = px.line(x, y, title="Cosine")    # Convert figure to html using to_html()    plot_html = fig.to_html(include_plotlyjs=True, full_html=False)    return {"plot": plot_html}
caution

In .to_html(), include_plotlyjs must be set to True for the plot to be displayed.

### Output​

{{ outputs.plot }}