Google Charts, Line Chart with Date Range Filter -
i using line chart, allows selective visibility of y series info on chart clicking legend. google finance charts allows add together different stocks onto chart.
i want add together date range filter @ bottom of annotation chart in example: https://developers.google.com/chart/interactive/docs/gallery/annotationchart
but displays blank screen.
here's code line chart:
<html> <head> <script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['annotationchart']}]}"></script> <script type='text/javascript'> google.load("visualization", "1", {packages:["corechart"]}); google.load('visualization', '1', { packages : ['controls'] } ); google.setonloadcallback(drawchart); function drawchart() { var info = google.visualization.arraytodatatable([ ['date', 'sales', 'expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540], ['2014', 1230, 40] ]); var options = { width: 900, height: 600, title: 'company performance', displayannotations: true, series: series } var chart = new google.visualization.linechart(document.getelementbyid('chart_div')); //line chart chart.draw(data, options); var columns = []; var series = {}; (var = 0; < data.getnumberofcolumns(); i++) { columns.push(i); if (i > 0) { series[i - 1] = {}; } } google.visualization.events.addlistener(chart, 'select', function () { var sel = chart.getselection(); // if selection length 0, deselected element if (sel.length > 0) { // if row null, clicked on legend if (sel[0].row == null) { var col = sel[0].column; if (columns[col] == col) { // hide info series columns[col] = { label: data.getcolumnlabel(col), type: data.getcolumntype(col), calc: function () { homecoming null; } }; // gray out legend entry series[col - 1].color = '#cccccc'; } else { // show info series columns[col] = col; series[col - 1].color = null; } var view = new google.visualization.dataview(data); view.setcolumns(columns); chart.draw(view, options); } } }); } </script> </head> <body> <div id='chart_div' style='width: 900px; height: 600px;'></div> </body> </html>
you should utilize dashboard chartwrapper linechart , daterangefilter controlwrapper instead of initializing chart (you aren't calling daterangefilter).
date charts filter range line
No comments:
Post a Comment