sevenTopo
1 month ago

Laravel chartist-js to PDF

Posted 1 month ago by sevenTopo

Hi everyone .

i was wondering if it's possible to convert a chart built with chartistjs to pdf using laravel pdf paquage or any other php librarie .

i tried to use the html2canvas librarie but unffornutally it doesn't work . it shows only the block div (empty) .

that's the view represent the chart : https://ibb.co/kqV7wnL.

this my view

 <div class="table-wrapper" id="table-wrapper" style="display: block">
        <table id="datatable1" class="table display table-striped table-bordered table-hover responsive nowrap">
            <thead class="bg-info">
                <tr>
                    <th class="wd-15p">{{__('jour')}}</th>
                    <th class="wd-15p">{{__('matin')}}</th>
                    <th class="wd-15p">{{__('soir')}}</th>
                </tr>
            </thead>
            <tbody id="tb">
               <tr>
                 <td>{{$date_debut}}</td>
                 <td>{{$x_data_matin_debut}}</td>
                 <td>{{$z_data_matin_fin}}</td>
               </tr>
                <tr>
                 <td>{{$date_fin}}</td>
                 <td>{{$y_data_soir_debut}}</td>
                 <td>{{$a_data_soir_fin}}</td>
               </tr>
            </tbody>
        </table>
        <br>
        <div class="col-lg-10 pull-right">
          <ul class="nav nav-pills pull-right">
            <li class="nav-item">
            <input class="btn btn-outline-dark mg-r-5" value="{{__('Imprimer')}}">
          </li>
          </ul>
        </div>
        
    </div>
    <div id="ct-chart" style="display:block">
      <div class="tct-chart" id="tct-chart"></div>
      <ul class="nav nav-pills pull-right">
            <li class="nav-item">
            <input class="btn btn-outline-dark mg-r-5" onclick="chartPdf()" value="{{__('Imprimer')}}">

            <a href="{{url('/testPdf?date_debut='.$date_debut.'&date_fin='.$date_fin.'&x_data_matin_debut='.$x_data_matin_debut.'&z_data_matin_fin='.$z_data_matin_fin.'&y_data_soir_debut='.$y_data_soir_debut.'&a_data_soir_fin='.$a_data_soir_fin)}}" >Imprimer</a>
          </li>
          </ul>
    </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
<script src="http://hongru.github.io/proj/canvas2image/canvas2image.js"></script>
<script>
 function chartPdf()
  {
    alert('hellow');
    html2canvas(document.querySelector(".ct-chart")).then(canvas => {
    document.body.appendChild(canvas)
    to_image(canvas);
  }

  //to image 
 function to_image(canvas){
  alert('start canvas to image')
               // var canvas = document.getElementById("thecanvas");
                document.getElementById("theimage").src = canvas.toDataURL();
                Canvas2Image.saveAsPNG(canvas);
            }

  function showGraphe()
  {
   // alert('clicked')
    document.getElementById('ct-chart').style.display = "block";
    document.getElementById('table-wrapper').style.display = "none";
  }
  function showTable()
  {
   // alert('clicked')
    document.getElementById('table-wrapper').style.display = "block";
    document.getElementById('ct-chart').style.display = "none";
  }
  let val_deb_matin = {!! $x_data_matin_debut !!} ;
  let val_deb_soir = {!! $y_data_soir_debut !!} ;
  let val_fin_matin = {!! $z_data_matin_fin !!} ;
  let val_fin_soir = {!! $a_data_soir_fin !!} ;
  let val_date_debut = {!! $date_debut !!} ;
  let val_date_fin = {!! $date_fin !!} ;
  new Chartist.Bar('.tct-chart', {

  labels: [val_date_debut,val_date_fin],
  series: [
    [val_deb_matin,val_deb_soir],
    [val_fin_matin,val_fin_soir],
  ]
}, {
  // Default mobile configuration
  stackBars: true,
  axisX: {
    labelInterpolationFnc: function(value) {
      return value.split(/\s+/).map(function(word) {
        return word[0];
      }).join('');
    }
  },
  axisY: {
    offset: 20
  }
}, [
  // Options override for media > 400px
  ['screen and (min-width: 400px)', {
    reverseData: true,
    horizontalBars: true,
    axisX: {
      labelInterpolationFnc: Chartist.noop
    },
    axisY: {
      offset: 60
    }
  }],
  // Options override for media > 800px
  ['screen and (min-width: 800px)', {
    stackBars: false,
    seriesBarDistance: 10
  }],
  // Options override for media > 1000px
  ['screen and (min-width: 1000px)', {
    reverseData: false,
    horizontalBars: false,
    seriesBarDistance: 15
  }]
]);

</script>


Please sign in or create an account to participate in this conversation.