Conflicting functionality between canvasxpress and the datatable library

TheWildParamecium commented 7 months ago

Good afternoon.

I was trying to integrate in the same html report a CanvasXpress chart with a table styled with the datatable library and I have found that in that case the functionality of saving the CanvasXpress chart is broken.

After some research, I have found that the main conflict is between CanvasXpress and the pdfmake library that datatable uses to enable the saving of its tables in pdf.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>

I was wondering if there would be any possibility to make the saving usage of both libraries compatible or any advice on this situation. I leave at the end of this message a minimal example in html to reproduce the problem.

Thank you very much for your help

Best wishes, Jesus

<HTML>
    <title>save_debug</title>
<head>
<meta charset="utf-8">
<meta http-equiv="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>

<link rel='stylesheet' href='https://www.canvasxpress.org/dist/canvasXpress.css' type='text/css'/>
<script type='text/javascript' src='https://www.canvasxpress.org/dist/canvasXpress.min.js'></script>

<script>
    $(document).ready(function () {
        $('#table_0').DataTable({ dom:'Bfrtip', buttons: ['copy', 'csv', 'excel', 'pdf', 'print'] });
    });
</script>
<script>
    var initPage = function () {

        new CanvasXpress({
  "version": 47.9,
  "renderTo": "obj_1_",
  "data": {
      "y": {
          "vars": ["liver","brain","lung"],
          "smps": ["gen1","gen2","gen3","gen4"],
          "data": [
              [20,40,100,1],
              [13,60,85,85],
              [60,90,10,10]
          ]
      },
      "x": {},
      "z": {}
  },
  "config": {
      "toolbarType": "under",
      "xAxisTitle": "Valores",
      "title": "Title",
      "objectColorTransparency": 1,
      "theme": "cx",
      "colorScheme": "CanvasXpress",
      "graphOrientation": "vertical",
      "graphType": "Bar"
  },
  "events": false,
  "info": false,
  "afterRenderInit": [],
  "afterRender": [
      [
          "setDimensions",
          [596,596,true]
      ]
  ],
  "noValidate": true,
});

    };

</script>
</head>
<body onload="initPage();">

<p>Data table (Header true, text false, style DT):</p>
<table id="table_0" border="1" class= "table" >
    <thead>
        <tr>
            <th  >Read_ID </th>
            <th  >Score </th>
            <th  >Organism </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td  >A01641:285:HKKKKDSX5:3:1571:5629:14340_1 </td>
            <td  >99.237 </td>
            <td  >Mus musculus </td>
        </tr>
        <tr>
            <td  >A01642:285:HKKKKDSX5:3:1571:5629:14340_1 </td>
            <td  >95.420 </td>
            <td  >Mus musculus </td>
        </tr>
    </tbody>
</table>

<canvas id='obj_1_' width='596' height='596'></canvas>

</body>
</HTML>

neuhausi commented 5 months ago

Is this still a problem?

TheWildParamecium commented 5 months ago

I've downloaded the most recent versions of CanvasXpress, DataTable and PDFmake and the problem still persist. After a more in depth research, I have been trying lot of differents versions of PDFmake and all 0.3.x and 0.2.x breaks CanvasXpress saving functionallity. Curiously, first versions of PDFmake makes the pdf download button broken and recovers CanvasXpress downloading functionallity.

Finally, after some binary search and trial and error of PDFmake versions, I've just found an old one (0.1.20) that allows PDF downloads from DataTable while preserving CanvasXpress downloading functionallity

neuhausi / canvasXpress

Conflicting functionality between canvasxpress and the datatable library #143