javascript - Using Google Visualization, why is DataView content showing in ChartRangeFilter but not in its associated LineChart? -
the code below should populate dataview csv file. dataview fed dashboard inludes linechart , chartrangefilter bound together. problem while chartrangefilter shows proper chart preview , allows me select range linechart shows empty data set right data type , axis labels. assumption dataview content ok since chartrangefilter capable of showing it. why can't linechart same?
google.load('visualization', '1', {packages: ['controls', 'charteditor']}); google.setonloadcallback(drawchart); function drawchart() { // create csv string csvstring = 'time,temp0,hum0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50'; // parse string array var arraydata = $.csv.toarrays(csvstring, {onparsevalue: $.csv.hooks.casttoscalar}); // convert array datatable var data = new google.visualization.arraytodatatable(arraydata); // create dataview datatable var view = new google.visualization.dataview(data); // convert string times in first column timeofday (thanks whitehat!) var columns = []; (var = 0; < data.getnumberofcolumns(); i++) { columns.push(i); } columns[0] = { calc: function(dt, row) { var thisdate = new date('1/1/2016 ' + dt.getvalue(row, 0)); return [thisdate.gethours(), thisdate.getminutes(), thisdate.getseconds(), thisdate.getmilliseconds()]; }, label: arraydata[0][0], type: 'timeofday' }; // determine columns should visible view.setcolumns(columns); // create dashboard var dash = new google.visualization.dashboard(document.getelementbyid('dashboard')); // range filter control wrapper var control = new google.visualization.controlwrapper({ controltype: 'chartrangefilter', containerid: 'control_div', options: { filtercolumnindex: 0, ui: { chartoptions: { height: 50, width: 1000, }, chartview: { columns: [0, 1,2] } } } }); // line chart wrapper var chart = new google.visualization.chartwrapper({ charttype: 'linechart', containerid: 'chart_div', datatable: view, options:{ title: 'home automation - environment sensor log', width: 1000, height: 400 } }); // bind control , chart in dashboard dash.bind([control], [chart]); // draw dashboard using dataview source dash.draw(view); } this current end result:
thanks!
tried number of things chart work 'timeofday', no luck
however, using 'date' column, formatted 'hh:mm:ss' seems work fine
see following working snippet.
changes include:
1) using loader.js vs. jsapi
2) changed calc function return date formatted time
3) added haxis.ticks both chart , control
4) used getcolumnrange set vaxis.viewwindow on chart
google.charts.load('current', { callback: function () { // create csv string csvstring = 'time,temp0,hum0\n13:00:04,24.7,50\n13:01:05,26.7,60\n13:02:04,22.7,52\n13:03:05,14.7,40\n13:04:04,34.7,80\n13:05:05,24.7,50'; // parse string array var arraydata = $.csv.toarrays(csvstring, {onparsevalue: $.csv.hooks.casttoscalar}); // convert array datatable var data = new google.visualization.arraytodatatable(arraydata); // create dataview datatable var view = new google.visualization.dataview(data); // convert string times in first column timeofday (thanks whitehat!) var columns = []; (var = 0; < data.getnumberofcolumns(); i++) { columns.push(i); } var formatter = new google.visualization.dateformat({pattern: 'hh:mm:ss'}); columns[0] = { calc: function(dt, row) { var datevalue = new date('1/1/2016 ' + dt.getvalue(row, 0)); return { v: datevalue, f: formatter.formatvalue(datevalue) }; }, label: arraydata[0][0], type: 'date' }; // determine columns should visible view.setcolumns(columns); var tickmarks = []; (var = 0; < view.getnumberofrows(); i++) { tickmarks.push(view.getvalue(i, 0)); } // create dashboard var dash = new google.visualization.dashboard(document.getelementbyid('dashboard')); // column range min & max var yrange1 = view.getcolumnrange(1); var yrange2 = view.getcolumnrange(2); var control = new google.visualization.controlwrapper({ controltype: 'chartrangefilter', containerid: 'control_div', options: { filtercolumnindex: 0, ui: { chartoptions: { height: 50, width: 1000, haxis: { ticks: tickmarks, format: 'hh:mm:ss' } } } } }); // line chart wrapper var chart = new google.visualization.chartwrapper({ charttype: 'linechart', containerid: 'chart_div', options:{ pointsize: 8, title: 'home automation - environment sensor log', width: 1000, height: 400, haxis: { ticks: tickmarks, format: 'hh:mm:ss' }, vaxis: { viewwindow: { min: math.min(yrange1.min, yrange2.min), max: math.max(yrange1.max, yrange2.max) } } } }); // bind control , chart in dashboard dash.bind(control, chart); // draw dashboard using dataview source dash.draw(view); }, packages: ['controls', 'corechart'] });<script src="https://www.gstatic.com/charts/loader.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script> <div id="dashboard"> <div id="chart_div"></div> <div id="control_div"></div> </div>
Comments
Post a Comment