What I need is the following:
I have the data as it appears in the question, my problem is, I need to generate 4 (headmaps), as it appears in the example, the problem is that in my example appear those 4 (headmaps), one on top of the other, ie appear Repeated. What I need is to generate 4 or more maps, but not to be repeated ..
My problem is, I need to generate 4 maps, in this example I generate 4 maps, but one on top of the other (superposition), I want them to be 4 maps but correctly, check the example
My code
anychart.onDocumentReady(function() {
var data = anychart.data.set([
['Preventivo' ,'Monitoreado' ,22 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,16 ,"#298A08"],
['Preventivo' ,'Informal' ,10 ,"#04B431"],
['Preventivo' ,'Nulo' ,4 ,"#FF8000"],
['Correctivo' ,'Monitoreado' ,14 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,10 ,"#04B431"],
['Correctivo' ,'Informal' ,6 ,"#FF8000"],
['Correctivo' ,'Nulo' ,2 ,"#FFFF00"],
['Detectivo' ,'Monitoreado' ,6 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,4 ,"#FF8000"],
['Detectivo' ,'Informal' ,2 ,"#FFFF00"],
['Detectivo' ,'Nulo' ,0 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-2 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-2 ,"#FF0000"],
['Inexistente' ,'Informal' ,-2 ,"#FF0000"],
['Inexistente', 'Nulo' ,-2 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,21 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,15 ,"#04B431"],
['Preventivo' ,'Informal' ,9 ,"#FF8000"],
['Preventivo' ,'Nulo' ,3 ,"#FFFF00"],
['Correctivo' ,'Monitoreado' ,13 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,9 ,"#FF8000"],
['Correctivo' ,'Informal' ,5 ,"#FF8000"],
['Correctivo' ,'Nulo' ,1 ,"#FF0000"],
['Detectivo' ,'Monitoreado' ,5 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,3 ,"#FFFF00"],
['Detectivo' ,'Informal' ,1 ,"#FF0000"],
['Detectivo' ,'Nulo' ,-1 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-3 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-3 ,"#FF0000"],
['Inexistente' ,'Informal' ,-3 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-3 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,23 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,17 ,"#298A08"],
['Preventivo' ,'Informal' ,11 ,"#04B431"],
['Preventivo' ,'Nulo' ,5 ,"#FF8000"],
['Correctivo' ,'Monitoreado' ,15 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,11 ,"#04B431"],
['Correctivo' ,'Informal' ,7 ,"#FF8000"],
['Correctivo' ,'Nulo' ,3 ,"#FFFF00"],
['Detectivo' ,'Monitoreado' ,7 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,5 ,"#FF8000"],
['Detectivo' ,'Informal' ,3 ,"#FFFF00"],
['Detectivo' ,'Nulo' ,1 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-1 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-1 ,"#FF0000"],
['Inexistente' ,'Informal' ,-1 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-1 ,"#FF0000"],
['Preventivo' ,'Monitoreado' ,20 ,"#298A08"],
['Preventivo' ,'Estandarizado' ,14 ,"#04B431"],
['Preventivo' ,'Informal' ,8 ,"#FF8000"],
['Preventivo' ,'Nulo' ,2 ,"#FFFF00"],
['Correctivo' ,'Monitoreado' ,12 ,"#04B431"],
['Correctivo' ,'Estandarizado' ,8 ,"#FF8000"],
['Correctivo' ,'Informal' ,4 ,"#FF8000"],
['Correctivo' ,'Nulo' ,0 ,"#FF0000"],
['Detectivo' ,'Monitoreado' ,4 ,"#FF8000"],
['Detectivo' ,'Estandarizado' ,2 ,"#FFFF00"],
['Detectivo' ,'Informal' ,0 ,"#FF0000"],
['Detectivo' ,'Nulo' ,-2 ,"#FF0000"],
['Inexistente' ,'Monitoreado' ,-4 ,"#FF0000"],
['Inexistente' ,'Estandarizado' ,-4 ,"#FF0000"],
['Inexistente' ,'Informal' ,-4 ,"#FF0000"],
['Inexistente' ,'Nulo' ,-4 ,"#FF0000"]
]);
stage = anychart.graphics.create("container");
var count = 2;
for (i=0; i<2; i++){
for (j=0; j<2; j++){
var dataSet = data.mapAs({x: [1],y: [0], heat: [2], fill: [3]});
count++;
var chart = anychart.heatMap(dataSet);
chart.container(stage);
chart.bounds(50*i + '%', 50*j + '%', "50%", "50%");
chart.draw();
}};
});
This link is the complete example.
Diego, all you need - is to get the appropriate part of data for each chart. If you'll apply the data() method, you'll get the array, so you can easily get the data, e.g. with the slice() method:
data.data().slice(16*count, 16*(count+1));
This simple example illustrates the idea: http://jsfiddle.net/g4ex62h0/4/