Send data by json with highcharts

Question

I’m creating charts with highcharts in my project, but I’m struggling to send more than two values per json. I will now explain:

Page where I send the data by 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);

In the result of the return of query has three columns, A.TOTAL, A.Dia, Turno, but I can only send the data from two columns and I intended to send the data from the three to the graph.

Right now my chart looks like this:

In the image where it is surrounded in red should have the information of the column Dia, which I can not send by json.

Page where I call the json, I have so:

$(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>

Answer 1

I believe it must be something like this you want:

 //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
        }]
    });
});

This example takes the object bringing the current index

Answer 2

First passes Json which is returning from PHP. Already mounted JSON.