javascript - How to dynamically create multiple horizontal bar charts in Google Chart? -


i'm new in google chart api. want use visualize data review on google play store include multiple issues, sentiments , other conditions.

i want build horizontal bar chart x axis containing different app , , each app's containing 7 issues, y axis sum of sentiment of each issue in different app.

i have done horizontal chart containing data in single div element. however, user's convenience, want show 5 data @ in single div element, , dynamically create div element if there more 5 data in current data set. @ last, div elements paint chart horizontally append div element called issuebar_div. user can use scrollbar view different chart.

what i've done:

  1. partition data:

    var title = ['app']; var issuerow = {{ projectissues|safe }}; // 7 different issues got django var graph_data = [title.concat(issuerow)]; var cnt = 0; var divide_row = []; var tablerows = ... // tablerows app name mapping sentiment sum corresponding different issue array dictionary. // form  app -> [20, 12, -1, 3, 5, 21, 57] (var app in tablerows) {         cnt ++;                                         var row = [app];         (var = 0; < tablerows[app].length; i++) {             row.push(tablerows[app][i]);         }         if(cnt < 6){             divide_row.push(row);         }         else{             graph_data.push(divide_row);             divide_row = [];             cnt = 0;         } }

  2. create div element , draw chart

in order build use scrollbar, add restriction issuebar_div.

<div id="issuebar_div" style="height:400px; overflow-x:scroll; overflow-y:hidden";></div>

dynamically create div element , draw.

    function drawissuebar() {         var issuebar = document.getelementbyid("issuebar_div");         // titlerow include app , other issue         var titlerow = graph_data[0];         delete_element();         for(var = 1;i<graph_data.length;i++){             // create div element , set attribute             var my_div = document.createelement("div");             my_div.id = "issuebar_" + i;             my_div.style.display = "table-cell";             // append element #issuebar_div             issuebar.appendchild(my_div);             // sliced data , push total_data             var row_data = graph_data[i];             var total_data = [titlerow];             for(var k=0;k<row_data.length;k++){                 total_data.push(row_data[k]);             }             // new data container             var data = new google.visualization.arraytodatatable(total_data);             var div_width = $("#home").width();             var materialoptions = {                 height: 400,                 width: div_width,                 haxis: {                     title: 'sum of sentiment'                 },                 vaxis: {                     title: 'app'                 },                 bars: 'vertical'             };             var materialchart = new google.charts.bar(document.getelementbyid("issuebar_" + i));             materialchart.draw(data, materialoptions);         }      }     // delete div element     function delete_element(){         = 1;         while(true){             element = document.getelementbyid("issuebar_" + i);             if(element !== null){                 element.outerhtml = "";                 delete element;                 i++;             }             else{                 break;             }         }     }

current problem:

basically, created div elements create expect, chart show 1 chart below.

the successful chart

the fail part when move scrollbar right

how can solve problem?

any answer appreciated. thanks.

all. have solve problem!!!

i notice there important sentence showing on google chart document:

for each chart on page, add call google.charts.setonloadcallback() callback draws chart input

so decide callback drawing method when drawing each bar chart.

the specific solution

1.i use new function callback function. row_data data needing present, , my_div div element store chart.

var drawissuebar = new function("row_data", "my_div",         "var data = google.visualization.arraytodatatable(row_data);" +         "var div_width = $('#home').width();" +         "var materialoptions = {" +              "height: 400," +              "width: div_width," +              "haxis: {" +                 "title: 'sum of sentiment'" +             "}," +             "vaxis: {" +                 "title: 'app'" +             "}," +             "bars: 'vertical'" +         "};"+         "var materialchart = new google.charts.bar(my_div);" +         "materialchart.draw(data, materialoptions);"     );

2.rewrite data processing.

    var titlerow = ... // form of ["app", "issue1", "issue2", ..."issue7"]     var cnt = 0;     var divide_row = [];      (var app in tablerows) {         cnt ++;                                         var row = [app].concat(tablerows[app]);         if(cnt < 6){             divide_row.push(row);         }         else{             graph_data.push([titlerow].concat(divide_row));             // console.log(graph_data[graph_data.length - 1]);             divide_row = [];             cnt = 0;         }     }

3.write new function called drawissuechart draw bar chart.

    function drawissuechart(){         // create div element , draw chart         delete_element();         var issuebar = document.getelementbyid('issuebar_div');         for(var = 0;i<graph_data.length;i++){             var my_div = document.createelement("div");             my_div.id = "issuebar_" + i;             my_div.style.display = "table-cell";             issuebar.appendchild(my_div);             var row_data = graph_data[i];             // use drawissuebar callback             google.charts.setonloadcallback(drawissuebar(row_data, my_div));         }     }

result

the successful chart

another successful chart when moving scrollbar right

i learn lot solution!

hopefully can people encounter problem.


Comments

Post a Comment

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

is possible store keyboard events 1 string? code below stores 1 char , prints it. card reader or bar code reader, contains collection of character/ string not 1 character @ time. goal save char pressed text variable. from tkinter import * root = tk() def key(event): text= event.char text+= event.char print ("pressed", text) def callback(event): frame.focus_set() print ("clicked at", event.x, event.y) frame = frame(root, width=100, height=100) frame.bind("<key>", key) frame.bind("<button-1>", callback) frame.pack() root.mainloop() currently, creating text variable , everytime key() function gets called, , text stores last character typed. you can define text module level variable , , use module level text inside key function - text = '' def key(event): global text text+= event.char print("pressed", text)
Read more

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

i'm implementing inapp billing in android app. works well, however, i'm trying decouple broadcast receiver activity manifest. suggestion in android's trivialdrive sample: // important: dynamically register broadcast messages updated purchases. // register receiver here instead of <receiver> in manifest // because call getpurchases() @ startup, therefore can ignore // broadcasts sent while app isn't running. // note: registering listener in activity bad idea, done here // because sample. regardless, receiver must registered after // iabhelper setup, before first call getpurchases(). currently there's class extends broadcastreceiver : public class iabbroadcastreceiver extends broadcastreceiver { /** * intent action receiver should filter for. */ public static final string action = "com.android.vending.billing.purchases_updated"; private final iabbroadcastlistener mlistener; public iabbroadcastreceiver(iabbroadcastlistener listener) { m
Read more

javascript - Z-index in d3.js -

i have map , when hover effect on region of map below yellow line , circle, last ones disappear. how can solve problem? http://jsfiddle.net/ot21n9qx/ var arc = g.append("path") .style("fill", "none") .style("stroke", "yellow") .style("stroke-width", 2) .attr("d", "m" + pathorigin[0] + "," + pathorigin[1] + " q" + svgpoint[0] + "," + pathorigin[1] + " " + svgpoint[0] + "," + svgpoint[1]); var circlesize = d3.scale.linear() .domain([0, 0.5, 1]) .range([4, 10, 4]); svg not have z order draws objects in order created. need create path , circle after create highlight regions. here forked fiddle: http://jsfiddle.net/o00fzgaf/1/
Read more