How to upload plotly plot with datatable shown data?

Spot1392

Hi! I am newbie using datatables.net. I am trying to integrate plotly plots with datatables.net. My table works fine, filtering and showing data. My goal is to upload plots with filtered data in datatable. Could you give me any recommendation? Please

Here is my JS code in HTML file:

<script type="text/javascript">
  $(document).ready(function() {
    var table = $('#Table_pr').DataTable( {
      "dom": "<'ui grid'" +
              "<'row'" + ">" +
              "<'row'" + "<'left aligned nine wide column'B>"+ "<'right aligned seven wide column'l>"+ ">" +
              "<'row '" + "<'sixteen wide column'tr>" + ">" +
              "<'row'" + "<'seven wide column'i>" + "<'right aligned nine wide column'p>" + ">"+
          ">",
      "responsive": true,
      "searchBuilder": true,
      "stateSave": true,
      "deferRender": true,
      "orderCellsTop": true,
      "scrollY": "400px",
      "scrollX": true,
      "scrollCollapse": true,
      "order": [[0, 'desc']],
      "ajax": {
        "url": "/api/data",
        "dataSrc": "data"
      },
      "columns": [
          { "data": "Finish_Date" },
          { "data": "Team_Name" },
          { "data": "n_Planned" }
      ],
      "columnDefs": [
      { className: 'dt-head-center', targets: [0,1,2]}
      ],
      buttons: [ 'copy',
      {extend: 'excel',
      title: 'Data'},
      {extend: 'pdf',
      title: 'Data'},
      , 'colvis' ]
    } );

    table.buttons().container()
         .appendTo( $('div.eight.column:eq(0)', table.table().container()) );

    table.searchBuilder.container().prependTo(table.table().container());

} );
</script>

<div class="container">
  <table id="Table_pr" class="ui celled table" style="width:100%">
    <thead>
      <tr>
        <th>Date</th>
        <th>Team</th>
        <th># SP Planned</th>
      </tr>
    </thead>
  </table>
</div>

And looks like these:

kthorngren

This blog shows how to use Highcharts with Datatables. Likely you could do something similar with plotly.

Kevin

Spot1392

@kthorngren thanks for recommendation but in given example, they build highchart in JS script. Is there any way to get filtered data to my Flask backend and there, build Plotly plot? Something like:

def Plotly_graphs():
    Data = ##Filtered data ##
    fig_1 = px.histogram(Data , x='Date', y='n_Planned',
                                title='Histogram Chart'
                                )
    graphJSON1 = json.dumps(fig_1 , cls=plotly.utils.PlotlyJSONEncoder)

    fig_2 = go.Figure(data=go.Scatter(
        x=Data['Date'],
        y=Data["n_Planned"],
        mode='lines+markers')
        )
    graphJSON2 = json.dumps(fig_2 , cls=plotly.utils.PlotlyJSONEncoder)

    return graphJSON1, graphJSON2 

It is because in my HTML file I set this way to show my Plotly plots:

    <div class="col-auto">  <div id='plot_1' class='chart'></div>
      <script type='text/javascript'>
        var graphs = {{graphJSON1| safe}};
        Plotly.plot('plot_1',graphs,{});
      </script>
    </div>

Or could you give me an example to use the way shown in the link you provide? Please

kthorngren

I assumed plotly was a Javascript library.

Is there any way to get filtered data to my Flask backend

Use rows().data() with the selector-modifier of { search: 'applied' } to get the filtered data. Use toArray() to convert to a Javascript array then send via ajax to your Python server.

Kevin