Charts de Google: cómo usarlo para el próximo proyecto de análisis

Antes de ingresar a los gráficos y ejemplos de Google, es bueno saber cuáles son los diagramas y cuán útiles. “Una imagen vale más que mil palabras” significa que una cosa/idea compleja solo puede transmitirse con solo una imagen estática. Los diagramas también se pueden usar de la misma manera, donde pueden ayudar a transmitir información con un solo cuadro donde se pueden necesitar páginas para describir el texto y los números. ¿Qué es el diagrama? Un gráfico es la representación gráfica de los datos y nada más. Piense en cuándo presenta y explica los datos. Puede mostrar tablas con números, números, porcentajes y relaciones. Sin embargo, lo más probable es que su punto se pierda si confía solo en ellos.
Pero si usa un diagrama o gráfico, todo tendrá sentido a la vez, porque los diagramas en sí pueden describir la información de manera más fácil. Ayuda a comprender los datos de manera fácil y rápida. La decisión de mostrar información utilizando el diagrama tampoco es suficiente, porque hay muchos tipos de diagramas/gráficos disponibles. También debe decidir qué tipo de diagrama será adecuado para la información que desea compartir con su audiencia, algunos gráficos comunes son:
El gráfico del área
Diagrama de barras
Diagrama de burbujas
El gráfico de proporciones
Diagrama con columnas
Diagrama de línea
Diagrama de diferencia
Tabla gráfica
Google Charts proporciona una forma más fácil de ver la información en su sitio utilizando sus servicios. Google ofrece una amplia gama de diagramas, desde diagramas con líneas simples hasta mapas con árboles complejos. Si trabaja en un proyecto de análisis y le gusta mostrar grandes información/datos utilizando un sistema de diagrama rico, entonces los diagramas de Google son la mejor opción. Google Charts es una poderosa herramienta de diagrama, pero muy fácil de implementar. Aquí la lista de diagramas comunes con detalles sobre cómo integrar el uso de la API JavaScript. 1. Diagrama de barras (ver Diagrama de barras de Google Charts)
Charts de Google – Diagrama con BareFunction DrawBarchart () {

Var data = google.visualization.ArrayTadatatable ([[
[‘Fuente’, ‘porcentaje’, {rolle: ‘style’}],
[‘Servicios’, 50, ‘#B87333’], // valor RGB
[‘Mobiles’, 20, ‘Silver’], // Nombre de color en inglés
[‘Computadoras’, 20, ‘oro’],
[‘Otros’, 10, ‘Color: #E5E4E2’], // Declaración de estilo CSS
]);
Val View = nuevo Google.visualization.dataview (fecha);
Ver.setColumns ([0, 1,
{Calc: “Stringify”,
SourceColumn: 1,
Tipo: “cadena”,
Papel: “anotación”},
2]);
Opciones var = {
Título: “Ventas de la empresa”,
Ancho: 600,
Altura: 400,
Bar: {GroupWidth: “95%”},
Leyenda: {posición: “ninguno”},
};
gráfico de lima = nuevo Google.visualization.Barchart (
document.getementById (“bar_chart_div”));
Chart.draw (ver, opciones);
}
2. Diagrama circular (ver Diagrama circular de Google Charts)
Charts de Google – función de diagrama circular drawpiechart () {

// Crear la tabla de datos.
Var data = new Google.visualization.datatable ();
Data.addcolumn (‘string’, ‘fuente’);
Data.addcolumn (‘número’, ‘porcentaje’);
Data.Addrows ([
[‘Servicios’, 50],
[‘Mobiles’, 20],
[‘Computadoras’, 20],
[‘Otros’, 10],
]);
// Establecer opciones de gráfico
VAR OPTIONS = {‘Título’: ‘Ventas de la empresa’,
‘Ancho’: 400,
‘Altura’: 300};
// Instanciar y dibujar nuestro gráfico, pasando algunas opciones.
Bar gráfico = nuevo Google.visualization.piechart (
Document.getementById (‘pastel_chart_div’));
Chart.draw (datos, opciones);
}
3. Diagrama en la columna (ver diagrama en la columna en las listas de Google)
Charts de Google – Diagrama en la función de columna DrawColumnChart () {

Var data = google.visualization.ArrayTadatatable ([[
[‘Fuente’, ‘porcentaje’, {rolle: ‘style’}],
[‘Servicios’, 50, ‘#B87333’], // valor RGB
[‘Mobiles’, 20, ‘Silver’], // Nombre de color en inglés
[‘Computadoras’, 20, ‘oro’],
[‘Otros’, 10, ‘Color: #E5E4E2’], // Declaración de estilo CSS
]);
Val View = nuevo Google.visualization.dataview (fecha);
Ver.setColumns ([0, 1,
{Calc: “Stringify”,
SourceColumn: 1,
Tipo: “cadena”,
Papel: “anotación”},
2]);
Opciones var = {
Título: “Ventas de la empresa”,
Ancho: 600,
Altura: 400,
Bar: {GroupWidth: “95%”},
Leyenda: {posición: “ninguno”},
};
Bar gráfico = nuevo Google.visualization.ColumnChart (
document.getementById (“column_chart_div”));
Chart.draw (ver, opciones);
}
4. Diagrama de línea (ver Diagrama de línea de Google Charts)
Charts de Google – Diagrama con Lineiaction Drawlinechart () {

Var data = google.visualization.ArrayTadatatable ([[
[‘Año’, ‘ventas’, ‘gastos’],
[‘2004’, 1000, 400],
[‘2005’, 1170, 460],
[‘2006’, 660, 1120],
[‘2007’, 1030, 540] ]);
Opciones var = {
Ancho: 600,
Altura: 400,
Título: ‘Desempeño de la empresa’,
Curvetype: ‘función’,
Leyenda: {posición: ‘Bottom’}
};
Var cuadro = nuevo Google.visualization.linechart (document.getementById (‘line_chart_div’));
Chart.draw (datos, opciones);
}
5. Diagrama de burbujas (ver Google Charts Diagrama de burbujas)
Diagramas de Google: diagrama con reclamación DrawBubBlECart () {
Var data = google.visualization.ArrayTadatatable ([[

[‘Id’, ‘x’, ‘y’, ‘temperatura’],
[”, 80, 167, 120],
[”, 79, 136, 130],
[”, 78, 184, 50],
[”, 72, 278, 230],
[”, 81, 200, 210],
[”, 72, 170, 100],
[”, 68, 477, 80] ]);
Opciones var = {
Título: ‘Temperatura del gráfico de burbujas’,
Ancho: 600,
Altura: 400,
Coloraxis: {Colors: [‘Yellow’, ‘Red’]}
};
Bar gráfico = nuevo Google.visualization.bubblechart (
document.getementById (‘bubble_chart_div’));
Chart.draw (datos, opciones);
}
6. Diagrama de Gogoși (ver Diagrama Gogoși en las listas de Google)
Charts de Google – Diagrama de gogoșifunction DrawDonutchart () {

Var data = new Google.visualization.datatable ();

Data.addcolumn (‘string’, ‘fuente’);
Data.addcolumn (‘número’, ‘porcentaje’);
Data.Addrows ([
[‘Servicios’, 50],
[‘Mobiles’, 20],
[‘Computadoras’, 20],
[‘Otros’, 10],
]);
VAR OPTIONS = {‘Título’: ‘Ventas de la empresa’,
‘Ancho’: 400,
‘Altura’: 300,
Piehole: 0.4,
};
Bar gráfico = nuevo Google.visualization.piechart (
document.getementById (‘donut_chart_div’));
Chart.draw (datos, opciones);
}
7. Diagrama de la tabla (consulte el diagrama de la mesa de Google Charts)
Charts de Google – Table
Function drawTable () {

Var data = new Google.visualization.datatable ();
Data.addcolumn (‘string’, ‘fuente’);
Data.addcolumn (‘número’, ‘porcentaje’);
Data.addcolumn (‘string’, ‘año’);
Data.Addrows ([
[‘Servicios’, {V: 50, F: ‘50%’},’ 2015 ‘],
[‘Mobiles’, {V: 20, F: ‘20%’},’ 2015 ‘],
[‘Computadoras’, {V: 20, F: ‘20%’},’ 2015 ‘],
[‘Otros’, {V: 10, F: ‘10%’},’ 2015 ‘], [‘ Servicios ‘, {V: 40, F: ‘40%’}, ‘2014’],
[‘Mobiles’, {V: 30, F: ‘30%’},’ 2014 ‘],
[‘Computadoras’, {V: 10, F: ‘10%’},’ 2014 ‘],
[‘Otros’, {V: 20, F: ‘20%’},’ 2014 ‘],
]);
Table var = nueva Google.visualization.table (
document.getementById (‘table_chart_div’));
Table.draw (fecha, {showRownumber: true, ancho: ‘50%’, altura: ‘50%’});
}
8. Candlestick – Diagrama de cascada (ver diagrama de cascada en las listas de Google)
Charts de Google – candelabro – Cadro de cascada DrawCandlestickChart () {
Var data = google.visualization.ArrayTadatatable ([[
[‘Mon’, 28, 28, 38, 38],

[‘Martes’, 38, 38, 55, 55],
[‘Wed’, 55, 55, 77, 77],
[‘Thu’, 77, 77, 66, 66],
[‘Viernes’, 66, 66, 22, 22] ], CIERTO);
Opciones var = {
Leyenda: ‘Ninguno’,
‘Ancho’: 400,
‘Altura’: 300,
Bar: {GroupWidth: ‘100%’}, // Eliminar espacio entre barras.
Candelabro: {
FallingColor: {StrokeWidth: 0, Fille: ‘#A52714’}, // rojo
RisingColor: {StrokeWidth: 0, Fille: ‘#0f9d58’} // verde
}
};
lima gráfico = nuevo Google.visualization.candlestickchart (
Document.getementById (‘candlestick_chart_div’));
Chart.draw (datos, opciones);
}
9. Diagrama de histograma (ver Google Charts Histograma)
Diagrama de HISTOGRAFEMOFUNTACIÓN DRAINHISTOGRAMCHART () {
Var data = google.visualization.ArrayTadatatable ([[
[‘Fuente’, ‘porcentaje’],

[‘Computadoras’, 15],
[‘Mobiles’, 5],
[‘Servicios’, 25],
[‘Centros de llamadas’, 35],
[‘Mercado’, 5],
[‘Anuncios’, 5],
[‘Otros’, 10],
]);
Opciones var = {
Título: ‘Ventas de la empresa’,
‘Ancho’: 400,
‘Altura’: 300,
Leyenda: {posición: ‘ninguno’},
};
gráfico de lima = nuevo Google.visualization.histogram (
Document.getementById (‘HISTOGRAM_CHART_DIV’));
Chart.draw (datos, opciones);
}
10. Diagrama de Wordtree (ver diagrama de Wordtree en las listas de Google) Wordtree con peso
Function DrawWordTree () {
Datos de lima = google.visualization.ArrayTadatable (
[[‘Frases’],

[‘JavaScript es lenguaje’],

[‘JavaScript es lenguaje de secuencias de comandos’],
[‘JavaScript es popular’],
[‘JavaScript es lenguaje de secuencias de comandos del lado del cliente’],
[‘JavaScript es la base de JQuey’],
[‘JavaScript es base del prototipo’],
[‘JavaScript es base de Angular’],
[‘JavaScript es base de Backbone’],
] );
Opciones var = {
Wordtree: {
formato: ‘predeterminado’,
Palabra: ‘JavaScript’
}
};
Bar gráfico = nuevo Google.visualization.wordree (
Document.getementById (‘wordtree_chart_div’));
Chart.draw (datos, opciones);
}