Criando gráfico HighCharts com conteúdo dinâmico

[tomelin 1]

Boa tarde pessoal,

 

Estou criando uma tela de dashboard para meus servidores, quero criar um gráfico "http://www.highcharts.com/demo/pie-semi-circle" com as informações de CPU.

 

Estou pegando essas informações via PHP e tenho que mandar para o JS via array, até api tudo tranquilo.

 

O meu problema é como informar esses dados dinamicos para

series: [{            type: 'pie',
            name: 'Browser share',
            innerSize: '50%',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                ['Chrome', 12.8],
                ['Safari',    8.5],
                ['Opera',     6.2],
                {
                    name: 'Others',
                    y: 0.7,
                    dataLabels: {
                        enabled: false
                    }
                }
            ]
        }]

Como gero dinamicamente esses informações com nome e o valor?

Alguém pode me ajudar?

[Lucas Guima 164]

Você consegue criar um array (PHP) com essa estrutura?

[tomelin 1]

Os dados eu tenho, não sei como criar esse tipo de array. Seria um array dentro do outro?

[Lucas Guima 164]

Exatamente, depois você o transforma em JSON.

[D.Wise 0]

Lucas, teria como postar um exemplo do array? tenho a mesma dúvida e não consigo fazer funcionar.

[Lucas Guima 164]

@@D.Wise, veja bem...

 

Esse array:

array(
    'series' => array(
        array(
            'type' => 'pie'
        )
    )
)

É a mesma coisa que esse JSON:

{
    "series": [
        {
            "type": "pie"
        }
    ]
}

Basta montar o restante.

[D.Wise 0]

Ah, entendi. Era bem o que eu estava fazendo então. Obrigado Lucas

[guardiaot 0]

Boa noite a todos passei por esta situação faz pouco tempo vou postar meu código talvez ajude vcs.

meu php onde cria o array json

 

nome do arquivo = lan-1-tx.php

<?php

$postrx = trim($_POST['inputrx']);

$posttx = trim($_POST['inputtx']);

// converte o cabeçario para json

header("Content-type: text/json");

// gera um tempo rand

$x = time() * 1000;

// faz uma requisição para o server

$txgreen = "cat /sys/class/net/lan-1/statistics/tx_bytes";

$greentx = shell_exec($txgreen);

$rxgreen = "cat /sys/class/net/lan-1/statistics/rx_bytes" ;

$greenrx = shell_exec($rxgreen);

// remove caracteres especiais

$hrx = trim(preg_replace('/(?![ ])\s+/', ' ', $greenrx));

$htx = trim(preg_replace('/(?![ ])\s+/', ' ', $greentx));

#pega o valor do campo hidden menos "-" o valor do servidor

$rx = $postrx == 0 ? 0 :$hrx - $postrx;

$tx = $posttx == 0 ? 0 :$htx - $posttx;

$rx = ($rx * 8) / 1000;

$tx = ($tx * 8) / 1000;

// cria o json JSON

if($_POST['inputrx'] == 0 && $_POST['inputtx']){

$ret = array($x, 0 , 0, 0, $hrx, $htx);

}else{

$ret = array($x, round($tx,2) , round($rx,2), round($tx+$rx,2), $hrx, $htx);

}

echo json_encode($ret);

?>

Agora meu html e javascript

<style>

body {

font-family: Arial, sans-serif;

margin:0;

padding:0;

left:0;

}

</style>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

<div style="clear:both"></div>

<div style="min-width:431px; width:95%; height:145px; display: block ">

<div class="cxconteiner">

<span style="margin-left:5px; font-size:12px;">Out : </span>

<b id="tx" style="font-size:12px; color:rgba(24,146,5,1.00)">0</b> <span style="margin-left:5px; font-size:10px;">Kbps</span>

<div id="container" style ="width: 100%; height: 145px; display: block;

border: 1px solid #E8E8E8; padding: 5px; margin-left:6px;" > </div>

</div>

<div class="cxconteiner" style="margin-left:20px; ">

<span style="margin-left:5px; font-size:12px;">In : </span>

