Ronny Jair Ruiz Andia
Reputation: 13
can add ChartRangeFilter to a Bubble Chart?
I would like to know if you can use the ChartRangeFilter for this type of chart. Since this data according to your search will continue to grow horizontally. And yes, I have to use the bubbles. Or else I can do a horizontal scroll but the vertical axis does not move.
I do not know what else to put in the post: / ask me to continue ingrensando more description
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>Upvotes: 1
Views: 106
Answers (1)
WhiteHat
Reputation: 61222
you can bind a ChartRangeFilter with any type of chart,
the filter primarily works off the data table anyway...
the column that will be filtered needs to represent a continuous axis,
the data type must be --> 'number', 'date', 'timeofday', etc...
can't be --> 'string'
since the BubbleChart requires a 'string' for the first column,
use the chartView option on the ChartRangeFilter,
to specify which data table columns it should know about...
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 1, // <-- x-axis column
ui: {
chartType: 'ScatterChart',
chartView: {
columns: [1, 2] // <-- limit columns from data table
},
chartOptions: {
width: 3900
}
}
}
});
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart', 'controls']
});
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 dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard')
);
var chart = new google.visualization.ChartWrapper({
chartType: 'BubbleChart',
containerId: 'chart',
options: options
});
var control = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'control',
options: {
filterColumnIndex: 1,
ui: {
chartType: 'ScatterChart',
chartView: {
columns: [1, 2]
},
chartOptions: {
width: 3900
}
}
}
});
dashboard.bind(control, chart);
dashboard.draw(customer_product_grid_data_table);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard">
<div id="chart"></div>
<div id="control"></div>
</div>Upvotes: 1
Related Questions
- Chart.js - Add text/label to bubble chart elements without using tooltips?
- Can individual bubbles in a chartjs bubble chart have labels?
- Add Data Labels onto a bubble chart on chart.js
- Google Charts Get maximum scale
- Add a label to a point of a bubble graph (Chart.js)
- Add lines to Google Bubble Chart
- Is there a way to set the minimum and maximum sizes for bubbles in the bubble chart?
- How to set the "X" and "Y" range
- Chart.js : Is there a way to name each bubble in chart?
- Hiding bubble label on google bubble charts