What tool / s can I use to download a graphic if I use chart.js

Question

What tool / s can I use to download a graphic if I use chart.js

Navigation

#1 by (2 votes)

0

Hello very good companions, more than anything I use laravel 5.6 and Bootstrap 3.3.7 along with chart.js (ultima version) and good tool is good for me that same graph that shows me pass it to pdf and then download it, anything left my code.

<script>
var cadena = "";
var datos = "";
var respuestas = "";
var datosSeparados = "";
var frecuencias = [];
$(document).ready(function(){
  @foreach($preguntas as $p)
  var respuestas{{$p->id_pesp}} = [];
  @if($p->tipo != "1" && $p->tipo != "2")
  if($("#graf{{$p->id_pesp}}")){
    cadena = ""
    @foreach($resultados as $res)
    @if($res->id_pesp == $p->id_pesp)
    cadena += "{{$res->respuesta}};";
    @endif
    @endforeach
    datos = cadena.substring(0, cadena.length - 1);
    alert(datos);
    datosSeparados = datos.split(';');
    @foreach($respuestas as $r)
    var f = 0;
    @if($r->id_pesp == $p->id_pesp)
    respuestas{{$p->id_pesp}}.push("{{$r->respuestas}}");
    for(var i = 0; i < datosSeparados.length; i++){
      if(datosSeparados[i]=={{$r->id_res}}){
        f++;
      }
    }
    frecuencias.push(f);
    @endif
    @endforeach
    var grafica = $('#graf{{$p->id_pesp}}');
    
    var grafica = new Chart(grafica, {
      type: 'doughnut',
      data: {
        labels: respuestas{{$p->id_pesp}},
        datasets: [{
          label: 'Encuesta Especifica',
          data: frecuencias,
          lineTension: 0,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      }
    });
  }
  @endif
  @endforeach
});
</script>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-3 col-xs-3">
      
    </div>
    <div class="col-lg-9 col-md-9 col-xs-9">
      <div class="row">
        <div class="col-xs-12 col-md-11 col-lg-11">
          @foreach($preguntas as $p)
          @if($p->tipo != "1" && $p->tipo != "2")
          <div class="row">
            <div class="col-xs-5">
              <label>Encuesta de Satisfaccion</label><br><br>
              <label>Pregunta: {{$p->pregunta}}</label>
              <canvas id="graf{{$p->id_pesp}}"></canvas>
            </div>
          </div>
          @endif
          @endforeach
          <div class="row">
            <div class="col-xs-5">
              <label>Pregunta: Encuesta Básica</label>
              <canvas id="grafica" width="200" height="200"></canvas>
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-md-1 col-lg-1">
          
        </div>
      </div>
    </div>
  </div>
</div>
</body>

Thanks for your help, I'm still trying to search the web, any progress I have will be editing my question or if I solve it, I will post the answer, greetings!.

bootstrap laravel chart.js

asked by Dohko19 04.07.2018 в 02:10

source

1 answer

How to put responsive images How can I access a variable in a config.ini file?

score 2 · Accepted Answer

You need:

a library jsPDF
a canvas where to draw the chart
a button to click and to get the image with toDataURL in PNG format
Lying to the pdf saying it is a JPG image
Call PDF save to download

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};

var frecuencias = [
  randomScalingFactor(),
  randomScalingFactor(),
  randomScalingFactor(),
  randomScalingFactor(),
  randomScalingFactor(),
  randomScalingFactor(),
];
          
document.addEventListener('DOMContentLoaded', function() {
  var downloadBtn = document.getElementById('downloadBtn');
  
  var canvas = document.getElementById("graf01");
  var grafica = new Chart(
    canvas, {
      type: 'doughnut',
      data: {
        labels: ['Hay','papa','manzana','batata','señoooraaa','baratooo'],
        datasets: [{
          label: 'Encuesta Especifica',
          data: frecuencias,
          lineTension: 0,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255, 99, 132, 1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      }
    });


    downloadBtn.addEventListener("click", function() {
      var d = new Date();
      var n = d.toISOString();
      // only jpeg is supported by jsPDF
      var imgData = canvas.toDataURL("image/png", 1.0);
      var pdf = new jsPDF();
      pdf.addImage(imgData, "JPEG", 0, 0);
      pdf.save(n+"-graf01.pdf");
    }, false);
  });

body {
  background:#fafafa;
}
.container {
  background: #fff;
  margin: 0 auto 50px;
  border: 1px solid #ccc;
  border-radius: 10px;
  display: block;
  text-align: center;
  max-width: 820px;
  padding: 20px;
}
#downloadBtn {
  cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script>

<div class="container" id="chart">
   <div>
     <canvas id="graf01" width="640" height="400"></canvas><br />
     <button id="downloadBtn" class="btn btn-info">Descargar chart como PDF</button>
   </div>
</div>