javascript - google visualization line chart animation blank -


i have created line chart 'select' event listener. when item in chart legend clicked alter view of chart.

i can data change can't chart animate.

the lines on chart disappear animation 'duration' period , new lines drawn. when remove animation portion options map in chartwrapper action of clearing chart no longer takes place seem registering animation request.

i wondering if give me advice on how trouble shoot these types of animation problems because have no idea going on.

i guess i'm kind of looking p.m.d.a.s.(mathematical order of operations) of google charts animation..

code:

<html> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart', 'controls']}); function drawvisualization() {      var chartdata = new google.visualization.datatable({         'cols': [             {'id': 'a', 'label': 'a','type': 'number', 'p': {'role': 'domain'}},             {'id': 'a', 'label': 'a','type': 'number', 'p': {'role': 'data'}},             {'id': 'a_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},             {'id': 'b', 'label': 'b','type': 'number', 'p': {'role': 'data'}},             {'id': 'b_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},             {'id': 'c', 'label': 'c','type': 'number', 'p': {'role': 'data'}},             {'id': 'c_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}}         ],         'rows':[                 {'c': [{'v': 0, 'f': 'date string'}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]},                 {'c': [{'v': 1, 'f': 'date string'}, {'v': 2, 'f': null}, {'v': false, 'f': null}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 4, 'f': null}, {'v': false, 'f': null}]},                 {'c': [{'v': 2, 'f': 'date string'}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 2, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]}         ]     });      var score_chart = new google.visualization.chartwrapper({         'charttype': 'linechart',         'containerid': 'score_chart',         'datatable': chartdata,         'options': {             animation:{                 duration: 1000,                 easing: 'out'                 },             curvetype: "function"         },         view: {columns: [0,1,2]}     });      var score_check = google.visualization.events.addlistener(score_chart, 'ready', function(){         google.visualization.events.removelistener(score_check);         var score_select = google.visualization.events.addlistener(score_chart, 'select', function(){         var selection = score_chart.getchart().getselection();         if (selection.length) {             score_chart.setview({'columns': [0,3,4,5,6]});             score_chart.draw();         };     });      });     score_chart.draw(); }; google.setonloadcallback(drawvisualization);

the problem stems id's. seems charts have undocumented behavior tracks data series column id (if specified). since id's columns 1 , 3 different, chart removes series id "a" , adds 2 new series id's "b" , "c". new series not animated, why animations appear broken. if remove id's on columns 1, 3, , 5 (or give columns 1 , 3 same id) chart animate way expect to:

var chartdata = new google.visualization.datatable({     'cols': [         {'id': 'a', 'label': 'a','type': 'number', 'p': {'role': 'domain'}},         {'label': 'a','type': 'number', 'p': {'role': 'data'}},         {'id': 'a_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},         {'label': 'b','type': 'number', 'p': {'role': 'data'}},         {'id': 'b_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}},         {'label': 'c','type': 'number', 'p': {'role': 'data'}},         {'id': 'c_', 'label': null, 'type': 'boolean', 'p': {'role':'certainty'}}     ],     'rows':[         {'c': [{'v': 0, 'f': 'date string'}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]},         {'c': [{'v': 1, 'f': 'date string'}, {'v': 2, 'f': null}, {'v': false, 'f': null}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 4, 'f': null}, {'v': false, 'f': null}]},         {'c': [{'v': 2, 'f': 'date string'}, {'v': 3, 'f': null}, {'v': true, 'f': null}, {'v': 2, 'f': null}, {'v': true, 'f': null}, {'v': 1, 'f': null}, {'v': true, 'f': null}]}     ] });

see working example: http://jsfiddle.net/asgallant/b7w68/


Comments

Post a Comment

Popular posts from this blog

android - Get AccessToken using signpost OAuth without opening a browser (Two legged Oauth) -

i using signpost oauth access data magento server. have read various tutorials on same , reach point open browser user can enter credentials. however, per requirement have automate part. hence, user should not browser page. have set-up done on server side ( magento ), hit url , returned call page. same through program in android. i have tried below, consumer = new commonshttpoauthconsumer(key, secret); provider = new commonshttpoauthprovider(oauth_init_url,access_token_url, authorize_url); try { provider.retrieverequesttoken(consumer, oauth.out_of_band); log.d("tokens" , consumer.gettoken() + " -- " + consumer.gettokensecret()); } and request tokens. dont know how bypass next step. tried directly accessing accesstoken (stupid of me) provider.retrieveaccesstoken(consumer, "mycallback://callback"); no luck, ends in oauth.signpost.exception.oauthnotauthorizedexception: authorization failed (server replied 401). ...
Read more

org.mockito.exceptions.misusing.InvalidUseOfMatchersException: mockito -

getting error org.mockito.exceptions.misusing.invaliduseofmatchersexception: invalid use of argument matchers! 1 matchers expected, 2 recorded. exception may occur if matchers combined raw values: //incorrect: somemethod(anyobject(), "raw string"); when using matchers, arguments have provided matchers. example: //correct: somemethod(anyobject(), eq("string matcher")); at when( getprogramservice .callservice(any(getprogramtype.class))) .thenreturn(jaxbresponse); please explain error , possible resolution the code posted looks fine; don't see problem it. code before or above causing exception. key here: invalid use of argument matchers! 1 matchers expected, 2 recorded. any , used above, doesn't return "special kind of null" or "special kind of getprogramtype"; don't exist. instead, returns null , side effect puts matcher on stack. whe...
Read more

google shop client API returns 400 bad request error while adding an item -

i'm working on solution add items in google shopping market java application. following tutorial real mess because of missing classes of laste release, after setting 1.5-beta maven managed make base example typecheck correctly classes. still can make simple task of adding 1 item. instead of posting whole code i'm posting part creates product feed. private product createproduct(string id) { product product = new product(); product.title = "red wool sweater"; product.content = new content( "text", "comfortable , soft, sweater keep warm on " + "cold winter nights. red , blue stripes."); product.appcontrol = new appcontrol(); product.appcontrol.addrequireddestination("productads"); product.externalid = id; product.lang = "it"; product.country = "it"; product.condition = "nuovo"; product.price = new price("eu...
Read more