Getting Datatables and Sparklines to play nice together?

Question

Im currently trying to get Datatables and the Sparklines packages to work together kind of like below:

(This stuff is all written in R however)

I realize my issue is similar to this one... However, even after looking at some of the code and adapting it to my own, I was only able to render one or the other.. either the data from my server on the chart or the sparklines rendered with all data missing - never both together...

Here's the code

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Table Name</th>
            <th>Column Name</th>
            <th>Rule</th>
            <th>Current</th>
            <th>Minimum</th>
            <th>Maximun</th>
            <th>Median</th>
            <th>Mean</th>
            <th>Sparkline</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

The HTML above and the JS below..

<script>

    $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    CURRENT_JOB = "{{ job_requested }}";
    data = {{ data|safe}}



$(function() {

       $('.js-typeahead').typeahead({
         order: "asc",
         source: {
           groupName: {
             // Array of Objects / Strings
             data: {{jobs|safe}}
           }
         },
         callback: {
           onInit: function() {
                $('#table_id').DataTable({
                   data:{{ data|safe}},
                    columns: [
                        {data: 'table_name'},
                        {data: 'col_name'},
                        {data: 'rule'},
                        {data: 'current'},
                        {data: 'min'},
                        {data: 'max'},
                        {data: 'median'},
                        {data: 'mean'},
                    ],
                    "aoColumnDefs": [
                    {
                        "aTargets": [8],
                        "mRender": function (data, type, full) {
                             // since data is an array of values [1,2,3,4]
                            data = data.toString()
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
               "drawCallback": (oSettings) => {
                   console.log('callback')
                  $('.spark:not(:has(canvas))').sparkline('html', {
                      type: 'line',
                      minSpotColor: 'red',
                      maxSpotColor: 'green',
                      spotColor: false
                  });
              }
               });
           }
         }
       });


   });

Does anyone know what I am doing wrong? I need the columns: [] to point my JSON data to the right columns in the table but I also need to point one of the keys in my data object to the sparkline itself and then call the .sparkline()

Also my data object structure that im getting from the server kinda looks like this:

 data = { 
      'table_name': cow,
      'col_name' : cow_col,
      'rule' : cow_col,
      ..etc, etc..
      'data4spark: [1,2,3,4]

   }

I really appreciate anyones feedback/help! Thanks! ❤️

Answer 1

Got it. This always happen every time I post a stackoverflow question, but I think i'd be stuck for a few days if I didn't post so..

Anyways, after reading the docs for a few hours -- The aoColumnDefs is a selector that can select an entire row in the table (if it's already created in the HTML) and that was wrong in my code above.. The aTargets is the parameter that you pass in the index of the column and the mRender is the call back function that you call right before it spits out whatever to the screen (it can modify the data beforehand for that specific col)

The diff is that I sent the code to the HTML using the columns and then I targeted the whole col to attatch the tags on and sent them over

Posting my code in hopes this saves someone time

$('#table_id').DataTable({
                   data:{{ data|safe}},
                    columns: [
                        {data: 'table_name'},
                        {data: 'col_name'},
                        {data: 'rule'},
                        {data: 'current'},
                        {data: 'min'},
                        {data: 'max'},
                        {data: 'median'},
                        {data: 'mean'},
                        {data: 'data'},

                    ],
                    "aoColumnDefs": [
                    {
                        "aTargets": [8],
                        "mRender": function (data, type, full) {
                             // since data is an array of values [1,2,3,4]
                            return '<span class="spark">' + data + '</span>'
                        }
                    }
                ],
               "drawCallback": (oSettings) => {
                   console.log('callback');
                   console.log($('.spark:not(:has(canvas))'))
                  $('.spark:not(:has(canvas))').sparkline('html', {
                      type: 'line',
                      minSpotColor: 'red',
                      maxSpotColor: 'green',
                      spotColor: false
                  });
              }
               });