javascript - Google Charts with client side data population -

-

i've been looking @ possibilities populate chart google charts live client data. have tried solutions send requests back-end keep side separate client environment , api still undergoing development.

this example code standard pie chart

//js code <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">      // load visualization api , piechart package.     google.load('visualization', '1.0', {'packages':['corechart']});      // set callback run when google visualization api loaded.     google.setonloadcallback(drawchart);      // callback creates , populates data table,     // instantiates pie chart, passes in data ,     // draws it.     function drawchart() {          // create data table.         var data = new google.visualization.datatable();         data.addcolumn('string', 'topping');         data.addcolumn('number', 'slices');         data.addrows([             ['mushrooms', 3],             ['onions', 1],             ['olives', 1],             ['zucchini', 1],             ['pepperoni', 2]         ]);          // set chart options         var options = {'title':'how pizza ate last night',             'width':400,             'height':300};          // instantiate , draw our chart, passing in options.         var chart = new google.visualization.piechart(document.getelementbyid('chart_div'));         chart.draw(data, options);     } </script> //html code <div id="chart_div"></div>

is there way populate google charts retrieving data table being displayed jquery or pure javascript? imagine this:

data.addrows([             [$('#textfield1').getattribute('value'), 3],             [$('#textfield2').getattribute('value'), 1],             [$('#textfield3').getattribute('value'), 1],             [$('#textfield4').getattribute('value'), 1],             [$('#textfield5').getattribute('value'), 2]         ]);

does have experience attempting or know if possibility?

appreciate input!

with pure javascript, let suppose have above hardcoded datatable rows in html <table> :

<table id="table">     <thead>         <tr>             <th>topping</th>             <th>slices</th>         </tr>     </thead>     <tbody>         <tr><td>mushrooms</td><td>3</td></tr>         <tr><td>onions</td><td>1</td></tr>         <tr><td>olives</td><td>1</td></tr>         <tr><td>zucchini</td><td>1</td></tr>         <tr><td>pepperoni</td><td>2</td></tr>     </tbody> </table>

then can read table , use source charts datatable way :

... data.addcolumn('string', 'topping'); data.addcolumn('number', 'slices');  var tablerows = document.queryselectorall('#table tbody tr'); (var i=0;i<tablerows.length;i++) {     data.addrow([         tablerows[i].cells[0].textcontent,        parseint(tablerows[i].cells[1].textcontent)     ]); } ...

see demo -> http://jsfiddle.net/aklf3gl9/

notice parseint(...) important data inject on #2th column typeof number, otherwise visualization fail.


Comments

Post a Comment

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

-
i trying use map can make tag names reference number. when try , use it, in code error (6 in total every time reference map): src/main.cpp:25:45: error: no viable overloaded operator[] type 'std::map<std::string, std::string>' const char* idcs = node.child_value(tagmap[3]); this code: #include "pugi/pugixml.hpp" #include <iostream> #include <string> #include <map> int main() { pugi::xml_document doca, docb; std::map<std::string, pugi::xml_node> mapa, mapb; std::map<std::string, std::string> tagmap {{"1", "data"}, {"2", "entry"}, {"3", "id"}, {"4", "content"}}; if (!doca.load_file("a.xml") || !docb.load_file("b.xml")) { std::cout << "can't find input files"; return 1; } (auto& node: doca.child(tagmap[1]).children(tagmap[2])) { co
Read more

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

-
i wish write custom appender on basis of outputstreamappender . wrote following class package tests; import java.io.ioexception; import java.io.outputstream; import ch.qos.logback.core.outputstreamappender; public class myappender<e> extends outputstreamappender<e> { public myappender() { system.out.println("myappender created"); setoutputstream(new outputstream() { @override public void write(int b) throws ioexception { throw new unsupportedoperationexception(); } }); } } then wrote following runner: package tests; import org.slf4j.loggerfactory; import ch.qos.logback.classic.logger; public class runner { private static final logger log = (logger) loggerfactory.getlogger(runner.class); public static void main(string[] args) { //log.addappender(new myappender<iloggingevent>()); log.info("hello world"); } } finall
Read more

java - Cannot secure connection using TLS -

-
i'm trying establish secure socket connection between java client applet (built jdk 1.7.0_75-b13) , vc++ server application. as test vehicle, used vc++ client/server sample found in msdn forums, modified use schannel , able establish socket using cipher suite tls_rsa_with_aes_128_cbc_sha. works of tls 1.0/1.1/1.2. when try opening socket java applet same server application, connection rejected server reporting following: tls 1.0 acceptsecuritycontext failed: 0x80090327 tls 1.1 acceptsecuritycontext failed: 0x80090331 tls 1.2 acceptsecuritycontext failed: 0x80090331 this java code used create socket: debugprint("setting secure connection"); sslsocketfactory sslsocketfactory = (sslsocketfactory) sslsocketfactory.getdefault(); sslsocket sslsocket = (sslsocket) sslsocketfactory.createsocket("127.0.0.1", socketnumber); debugprint("starting handshake"); sslsocket.settcpnodelay(true); sslsocket.setsolinger(false, 0); sslsocket.s
Read more