Quiero crear un gráfico circular en JavaScript. Al buscar encontré la API de Google Charts. Dado que estamos usando jQuery, descubrí que existe una integración de jQuery para Google Charts disponible.

Pero mi problema es que aquí los datos reales se envían al servidor de Google para crear los gráficos. ¿Existe alguna forma de evitar que los datos se envíen a Google? Me preocupa enviar mis datos a un tercero.

jqPlot se ve bastante bien y es de código abierto.

Aquí hay un enlace a los ejemplos de jqPlot más impresionantes y actualizados .

Flot

Limitaciones: líneas, puntos, áreas rellenas, barras, pastel y combinaciones de estos

Desde una perspectiva de interacción, Flot lo acercará lo más posible a los gráficos Flash como sea posible jQuery. Si bien la salida del gráfico es bastante elegante y de excelente apariencia, también puede interactuar con puntos de datos. Lo que quiero decir con esto es que puede tener la capacidad de desplazarse sobre un punto de datos y obtener comentarios visuales sobre el valor de ese punto en el gráfico.

La versión troncal de flot admite gráficos circulares.

Capacidad Flot Zoom.

Además de esto, también tiene la capacidad de seleccionar una parte del gráfico para recuperar los datos de una "zona" en particular. Como característica secundaria de esta "zonificación", también puede seleccionar un área en un gráfico y hacer zoom para ver los puntos de datos un poco más de cerca. Muy guay .

Minigráficos

Limitaciones: circular, línea, barra, combinación

Sparklines es mi mini herramienta de gráficos favorita. Realmente genial para gráficos de estilo de tablero (piense en el tablero de Google Analytics la próxima vez que inicie sesión). Debido a que son tan pequeños, se pueden incluir en línea (como en el ejemplo anterior). Otra buena idea que se puede utilizar en todos los complementos de gráficos son las capacidades de actualización automática. Su demostración de la velocidad del mouse le muestra el poder de los gráficos en vivo en su máxima expresión.

Gráfico de consulta 0.21

Limitaciones: Área, Línea, Barra y combinaciones de estas

jQuery Chart 0.21 no es el complemento de gráficos más atractivo que existe, hay que decirlo. Tiene una funcionalidad bastante básica en lo que respecta a los gráficos que puede manejar, sin embargo, puede ser flexible si puede dedicar algo de tiempo y esfuerzo.

Agregar valores a un gráfico es relativamente simple:

.chartAdd({

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

jQchart

Limitaciones: Bar, Line

jQchart es extraño, han incorporado transiciones de animación y funcionalidad de arrastrar / soltar en el gráfico, sin embargo, es un poco torpe y aparentemente inútil. Genera gráficos de buen aspecto si se CSSconfigura correctamente, pero hay mejores.

TufteGraph

Limitaciones: barra y barra apilada

Tuftegraph se vende a sí mismo como "bonitos gráficos de barras que le mostraría a su madre". Se acerca, Flot es más bonito, pero Tufte se presta a ser muy ligero. Aunque eso conlleva restricciones, hay pocas opciones para elegir, así que obtienes lo que te dan. Échale un vistazo para ver un gráfico de barras de ganancias rápidas.

Hay un montón de sugerencias geniales aquí, solo voy a lanzar ZingChart a la pila por si acaso . Recientemente lanzamos un contenedor jQuery para la biblioteca que facilita aún más la creación y personalización de gráficos. Los enlaces CDN se encuentran en la siguiente demostración.

¡Estoy en el equipo de ZingChart y estamos aquí para responder cualquier pregunta que puedan tener!

$('#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>

Algunos otros que no se han mencionado:

Para mini tartas, líneas y barras, Peity es brillante, simple, diminuto, rápido, usa un marcado realmente elegante.

No estoy seguro de su relación con Flot (dado su nombre), pero Flotr2 es bastante bueno, sin duda hace mejores pasteles que Flot.

Bluff produce gráficos de líneas bonitos, pero tuve algunos problemas con sus pasteles.

No es lo que buscaba, pero otro producto comercial (muy parecido a Highcharts) es TeeChart .

Chart.js es bastante útil, ya que también admite muchos otros tipos de gráficos.

Se puede usar tanto con jQuery como sin él.

Hay un nuevo jugador en el campo, que ofrece gráficos de navegación avanzados que usan Canvas para animaciones y rendimiento súper suaves:

https://zoomcharts.com/

Ejemplo de gráficos:

Documentación: https://zoomcharts.com/en/javascript-charts-library/charts-packages/pie-chart/

¿Qué tiene de bueno esta lib?

• Otros sectores se pueden ampliar
• Pie ofrece un desglose de estructuras jerárquicas (ver ejemplo)
• escriba su propio controlador de fuente de datos fácilmente o proporcione un archivo json simple
• exportar imágenes de alta resolución fuera de la caja
• soporte táctil completo , funciona sin problemas en iPad, iPhone, Android, etc.

Los gráficos son gratuitos para uso no comercial, licencias comerciales y soporte técnico también disponibles.

También hay gráficos de tiempo interactivos y gráficos de red para que los utilice.

Los gráficos vienen con una amplia API y configuración, por lo que puede controlar todos los aspectos de los gráficos.

Compruebe TeeChart para Javascript

• Gratis para uso no comercial.

• Incluye complementos para jQuery , Node.js, WordPress, Drupal, Joomla, Microsoft TypeScript, etc ...

• Demos interactivos aquí y aquí .

• Algunas capturas de pantalla de algunas de las demostraciones: