javascript - can add ChartRangeFilter to a Bubble Chart? -
i know if can use chartrangefilter type of chart. since data according search continue grow horizontally. , yes, have use bubbles. or else can horizontal scroll vertical axis not move.
i not know else put in post: / ask me 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'); (var j = 1; j < valores.length; j++) (var = 1; < 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>
you can bind chartrangefilter type of chart,
filter works off data table anyway...
the column filtered needs represent continuous axis,
data type must --> 'number', 'date', 'timeofday', etc...
can't --> 'string'
since bubblechart requires 'string' first column,
use chartview option on chartrangefilter,
specify data table columns 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 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'); (var j = 1; j < valores.length; j++) (var = 1; < 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>
Comments
Post a Comment