Como posso fazer um gráfico em forma de ondas usando Canvas e JS.
O exemplo pode ajudar um pouco mais:
Como posso fazer um gráfico em forma de ondas usando Canvas e JS.
O exemplo pode ajudar um pouco mais:
Acho que pode tentar usar o Chart.js, tem um exemplo (Stacked (line)) que acho que é o que você procura:
Você possui várias opções para geração de gráfico, segue alguns plugins mais populares:
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:
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.