Maaan, What I simple solution! Don't know why but I was thinking to the most complicate things while the simple one was in front of my eyes. I was thinking that the controlwrapper was able to reorder things automatically as the chart wrapper does...but I was wrong!
Thanks a lot! Problem solved Luca 2015-02-10 12:20 GMT-08:00 'Daniel LaLiberte' via Google Visualization API < [email protected]>: > Hi Luca, > > I suspect your data is not in order, and the chart range filter merely > draws the data as a normal line chart would. If you sort the data by the > zeroth column, that should solve your problem. > > On Tue, Feb 10, 2015 at 2:18 PM, Luca Prete <[email protected]> wrote: > >> Hi everyone, >> >> I succeeded to create different graphs on a webpage thanks to Google >> Charts. I also added at the bottom of each chart a ChartRangeFilter control >> wrapper to filter on a specifc date range the result. Everything seems to >> work wonderfully, except that I see appearing different strange lines in >> the ChartRangeFilter for the majority of the graphs. >> >> I started to debug the issue without success. >> >> Since the dashboard, the charts and the control wrapper are generated >> through a for that calls the same methods for all the items I need to >> generate (both in terms of python in the backend used to generate the json >> and on javascript at client-side), I don't think the issue is related to >> that code itself, otherwise I would probably see the same issue on all the >> graphs, which is not the case. >> >> I also checked the db entries, looking for some anomaly. Nothing found. >> >> I post below a screenshot of the strange lines I see in the page and the >> code that I use (of course without references to our json). >> >> Thanks, >> >> Luca >> >> +++++++++++ Javascript code at client-side ++++++++++++ >> components = [ >> { >> 'type': 'AreaChart', >> 'table': 'total_by_day', >> 'graph_div': 'total_by_day_graph', >> 'ctrl_div': 'total_by_day_ctrl', >> 'title': 'Total number of interactions until a >> specific date', >> 'title_div': 'total_by_day_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'total_by_day_desc', >> 'is_stacked': true, >> 'legend': 'top' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'j_day', >> 'graph_div': 'j_day', >> 'ctrl_div': 'j_day_ctrl', >> 'title': 'Daily contacts bla bla', >> 'title_div': 'j_day_title', >> 'description': 'BLA BLA', >> 'description_div': 'j_day_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'j_month', >> 'graph_div': 'j_month', >> 'ctrl_div': 'j_month_ctrl', >> 'title': 'J monthly contacts', >> 'title_div': 'j_month_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'j_month_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'www_day', >> 'graph_div': 'www_day', >> 'ctrl_div': 'www_day_ctrl', >> 'title': 'Daily contacts to website', >> 'title_div': 'www_day_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'www_day_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'www_month', >> 'graph_div': 'www_month', >> 'ctrl_div': 'www_month_ctrl', >> 'title': 'website monthly contacts', >> 'title_div': 'www_month_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'www_month_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'w_day', >> 'graph_div': 'w_day', >> 'ctrl_div': 'w_day_ctrl', >> 'title': 'Daily contacts to w', >> 'title_div': 'w_day_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'w_day_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'w_month', >> 'graph_div': 'w_month', >> 'ctrl_div': 'w_month_ctrl', >> 'title': 'w monthly contacts', >> 'title_div': 'w_month_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'w_month_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'c_day_aggregate', >> 'graph_div': 'c_day', >> 'ctrl_div': 'c_day_ctrl', >> 'title': 'C downloads', >> 'title_div': 'c_day_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'c_day_desc', >> 'is_stacked': true, >> 'legend': 'top' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'g_day', >> 'graph_div': 'g_day', >> 'ctrl_div': 'g_day_ctrl', >> 'title': 'BLA BLA', >> 'title_div': 'g_day_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'g_day_desc' >> }, >> { >> 'type': 'ColumnChart', >> 'table': 'g_month', >> 'graph_div': 'g_month', >> 'ctrl_div': 'g_month_ctrl', >> 'title': 'G monthly contacts', >> 'title_div': 'g_month_title', >> 'description': 'BLA BLA BLA', >> 'description_div': 'g_month_desc' >> } >> ]; >> >> google.load('visualization', '1.0', {'packages':['controls' >> ]}); >> google.setOnLoadCallback(initialize); >> >> function initialize(){ >> for(i=0;i<components.length;i++){ >> createDiv(components[i]['title_div'], cssClasses[ >> 'titles']); >> fillText(components[i]['title_div'], components[i][ >> 'title']); >> createDiv(components[i]['description_div'], >> cssClasses['descriptions']); >> fillText(components[i]['description_div'], components >> [i]['description']); >> createDiv(components[i]['graph_div'], cssClasses[ >> 'charts']); >> createDiv(components[i]['ctrl_div'], cssClasses[ >> 'ctrls']); >> var json = getJson(components[i]['table']); >> drawChart(json, components[i], components[i]['type' >> ]); >> } >> } >> >> function createDiv(divId, divClass){ >> $("#dashboard_div").append("<div id='" + divId + >> "'></div>"); >> if(divClass != null) { >> $("#" + divId).addClass(divClass); >> } >> } >> >> function fillText(divId, text){ >> $("#" + divId).html(text); >> } >> >> function getJson(table){ >> var jsonData = $.ajax({ >> url: "URL THAT RETURNS JSON" + table, >> dataType:"json", >> async: false >> }).responseText; >> return jsonData >> } >> >> function drawChart(jsonData, config, type) { >> >> // Loading config >> var chartDiv = config['graph_div']; >> var ctrlDiv = config['ctrl_div']; >> var graph_type = 'type' in config ? config['type'] : >> 'ColumnChart'; >> var is_stacked = 'is_stacked' in config ? config[ >> 'is_stacked'] : false; >> var legend = 'legend' in config ? config['legend'] : >> 'none'; >> >> // Create a dashboard. >> var dashboard = new google.visualization.Dashboard( >> document.getElementById('dashboard_div')); >> >> // Create a range slider, passing some options >> var ctrl = new google.visualization.ControlWrapper({ >> 'controlType': 'ChartRangeFilter', >> 'containerId': ctrlDiv, >> 'options': { >> 'filterColumnLabel': 'Date', >> 'ui': { >> 'chartOptions': { >> 'chartArea': { >> 'width': '89%', >> 'height': '100%' >> } >> } >> }, >> 'legend': {'position': 'none'} >> } >> }); >> >> var data = new google.visualization.DataTable(jsonData); >> >> console.log(ctrlDiv) >> >> var chart = new google.visualization.ChartWrapper({ >> 'chartType': graph_type, >> 'containerId': chartDiv, >> 'options': { >> 'isStacked': is_stacked, >> 'hAxis': { >> 'showTextEvery': 3 >> }, >> 'vAxis': { >> 'minValue': 0 >> }, >> 'legend': legend, >> 'chartArea': {'width': '89%', 'height': '85%'} >> } >> }); >> >> dashboard.bind(ctrl, chart); >> dashboard.draw(data); >> } >> </script>Enter code here... >> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Visualization API" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to [email protected]. >> To post to this group, send email to >> [email protected]. >> Visit this group at >> http://groups.google.com/group/google-visualization-api. >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> > - 978-394-1058 > [email protected] <[email protected]> 5CC, Cambridge MA > [email protected] <[email protected]> 9 Juniper Ridge > Road, Acton MA > > -- > You received this message because you are subscribed to a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/VcuPEUuIYvA/unsubscribe > . > To unsubscribe from this group and all its topics, send an email to > [email protected]. > To post to this group, send email to > [email protected]. > Visit this group at > http://groups.google.com/group/google-visualization-api. > For more options, visit https://groups.google.com/d/optout. > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/google-visualization-api. For more options, visit https://groups.google.com/d/optout.
