0

Como posso fazer um gráfico em forma de ondas usando Canvas e JS.

O exemplo pode ajudar um pouco mais:

Clique aqui para ver

4
  • Precisa ser canvas ? ou você quer o resultado do gráfico? ai poderia usar um plugin 12/09/2017 às 16:14
  • Que plugin seria? 12/09/2017 às 16:14
  • Tem vários, se puder ser com plugin eu preparo uma resposta 12/09/2017 às 16:39
  • Pode sim, sem problemas. 12/09/2017 às 18:09

2 Respostas 2

1

Acho que pode tentar usar o Chart.js, tem um exemplo (Stacked (line)) que acho que é o que você procura:

Chart.js - Stacked (line)

0

Você possui várias opções para geração de gráfico, segue alguns plugins mais populares:

Fusion Charts

Highcharts

Google Charts

No exemplo que eu vou dar, vai ser usando Fusion charts (Pois estou mais acostumado, mas pra praticamente todos os plugins que você encontrar vão seguir a mesma lógica)

No caso não seriam 'ondas' e sim um gráfico de área.

Defina um json com o cabeçario do gráfico:

Obs: Estou deduzindo que os dados para o gráfico irão vir via PHP.

$json = '';
//Essa chave é fechada no segundo bloco de código da resposta
$json .= '{';
$json .= '"chart": {';
$json .= '"caption": "Gráfico de valor",';
$json .= '"subcaption": "",';
$json .= '"yaxisname": "Valor",';
$json .= '"formatnumberscale": "1",';
$json .= '"plotgradientcolor": "34495e",';
$json .= '"bgcolor": "FFFFFF",';
$json .= '"showalternatehgridcolor": "0",';
$json .= '"showplotborder": "0",';
$json .= '"showvalues": "0",';
$json .= '"labeldisplay": "WRAP",';
$json .= '"divlinecolor": "CCCCCC",';
$json .= '"suseroundedges": "1",';
$json .= '"showcanvasborder": "0",';
$json .= '"canvasborderalpha": "0",';
$json .= '"defaultnumberscale": "PB",';
$json .= '"numberscalevalue": "1024,1024",';
$json .= '"palettecolors": "34495e",';
$json .= '"showborder": "0"';
$json .= '},';

Depois de definir o cabeçário, você irá definir os dados e as labels para o gráfico:

$json .= '"data": [';
$json .= '{';
$json .= '"label": "2012",';
$json .= '"value": "43570",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2013",';
$json .= '"value": "55553",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2014",';
$json .= '"value": "68892",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "Predicted",';
$json .= '"showlabelborder": "0",';
$json .= '"labelhalign": "left",';
$json .= '"lineposition": "0",';
$json .= '"dashed": "1",';
$json .= '"color": "#6E98AA",';
$json .= '"vline": "true",';
$json .= '"startIndex": 2';
$json .= '},';
$json .= '{';
$json .= '"label": "2015",';
$json .= '"value": "83835",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2016",';
$json .= '"value": "101055",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '},';
$json .= '{';
$json .= '"label": "2016",';
$json .= '"value": "120643",';
$json .= '"stepSkipped": false,';
$json .= '"appliedSmartLabel": true';
$json .= '}';
$json .= ']';
//Esse é o fechamento da chave do primeiro bloco
$json .= '}';

As labels e o valor das labels pode ser trazido do banco, de um csv, outro json, desde que ele seja EXATO para o formato de gráfico que você deseja, você encontra os exemplos pra cada tipo na documentação.

E para renderizar, você precisa instanciar a classe do fusionCharts e informar o que ela precisa fazer.

    //Inclua a classe do FusionCharts
    include 'caminho/ate/a/classe/fusionCharts.php';
    //Printa a div que irá conter o gráfico
    echo '<div id="chart-1"></div>';
    $id = uniqid();
    //chart-1 é a id do elemento que o gráfico irá ser renderizado,  
    //$id é necessário ser uma chave única caso deseje renderizar o gráfico mais de um vez sem dar refresh na pagina   
    $Chart = new \FusionCharts("Area2D", "$id", "100%", 400, "chart-1", "json", $json);
    $Chart->render();

Eu não cheguei a testar, mas isso deve te devolver algo como isso:

grafico

PS: Copiei esse exemplo do próprio site da fusionCharts e dei um leve explicada no que fazer.

PS2: É necessário incluir as dependencias do plugin e incluir o jQuery.

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 .