<b id="rx" style="font-size:12px; color:rgba(24,146,5,1.00)">0</b> <span style="margin-left:5px; font-size:9px;">Kbps</span>

<div id="container2" style ="width: 100%; height: 145px; display: block;

border: 1px solid #E8E8E8; padding: 5px; margin-left:6px;" ></div>

</div>

<span style="; font-size:11px; font-weight:normal; float:left; display:block; margin-top:4px;">Total : <b id="total" style="font-size:11px; color:#676767">0</b> </span><span style="; font-size:10px; float:left; display:block; margin-top:6px"> Kbps</span>

</div>

<input type="hidden" value="0" name="inputrx" id="inputrx" />

<input type="hidden" value="0" name="inputtx" id="inputtx" />

<script>

function requestData() {

var inputrx = $("#inputrx").val();

var inputtx = $("#inputtx").val();

$.ajax({

url: 'php/lan-1-tx.php',

data:{inputrx:inputrx, inputtx:inputtx},

type:'post',

success: function(point) {

//console.log(point)

var series = chart.series[0];

shift = series.data.length > 20;

chart.series[0].addPoint([point[0],point[1]], true, shift);

graf.series[0].addPoint([point[0],point[2]], true, shift);

$("#tx").html(point[1]);

$("#rx").html(point[2]);

$("#total").html(point[3]);

$("#inputrx").val(point[4]);

$("#inputtx").val(point[5]);

setTimeout(requestData, 1000); // faz o request a cada 1 segundo

},

cache: false

});

}

$(document).ready(function() {

//-------------------------------------------------------------- TX

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

defaultSeriesType: 'spline',

events: {

load: requestData

}

},

title: {

text: ''

},

xAxis: {

type: 'datetime',

tickPixelInterval: 150,

maxZoom: 20 * 1000,

categories: [''],

title: {

text: null

},

labels: {

enabled:false,//default is true

y : 0,

x: -10,

rotation: -45,

align: 'right' }

},

credits: {

enabled: false

},

yAxis: {

min:0,

tickInterval: 2,

title: {

text: '',

margin: 0

}

},

plotOptions: {

area: {

fillColor: {

linearGradient: {

x1: 1.5,

y1: 2.6,

x2: 1.8,

y2: 1.5

},

stops: [

[0, Highcharts.getOptions().colors[0]],

[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]

]

},

marker: {

radius: 1

},

color: 'rgb(0,0,205)', // aqui você altera a cor da linha do grafico azul

lineWidth: 1,

states: {

hover: {

lineWidth: 1

}

},

threshold: null

}

},

series: [{

type: 'area',

name: 'TX',

data: [],

showInLegend: false,

labels: {

enabled:false,

}

}]

});

//-------------------------------------------------------------- RX

graf = new Highcharts.Chart({

chart: {

renderTo: 'container2',

defaultSeriesType: 'spline',

events: {

//load: requestData

}

},

title: {

text: ''

},

xAxis: {

type: 'datetime',

tickPixelInterval: 150,

maxZoom: 20 * 1000,

categories: [''],

title: {

text: null

},

labels: {

enabled:false,//default is true

y : 20, rotation: -45, align: 'right' }

},

credits: {

enabled: false

},

yAxis: {

min:0,

tickInterval: 2,

title: {

text: '',

margin: 0

}

},

plotOptions: {

area: {

fillColor: {

linearGradient: {

x1: 1.5,

y1: 2.6,

x2: 1.8,

y2: 1.5

},

stops: [

[0, Highcharts.getOptions().colors[5]],

[1, Highcharts.Color(Highcharts.getOptions().colors[5]).setOpacity(0).get('rgba')]

]

},

marker: {

radius: 1

},

color: 'rgb(255,140,0)', // aqui você altera a cor do grafico laranja

lineWidth: 1,

states: {

hover: {

lineWidth: 1

}

},

threshold: null

}

},

series: [{

type: 'area',

name: "RX",

data: [],

showInLegend: false

}]

});

});

</script>

<script type="text/javascript" src="js/highcharts.js"></script>