Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.
Os doadores receberão material que não consta do site diretamente no e-mail. Programas, Simulados, Tutoriais, Dicas, etc.

Tutoriais JavaScript - 79
Tutorial para Criar um Gráfico de Múltiplas Linhas

Neste tutorial veremos como criar um Gráfico de Múltiplas Linhas.
Vejamos então o exemplo:
Nesse exemplo você poderá gerar gráficos para qualquer finalidade com duas coordenadas de várias linhas, cada uma representando uma organização ou empresa, como alterar os valores das coordenadas, as cores das linhas e das bolinhas. Para isso vamos utilizar a biblioteca Chart.js do JavaScript e apenas um arquivo HTML:
Arquivo graficoMultiplasLinhas.html:
<!DOCTYPE html> <html> <head> <title>Como Criar um Gráfico de Múltiplas Linhas</title> <script src='/google_analytics_auto.js'></script></head> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> <body> <h2>Como Criar um Gráfico de Múltiplas Linhas</h2> <canvas id="myChart" style="width:100%;max-width:600px"></canvas> <script> var xValues = [100,150,300,400,500,600,700,800,900,1000]; new Chart("myChart", { type: "line", data: { labels: xValues, datasets: [{ data: [160,1140,1060,1060,1080,1110,1330,2210,3830,4100], borderColor: "#FF0000", fill: false }, { data: [1200,1700,1700,1950,2000,2700,3000,3500,4700,5100], borderColor: "#00FFFF", fill: false }, { data: [2000,3500,850,1150,1800,2000,1500,2500,500,700], borderColor: "#00FFAA", fill: false }, { data: [2500,700,2000,4500,5000,4000,2000,1000,200,100], borderColor: "#FF00FF", fill: false }] }, options: { legend: {display: false} } }); </script> </body> </html>
Veja na imagem abaixo o resultado desse código::

<< Tutorial para Criar um Gráfico de Linha
Tutorial para Criar um Gráfico de Barras Verticais Coloridas >>

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino