1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Ajuda, gerar gráficos com json e js

Preciso gerar um gráfico do tipo Pie Cart utilizando js e json, tenho o arquivo json com o nome dos cursos e quantidade de aprovados por curso, preciso que o js leia essas informações e gere o gráfico com elas "Não consigo gerar o gráfico exemplo: ler o json e tratar os dados para que ele mostre no gráfico automaticamente. Quero que os nomes dos Cursos e os números de aprovados que estão no json, preencham os campos necessários e gere os gráficos."

var nome_course;
var matriculados;

$(document).ready(function () {
  $.getJSON("./report/report_curso.json", function (json) {

    let nome_curso = json["nome_curso"];
    let matriculados = json["matriculados"];

  });
});


Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: [nome_curso],
    datasets: [{
      data: [matriculados],
      backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
      hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
      hoverBorderColor: "rgba(234, 236, 244, 1)",
    }],
  },
  options: {
    maintainAspectRatio: false,
    tooltips: {
      backgroundColor: "rgb(255,255,255)",
      bodyFontColor: "#858796",
      borderColor: '#dddfeb',
      borderWidth: 1,
      xPadding: 15,
      yPadding: 15,
      displayColors: false,
      caretPadding: 10,
    },
    legend: {

      display: false
    },
    cutoutPercentage: 80,
  },
});

Json: [{"nome_curso":"Curso 1","matriculados":"673"},{"nome_curso":"Curso2","matriculados":"906"},{"nome_curso":"Curso3","matriculados":"489"}]

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags json javascript ou faça a sua própria pergunta.