1
Je voudrais savoir si vous pouvez utiliser le ChartRangeFilter pour ce type de graphique. Puisque ces données selon votre recherche continueront à croître horizontalement. Et oui, je dois utiliser les bulles. Ou bien je peux faire un scroll horizontal mais l'axe vertical ne bouge pas.pouvez ajouter ChartRangeFilter à un graphique à bulles?
Je ne sais pas quoi d'autre à mettre dans le message:/me demander de continuer ingrensando description plus
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var Alarmas = new Array();
Alarmas[1] = 'PROP1_BID';
Alarmas[2] = 'PROP1_ASK';
Alarmas[3] = 'PROP2_BID';
Alarmas[4] = 'PROP2_ASK';
Alarmas[5] = 'PROV1_ASK_05';
Alarmas[6] = 'PROV1_ASK_10';
Alarmas[7] = 'PROV1_ASK_20';
Alarmas[8] = 'PROV1_ASK_60';
Alarmas[9] = 'PROV1_ASK_X';
Alarmas[10] = 'PROV1_BID_05';
Alarmas[11] = 'PROV1_BID_10';
Alarmas[12] = 'PROV1_BID_20';
Alarmas[13] = 'PROV1_BID_60';
Alarmas[14] = 'PROV1_BID_X';
Alarmas[15] = 'PROV2_BID';
Alarmas[16] = 'PROV2_ASK';
Alarmas[17] = 'PROV3';
Alarmas[18] = 'OPEV1_05';
Alarmas[19] = 'OPEV1_10';
Alarmas[20] = 'OPEV1_20';
Alarmas[21] = 'OPEV1_60';
Alarmas[22] = 'OPEV1_X';
Alarmas[23] = 'OPEV2';
Alarmas[24] = 'OPEV3_01';
Alarmas[25] = 'OPEV3_05';
Alarmas[26] = 'OPEV3_10';
Alarmas[27] = 'OPEV3_20';
Alarmas[27] = 'OPEV3_60';
Alarmas[28] = 'OPEV3_X';
Alarmas[29] = 'OPEP1';
Alarmas[30] = 'OPEP2_01';
Alarmas[31] = 'OPEP2_05';
Alarmas[32] = 'OPEP2_10';
Alarmas[33] = 'OPEP2_20';
Alarmas[34] = 'OPEP2_60';
Alarmas[35] = 'OPEP2_X';
Alarmas[36] = 'OPEP3_05';
Alarmas[37] = 'OPEP3_10';
Alarmas[38] = 'OPEP3_20';
Alarmas[39] = 'OPEP3_60';
Alarmas[40] = 'OPEP3_X';
Alarmas[41] = 'AA1';
Alarmas[42] = 'AA2_05';
Alarmas[43] = 'AA2_10';
Alarmas[44] = 'AA2_20';
Alarmas[45] = 'AA2_60';
Alarmas[46] = 'AA2_X';
Alarmas[47] = 'AA3_05';
Alarmas[48] = 'AA3_10';
Alarmas[49] = 'AA3_20';
Alarmas[50] = 'AA3_60';
Alarmas[51] = 'AA3_X';
var Valores = new Array();
Valores[1] = 'BVN';
Valores[2] = 'LTOTALC1';
Valores[3] = 'LUISAI1';
Valores[4] = 'CORAREI1';
Valores[5] = 'CORAREC1';
Valores[6] = 'CONTINC1';
Valores[7] = 'MILENIC1';
Valores[8] = 'ORCL';
Valores[9] = 'YHOO';
Valores[10] = 'COFIINC1';
var options = {
title: 'Valor/Alarma Grid',
colorAxis: {
colors: ['#67DC41', '#FDFF66', '#FF7373']
},
tooltip: {
trigger: 'none'
},
sizeAxis: {
maxSize: 30,
minSize: 2
},
bubble: {
textStyle: {
fontSize: 14,
fontName: 'Times-Roman',
color: 'white',
bold: true,
italic: true,
auraColor: 'none'
},
opacity: 1
},
hAxis: {
slantedText: true,
slantedTextAngle: 90,
viewWindowMode: 'explicit',
viewWindow: {
max: Alarmas.length,
min: 0,
},
gridlines: {
count: Alarmas.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'PROP1_BID'
},
{
v: 2,
f: 'PROP1_ASK'
},
{
v: 3,
f: 'PROP2_BID'
},
{
v: 4,
f: 'PROP2_ASK'
},
{
v: 5,
f: 'PROV1_ASK_05'
},
{
v: 6,
f: 'PROV1_ASK_10'
},
{
v: 7,
f: 'PROV1_ASK_20'
},
{
v: 8,
f: 'PROV1_ASK_60'
},
{
v: 9,
f: 'PROV1_ASK_X'
},
{
v: 10,
f: 'PROV1_BID_05'
},
{
v: 11,
f: 'PROV1_BID_10'
},
{
v: 12,
f: 'PROV1_BID_20'
},
{
v: 13,
f: 'PROV1_BID_60'
},
{
v: 14,
f: 'PROV1_BID_X'
},
{
v: 15,
f: 'PROV2_BID'
},
{
v: 16,
f: 'PROV2_ASK'
},
{
v: 17,
f: 'PROV3'
},
{
v: 18,
f: 'OPEV1_05'
},
{
v: 19,
f: 'OPEV1_10'
},
{
v: 20,
f: 'OPEV1_20'
},
{
v: 21,
f: 'OPEV1_60'
},
{
v: 22,
f: 'OPEV1_X'
},
{
v: 23,
f: 'OPEV2'
},
{
v: 24,
f: 'OPEV3_01'
},
{
v: 25,
f: 'OPEV3_05'
},
{
v: 26,
f: 'OPEV3_10'
},
{
v: 27,
f: 'OPEV3_20'
},
{
v: 27,
f: 'OPEV3_60'
},
{
v: 28,
f: 'OPEV3_X'
},
{
v: 29,
f: 'OPEP1'
},
{
v: 30,
f: 'OPEP2_01'
},
{
v: 31,
f: 'OPEP2_05'
},
{
v: 32,
f: 'OPEP2_10'
},
{
v: 33,
f: 'OPEP2_20'
},
{
v: 34,
f: 'OPEP2_60'
},
{
v: 35,
f: 'OPEP2_X'
},
{
v: 36,
f: 'OPEP3_05'
},
{
v: 37,
f: 'OPEP3_10'
},
{
v: 38,
f: 'OPEP3_20'
},
{
v: 39,
f: 'OPEP3_60'
},
{
v: 40,
f: 'OPEP3_X'
},
{
v: 41,
f: 'AA1'
},
{
v: 42,
f: 'AA2_05'
},
{
v: 43,
f: 'AA2_10'
},
{
v: 44,
f: 'AA2_20'
},
{
v: 45,
f: 'AA2_60'
},
{
v: 46,
f: 'AA2_X'
},
{
v: 47,
f: 'AA3_05'
},
{
v: 48,
f: 'AA3_10'
},
{
v: 49,
f: 'AA3_20'
},
{
v: 50,
f: 'AA3_60'
},
{
v: 51,
f: 'AA3_X'
}
]
},
vAxis: {
viewWindowMode: 'explicit',
viewWindow: {
max: Valores.length,
min: 0,
},
gridlines: {
count: Valores.length,
color: 'rgb(227, 225, 225)',
},
textStyle: {
fontSize: 12
},
ticks: [{
v: 1,
f: 'BVN'
},
{
v: 2,
f: 'LTOTALC1'
},
{
v: 3,
f: 'LUISAI1'
},
{
v: 4,
f: 'CORAREI1'
},
{
v: 5,
f: 'CORAREC1'
},
{
v: 6,
f: 'CONTINC1'
},
{
v: 7,
f: 'MILENIC1'
},
{
v: 8,
f: 'ORCL'
},
{
v: 9,
f: 'YHOO'
},
{
v: 10,
f: 'COFIINC1'
}
]
},
'width': 3900,
'height': 1000
};
//dtd
var customer_product_grid_data_table = new google.visualization.DataTable();
customer_product_grid_data_table.addColumn('string', 'Alarma & Valor');
customer_product_grid_data_table.addColumn('number', 'Alarma');
customer_product_grid_data_table.addColumn('number', 'Valor');
customer_product_grid_data_table.addColumn('number', 'Nivel de Alerta');
customer_product_grid_data_table.addColumn('number', 'Cantidad de alarmas');
customer_product_grid_data_table.addColumn('date', 'Fecha Inicio');
customer_product_grid_data_table.addColumn('date', 'Fecha Termino');
for (var j = 1; j < Valores.length; j++)
for (var i = 1; i < Alarmas.length; i++) {
var variable1 = Math.round(Math.random() * (10 - 1) + 1);
customer_product_grid_data_table.addRow([
'' + variable1, i, j, variable1, variable1, new Date(2016, 06, 1), new Date(2016, 06, 30)
]);
}
var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
chart.draw(customer_product_grid_data_table, options);
}<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.js"></script>
</head>
<body>
<div id="chart_div"></div>
<div id="piechart" style="overflow-y: auto;white-space: nowrap; min-height:1200px;"></div>
</body>
</html>
L'exemple est cool, ont juste une question et une requête: 1) Lorsque je déplace la portée du ControlWrapper, puis-je faire bouger aussi le ChartWrapper ? Puisque j'ai l'intention de réduire le ControlWrapper et déplacer la gamme automatiquement déplacer le ChartWrapper. 2) Pourquoi quand la plage est petite du ControlWrapper et que je la glisse pour une partie vide, j'obtiens l'erreur: Impossible de lire la propriété '0' de null ControlWrapper et je ne sais pas ce qu'elle devrait être. Merci d'avance pour votre réponse et pour votre aide –