Javascript Gráficos Tutorial
Criando gráficos usando JavaScript e PHP
O gráfico baseado na Web pode ser criado usando qualquer biblioteca do lado do cliente ou biblioteca do lado do servidor com base em dados estáticos ou dinâmicos. Se você deseja criar gráficos animados e baixar o gráfico mais rápido, é melhor usar uma biblioteca de gráficos do lado do cliente. Muitas bibliotecas do lado do cliente estão disponíveis para criar gráficos para páginas da web. Uma das bibliotecas populares do lado do cliente é Canvasjs que podem ser usados para criar gráficos baseados na Web usando dados fixos ou recuperando dados de qualquer banco de dados.
Canvasjs é usado com PHP neste tutorial para criar gráficos baseados na Web. Esta biblioteca suporta vários tipos de gráficos, como gráfico de barras, gráfico de colunas, gráfico de coluna dinâmica, gráfico de linha, gráfico de pizza, gráfico de pirâmide, gráfico de donuts, gráfico de bolhas etc. Alguns deles são mostrados aqui usando dados de amostra. Antes de iniciar este tutorial, você deve garantir que seu servidor da web e PHP sejam instalados corretamente e funcionando.
Baixe Canvasjs
Está disponível em versão gratuita e comercial. Você pode baixar e usar a versão gratuita desta biblioteca para fins de teste. Vá para o seguinte URL e clique em Download link para baixar a biblioteca Canvasjs. Descompactar o arquivo e armazenar a pasta no servidor da web após o download para usá -lo.
https: // canvasjs.com
$ luctdata = matriz (Array ("X" => 2013, "y" => 440000),
Array ("X" => 2014, "y" => 270000),
Array ("X" => 2015, "y" => 210000, "indexlabel" => "mais baixo"),
Array ("X" => 2016, "y" => 600000),
Array ("X" => 2017, "y" => 630000, "indexlabel" => "mais alto"),
array ("x" => 2018, "y" => 560000));
?>
Exemplo de gráfico de coluna
Saída:
A saída a seguir será gerada se você executar o arquivo de qualquer servidor da web. “Versão de teste“ e “Canvasjs.com ”as marcas d'água serão mostradas para a versão gratuita.
Quando você clica em “Mais opções" Botão do canto superior direito, então três opções serão mostradas. Você pode imprimir o gráfico ou salvar o gráfico como formato de imagem JPG ou PNG. Se você clicar em “Salve como png”A opção então a seguinte caixa de diálogo aparecerá.
O nome do arquivo de imagem padrão é Gráfico.png. Você pode remover as marcas d'água da imagem usando qualquer software de edição de fotos facilmente.
Gráfico de pizza:
O exemplo a seguir mostra a popularidade de diferentes distribuições Linux usando gráfico de pizza. Escreva o seguinte código em um arquivo nomeado Pie-chart.php e armazenar o arquivo em VAR/WWW/HTML/JSCHART pasta.
Array ("OS" => "Arch Linux", "y" => 40),
Array ("OS" => "CENTOS", "Y" => 25),
Array ("OS" => "Debian", "Y" => 12),
Array ("OS" => "Fedora", "Y" => 10),
Array ("OS" => "Gentoo", "y" => 8),
Array ("OS" => "Lindows", "y" => 5)
);
?>
Exemplo de gráfico de pizza
Saída:
A saída a seguir será exibida se você executar o arquivo do servidor web. Você pode criar o arquivo de imagem do gráfico pela etapa que é mostrada no exemplo anterior.
Gráfico de coluna dinâmica:
Você pode criar um gráfico dinâmico bonito usando esta biblioteca. Suponha que você queira criar um gráfico ao vivo do mercado de ações, onde o preço das ações aumenta ou diminui continuamente. Escreva o seguinte código em um arquivo nomeado Dynamic-chart.php e armazenar o arquivo em VAR/WWW/HTML/JSCHART pasta.
Array ("Stock" => "msft", "y" => 92.67),
Array ("Stock" => "Low", "Y" => 88.89),
Array ("Stock" => "intc", "y" => 52.15),
Array ("Stock" => "Adi", "y" => 91.78),
Array ("Stock" => "adbe", "y" => 224.80),
Array ("Stock" => "abbv", "y" => 94.30),
Array ("Stock" => "AMD", "y" => 10.27)
);
?>
Exemplo de gráfico dinâmico
Saída:
A saída a seguir será exibida se você executar o arquivo do servidor web. Você pode criar o arquivo de imagem do gráfico de maneira semelhante, que é mostrada no primeiro exemplo.
Seguindo as etapas acima, você pode criar facilmente os gráficos animados baseados na Web usando esta biblioteca JavaScript útil.