Historia.txt

Herramientas:
JavaScript, JQuery, HMTL5, CSS3, dc, nvd3, c3, d3, crosfillter, bootstrap, json.

Prototipo0:
En el repositorio https://www.github.com/zhquan/qz-dashboard.git
Usando las bibliotecas HMLT5, CSS3, bootstrap, HighCharts y ChartJs.
Un pequeño demo donde se combinan estas dos bibliotecas gráficas (highcharts y chartJs).
Primero de todo tenemos que masajear los datos del fichero JSON.
Prototipo1:
Esta es la fase de aprendizaje, donde experimento las bibliotecas de dc, d3 y crossfilter.
Es un demo donde represento las gráficas con dc.js usando crossfillter con un fichero json.
Para poder crear las gráficas primero hay que masajear los datos para que dc.js los acepte de la siguiente manera:
	[
		{"key": "a", "value": 1},
		{"key": "b", "value": 2},
		{"key": "c", "value": 3}
	]
De esta manera ya podemos empezar ha trabajar con dc.js.

Prototipo2:
Uso de la biblioteca dc, d3 y crossfilter con los archivos json: its_demographic_aging.json y its_demographic_birth.json.
Las gráficas hechas en este prototipo han sido:
	1. Pie: Aging VS Birth
	2. Pie-donuts: Dividido por años.
	3. Pie-donuts: Dividido por meses.
	4. Row: Dividido por rangos de 6 meses.
	5. Bar: Dividido por días.
	6. Composite-Line: Aging VS Birth.
	7. Composite-Bar: Aging VS Birth.
	8. Table: Date, Id, Name, Sigue
El tipo pie, se puede diferenciar en dos tipos(tarta o donuts).
El tipo composite solo es válido cuando se usa para line o bar, se puede elegir el tipo de line(continua, discontinua). Para componer varias se usa de la siguiente manera:
	example
		.compose([
			dc.lineChart(example)
				.dimension(lineDim)
				.colors('red')
				.group(lineGrp, "Birth")
				.dashStyle([0,0]),
			dc.barChart(example)
				.dimension(barDim)
				.colors('blue')
				.group(barGrp2, 'Aging')
				.centerBar(true)
				.barPadding(0.3)
		])
El tipo line tiene también su propio compose, que es .stack() si queremos añadir un nuevo elemento.
Es recomendable si tenemos un archivo json grande no pintar todos los datos en la tabla para no colapsar el navegador.
Para poder hacer click en dataTable o barChart tenemos que usar las siguientes funciones:
	chart.on('renderlet', function(_chart) {
		_chart.selectAll(".dc-table-row").on("click", function(d){...});
	});

En este aspecto es más complicado si lo comparamos con las bibliotecas de NVd3 o C3 que tienen el evento onclick.
Y sólo se puede hacer el evento onclick en dataTable o barChart(.brushOn(false)) porque en el chart que se pinta tienen una clase que se llama "dc-table-row" depende de como le hayas llamado a la clase del div para dateTable y "rect" para barChart que esta predefinido para cada elemento del chart en esas clases y se puede hacer dicho evento. 

Incluir filtros en la tabla, para que puedas filtrar directamente en la misma tabla sin ir al chart que quieres de una manera mucho más dinámica, con un checkBox por cada columna menos en la columna del name ya que incluye carácteres especiales que no son válidas para el checkBox. también hemos incluido un filtro aparte del checkBox que es en la parte de fecha( al hacer click en la fecha que queremos aparece una venta con la determinada fecha y se puede filtrar por año, mes y día ).
Tambien tenemos un filtro AND que hacemos click los checkBox de todas las columnas y se filtrarán todos los datos que estén dentro de ese rango de filtro.
Por otra parte no se puede filtrar por nombre por tener carácteres especiales, pero si hacemos click en dicho nombre aparecerá el perfil complete de ese usuario.

Prototipo3:
Uso de las bibliotecas NVD3, d3, crossfilter con los archivos json: its_demographic_aging.json y its_demographic_birth.json.
En un primer intento para juntar NVD3 con crossfilter no ha sido fácil, ya que cada tipo de chart necesita un formato diferente, 
que se pueden clasificar en dos(pie, resto).
Los de tipo pie es muy similar al dc.js:
	[
		{
			key: "One", 
			y: 5
		},
		{
			key: "Two", 
			y: 2
		},
		{
			key: "Three", 
			y: 9
		}
	]
Los del resto(bar, line):
	[
		{
			key: "stream1", 
			values: [
				{x: 1, y: 0.34234},
				{x: 2, y: 1.12312}
			]
		},
		{
			key: "stream2", 
			values: [
				{x: 1, y: 0.45634},
				{x: 2, y: 2.34234}
			]
		},
		{
			key: "stream3", 
			values: [
				{x: 1, y: 1.45634},
				{x: 2, y: 0.65423}
			]
		}
	]
Con las funciones de evento podemos cambiar las funciones por defecto como por ejemplo:
	chart.legend.dispatch.on('legendClick', function(e) { --> Cuando hacemos click en una de las legendas. El parámetro e es el valor que hemos hecho click
		setTimeout(function() { --> La función que queramos que haga
			
        }, 100); --> Tiempo
	});
	chart.multibar.dispatch.on('elementClick', function(e) {}); --> Cuando hacemos click por ejemplo en una de las barras, ya que hemos cogido de ejemplo el multibar.

Aunque no se filtran todas las gráficas a la vez como lo hace dc.js, hay que incluir las funciones de evento y actualizar las gráficas.
Las gráficas hechas en este prototipo son las siguientes:
	1. MultiBar: Year
	2. Line: Month
	3. 
	4. Pie: Still VS No Still Sum
	5. MultiBarHorizontal: Still VS No Still

Prototipo4:
Uso de las bibliotescas C3, d3, crossfilter con los archivos json: its_demographic_aging.json y its_demographic_birth.json.
Para poder usar la biblioteca c3 tenemos que masajear los datos de la siguiente manera:
	data: {
		columns: [
			['data1', 30, 200, 100, 400, 150, 250],
			['data2', 50, 20, 10, 40, 15, 25]
		],
		axes: {
			data1: 'y',
			data2: 'y2',
		}
	}
Como en NvD3 también tiene la función de setTimeout:
	Para añadir o cambiar un dato
	setTimeout(function () {
		chart.load({
			columns: [
				['data3', 130, -150, 200, 300, -200, 100]
			]
		});
	}, 1000);
	
	Para transformar de un tipo a otro
	setTimeout(function () {
		chart.transform('donut');
	}, 1000);
En c3.js si no ponemos en que div lo queremos pintar nuestra gráfica, por defecto nos la pone en '#chart'
Para hacer que todas las gráficas se cambien a la vez, tenemos que cambiar las gráficas una a una y la operación que se realiza es
bastante lente comparado con la biblioteca dc.js ya que lo hace la propia biblioteca.