Eu quero criar um gráfico de pizza em JavaScript. Ao pesquisar, encontrei a API Google Charts. Como estamos usando jQuery, descobri que há integração jQuery para gráficos do Google disponível.

Mas meu problema é que os dados reais são enviados ao servidor do Google para a criação dos gráficos. Existe uma maneira de evitar que os dados sejam enviados ao Google? Estou preocupado em enviar meus dados a terceiros.

jqPlot parece muito bom e é de código aberto.

Aqui está um link para os exemplos mais impressionantes e atualizados do jqPlot .

Flot

Limitações: linhas, pontos, áreas preenchidas, barras, pizza e combinações destes

De uma perspectiva de interação, o Flot irá levá-lo o mais perto possível dos gráficos em Flash jQuery. Embora a saída do gráfico seja bastante elegante e de boa aparência, você também pode interagir com os pontos de dados. O que quero dizer com isso é que você pode ter a capacidade de passar o mouse sobre um ponto de dados e obter feedback visual sobre o valor desse ponto no gráfico.

A versão tronco do flot oferece suporte a gráficos de pizza.

Capacidade de zoom flutuante.

Além disso, você também tem a capacidade de selecionar uma parte do gráfico para obter os dados de uma “zona” específica. Como recurso secundário a esse “zoneamento”, você também pode selecionar uma área em um gráfico e ampliar para ver os pontos de dados um pouco mais de perto. Muito legal .

Minigráficos

Limitações: torta, linha, barra, combinação

Sparklines é minha miniferramenta gráfica favorita lá fora. Realmente ótimo para gráficos de estilo de painel (pense em painel do Google Analytics na próxima vez que você fizer login). Por serem tão pequenos, podem ser incluídos em linha (como no exemplo acima). Outra boa ideia que pode ser usada em todos os plug-ins gráficos são os recursos de auto-atualização. Sua demonstração Mouse-Speed ​​mostra o poder dos gráficos ao vivo no seu melhor.

Gráfico de consulta 0,21

Limitações: Área, Linha, Barra e combinações destes

jQuery Chart 0.21 não é o plugin de gráficos mais bonito que existe, tem que ser dito. É bastante básico em termos de funcionalidade quando se trata de gráficos que pode manipular, no entanto, pode ser flexível se você investir algum tempo e esforço nisso.

Adicionar valores a um gráfico é relativamente simples:

.chartAdd({

    "label"  : "Leads",
    "type"   : "Line",
    "color"  : "#008800",
    "values" : ["100","124","222","44","123","23","99"]
});

jQchart

Limitações: barra, linha

jQchart é estranho, eles incorporaram transições de animação e funcionalidade de arrastar / soltar no gráfico, no entanto, é um pouco desajeitado - e aparentemente sem sentido. Ele gera gráficos de boa aparência se você fizer a CSSconfiguração certa, mas existem melhores por aí.

TufteGraph

Limitações: Barra e Barra Empilhada

O Tuftegraph se vende como “lindos gráficos de barras que você mostraria para sua mãe”. Chega perto, Flot é mais bonito, mas Tufte se presta para ser muito leve. Embora isso venha com restrições - há poucas opções de escolha, então você recebe o que é dado. Confira um gráfico de barras de ganho rápido.

Toneladas de ótimas sugestões aqui, apenas para jogar ZingChart na pilha para uma boa medida. Recentemente, lançamos um wrapper jQuery para a biblioteca que torna ainda mais fácil construir e personalizar gráficos. Os links do CDN estão na demonstração abaixo.

Estou na equipe ZingChart e estamos aqui para responder a quaisquer perguntas que qualquer um de vocês possa ter!

$('#pie-chart').zingchart({
  "data": {
    "type": "pie",
    "legend": {},
    "series": [{
      "values": [5]
    }, {
      "values": [10]
    }, {
      "values": [15]
    }]
  }
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.zingchart.com/zingchart.jquery.min.js"></script>

<div id="pie-chart"></div>

Alguns outros que não foram mencionados:

Para mini tortas, linhas e barras, Peity é brilhante, simples, pequeno, rápido, usa uma marcação realmente elegante.

Não tenho certeza de sua relação com Flot (dado o nome), mas Flotr2 é muito bom, certamente faz tortas melhores do que Flot.

Bluff produz gráficos de linhas bonitos, mas tive alguns problemas com suas tortas.

Não o que eu estava procurando, mas outro produto comercial (muito parecido com Highcharts) é o TeeChart .

Chart.js é bastante útil, suportando vários outros tipos de gráficos também.

Ele pode ser usado com ou sem jQuery.

Há um novo jogador em campo, oferecendo gráficos de navegação avançados que usam o Canvas para animações e desempenho super suaves:

https://zoomcharts.com/

Exemplo de gráficos:

Documentação: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

O que é legal sobre essa biblioteca:

• Outras fatias podem ser expandidas
• O Pie oferece detalhamento para estruturas hierárquicas (ver exemplo)
• escreva seu próprio controlador de fonte de dados facilmente ou forneça um arquivo json simples
• exportar imagens de alta resolução fora da caixa
• suporte total ao toque , funciona perfeitamente no iPad, iPhone, Android, etc.

Os gráficos são gratuitos para uso não comercial, licenças comerciais e suporte técnico também estão disponíveis.

Também há gráficos de tempo e gráficos de rede interativos para você usar.

Os gráficos vêm com API e configurações abrangentes, para que você possa controlar todos os aspectos dos gráficos.

Verifique o TeeChart para Javascript

• Grátis para uso não comercial.

• Inclui plug-ins para jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc ...

• Demonstrações interativas aqui e aqui .

• Algumas capturas de tela de algumas das demonstrações: