# Firefly release with Plotly charts (firefly.war fixed)

**URL:** <https://www.rubin.community/t/firefly-release-with-plotly-charts-firefly-war-fixed/2164>\
**Category:** Camera-DM Visualization\
**Created:** [August 10, 2017, 7:50pm UTC](https://www.rubin.community/t/firefly-release-with-plotly-charts-firefly-war-fixed/2164 "2017-08-10T19:50:06Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![tatianag](https://sea2.discourse-cdn.com/flex002/user_avatar/www.rubin.community/tatianag/32/121_2.png) [@tatianag](https://www.rubin.community/u/tatianag)\
**Post date:** [August 10, 2017, 7:50pm UTC](https://www.rubin.community/t/firefly-release-with-plotly-charts-firefly-war-fixed/2164/1 "2017-08-10T19:50:06Z")

</div>

The new [Firefly release](https://github.com/Caltech-IPAC/firefly/releases) comes with Plotly charts. (Highcharts is free for non-profit organizations, but not for the government, hence we’ll be phasing it out from Firefly in the future.)

[Plotly.js quick start and examples](https://plot.ly/javascript/)  
[Chart attribute reference](https://plot.ly/javascript/reference/)  
[Histogram examples](https://plot.ly/javascript/histograms/)

To show Plotly chart with your data

```auto
firefly.showPlot('divId', {chartId: 'myPlotlyChart', chartType: 'plot.ly', data: plotlyDataArray, layout: plotlyLayoutObject});

```

If you deploy Firefly on a local Tomcat server, you can see the examples at `http://localhost:8080/firefly/demo/ffapi-highlevel-charttest.html`

* * *

I don’t think you are using charts connected to a table, but this is how you would do it in Firefly.

It is possible to substitute any array property of a Plotly trace data with the values in a table column.

Examples of the array properties in Plotly data:

- for scatter data:  
x, y, z, text, marker.size, marker.color, error\_x.array, error\_x.arrayminus, error\_y.array, error\_y.arrayminus
- for bar chart:  
x, y, width, text, marker.color

For example,

```auto
            trace1 = {
                x: "tables::test-tbl,ra",
                y: "tables::test-tbl,dec",
                mode: 'markers',
                type: 'scatter'
            };           

```

defines Plotly trace, connected to the table with ‘test-tbl’ id. Whenever the table changes (for example, when filtered), the chart will change accordingly.