1

Estou a criar gráficos com highcharts no meu projeto, mas estou com dificuldades para enviar mais do que dois valores por json. Vou passar a explicar:

Página onde envio os dados por json:

$stmt = $conn->prepare(SELECT A.TOTAL, A.Dia, Turno

FROM 
(SELECT (COUNT(tarefa)/1020) * 100 AS TOTAL, DAY(IniciarTarefa) AS Dia, DATE(IniciarTarefa) AS DataInicio FROM raddb.Tarefa LEFT OUTER JOIN raddb.TipoTarefa

ON raddb.TipoTarefa.Id = raddb.Tarefa.tarefa

WHERE TipoTarefa IN ('2', '3') AND DATE_FORMAT(IniciarTarefa, '%H:%i:%S') >= '07:00:00' AND DATE_FORMAT(FimTarefa, '%H:%i:%S') <= '14:00:00' AND 
      MONTH(FimTarefa) = EXTRACT(MONTH FROM CURDATE() - INTERVAL 0 MONTH) 

GROUP BY MONTH(FimTarefa), DAY(FimTarefa), DAY(IniciarTarefa), DATE(IniciarTarefa)) AS A LEFT OUTER JOIN raddb.sessoes ON DATE(data) = A.DataInicio

WHERE Turno = 'M' ORDER BY A.TOTAL DESC LIMIT 5");

$stmt->execute();
$json = [];

while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
    extract($row);
    $json[]= [(string)$Turno, (int)$TOTAL];
}
echo json_encode($json);

No resultado do retorno da query tem três colunas, A.TOTAL, A.Dia, Turno, mas só consigo enviar os dados de duas colunas e pretendia enviar os dados das três para o gráfico.

Neste momento o meu gráfico fica desta forma:

inserir a descrição da imagem aqui

Na imagem onde está rodeado a vermelho devia ter a informação da coluna Dia, que não consigo enviar por json.

Página onde chamo o json, tenho desta forma:

$(function () { 
 $.getJSON('./tarefasaad52', function (data) {

    $('#container').highcharts({
        chart: {
            renderTo: 'container',
            type: 'column'
        },
        title: {
            text: 'Mês Atual'
        },
        xAxis: {
            categories: ['1', '2', '3', '4', '5']
        },
        yAxis: {
            title: {
                text: 'Percentagem'
            }
        },
        series: [{
            name: 'Tarefas Gerais',
            data: data
        }]

    });
});
});

<div class="container">
<h2 class="text-center">Turno mais Completo</h2>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Dashboard</div>
                <div class="panel-body">
                    <div id="container"></div>
                </div>
            </div>
        </div>
    </div>
</div>
0

2 Respostas 2

1

Acredito que deve ser algo assim que você quer:

 //aqui seria seus dados que vem da requisição...
  var graph_data = <?php echo json_encode($data);?>;
    var graph_keys = Object.keys(graph_data);
    var graph_values = [];
    for (var i in graph_data) {
        graph_values.push(graph_data[i]);
    }
    graph_keys = graph_keys.reverse();
    graph_values = graph_values.reverse();

$(function () {
    $('#container').highcharts({
        chart: {
        renderTo: 'container',
        type: 'column'
        },
        title: {
            text: 'Mês atual',
            x: -20 //center
        },
        subtitle: {
            text: 'Subtítulo',
            x: -20
        },
        xAxis: {
            categories: graph_keys
        },
        yAxis: {
            title: {
                text: 'Percentagem'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: ''
        },
        legend: {},
        series: [{
            name: 'Tarefas Gerais',
            data: graph_values
        }]
    });
});

Este exemplo pega o objeto trazendo a index atual

3
  • não estou a conseguir colocar em prática o exemplo que colocou. Pode colocar a resposta que deu a funcionar no jsfiddle
    – Bruno
    Commented 23/07/2019 às 12:12
  • sim é mais ou menos isso que pretendo, mas no exemplo que colocou do colocou dois valores dentro do array, {date:'10-08-2019', valor: 12.00}, mas no meu caso tenho 3 valores, por exemplo {date:'10-08-2019', valor: 12.00, turno: T}, como faço? Exemplo com mais um valor no array
    – Bruno
    Commented 23/07/2019 às 13:35
  • Então, eu editei a resposta, no fiddle tem um exemplo que está personalizando o html do tooltip, onde ele apresenta o objeto, pegando os valores que tiver no seu objeto. Commented 24/07/2019 às 15:08
-1

Primeiramente passa o Json que está retornando do PHP. O JSON já montado.

1
  • Não percebi o que quis dizer com isso, mas isso eu já faço logo no inicio nesta linha: $.getJSON('./tarefasaad52', function (data) {
    – Bruno
    Commented 23/07/2019 às 11:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .