Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Conflicting functionality between canvasxpress and the datatable library #143

Open
TheWildParamecium opened this issue Feb 23, 2024 · 2 comments
Open

Conflicting functionality between canvasxpress and the datatable library #143

TheWildParamecium opened this issue Feb 23, 2024 · 2 comments

Comments

@TheWildParamecium
Copy link

TheWildParamecium commented Feb 23, 2024 •
edited
Loading

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
Copy link
Owner

Is this still a problem?

@TheWildParamecium
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@neuhausi @TheWildParamecium