HTML Clickable or Drillable Pie Charts Using Graphael -

-

background

i able graphael example of dynamic pie chart working. however, i'm having problem understanding syntax...

the example passes in 2 html links , seems associate links 2 labels , 2 specific slices of pie it's not obvious how correlations or associations happen in string that's passed "piechart" method. tried pass in few more links code seems randomly associate links labels. there doesn't seem obvious way ensure link1 associated label1.

question

does know how explain what's happening in code? how 2 links being associated 2 slices of pie? how consistently associate links labels , specific slices of pie?

note

i don't piechart function takes in 3 "separate" strings of values, labels, , links not collocated each other, makes code hard read. original looks follows...

example

pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - enterprise users", "ie users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]}); r.text(320, 100, "interactive pie chart").attr({ font: "20px sans-serif" });)

instead nicer able pass in array of arrays... array = [[slicevalue1, label1, link1], [slicevalue2, label2, link2], etc. if has idea of how this, great way clean code , make more readable.

source code

<script>   window.onload = function () {     var r = raphael("holder"),     pie = r.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% - enterprise users", "ie users"], legendpos: "west", href: ["http://raphaeljs.com", "http://g.raphaeljs.com"]});     r.text(320, 100, "interactive pie chart").attr({ font: "20px sans-serif" });     pie.hover(function () {       this.sector.stop();       this.sector.scale(1.1, 1.1, this.cx, this.cy);       if (this.label) {         this.label[0].stop();         this.label[0].attr({ r: 7.5 });         this.label[1].attr({ "font-weight": 800 });       }     }, function () {     this.sector.animate({ transform: 's1 1 ' + this.cx + ' ' + this.cy }, 500, "bounce");     if (this.label) {     this.label[0].animate({ r: 5 }, 500, "bounce");     this.label[1].attr({ "font-weight": 400 });     }     });   }; </script>

the better answer using d3.js. here's working example... "multiple d3 pie charts mixed in html layout constructs".


Comments

Post a Comment

Popular posts from this blog

jasper reports - Fixed header in Excel using JasperReports -

-
how can create excel report fixed header using japserreports? mean need header fixed when scroll excel file. this possible adding couple properties in jrxml file each report. take @ advanced excel features freeze panes. if wanted freeze after first column header (down left side basically) this: <statictext> <reportelement style="sans_bold" mode="opaque" x="0" y="60" width="104" height="20" forecolor="#ffffff" backcolor="#666666"> <property name="net.sf.jasperreports.export.xls.auto.filter" value="start"/> <property name="net.sf.jasperreports.export.xls.column.width" value="110"/> <property name="net.sf.jasperreports.export.xls.freeze.column.edge" value="left"/> </reportelement> &
Read more

media player - Android: mediaplayer went away with unhandled events -

-
i need duration of audio file series of voice announcements need play app. have added audio files resources , play fine. sample code below works perfect intended purpose: return duration of audio files. here code: float getdurationofaudioresource(locationenum loc, context context){ float duration = 0; try { mediaplayer mp; mp = mediaplayer.create(context, getaudioresource(loc)); duration = mp.getduration(); mp.release(); mp = null; } catch (illegalstateexception e) {e.printstacktrace(); logerror(25, "testdescitem:fault::could not open mediaplayer object audio resource.");} return duration; } here's weird thing. code called in main activity prepares set of audio instructions given test. there no errors within activity. second activity called, long string of errors on logcat. 03-07 13:23:43.820: i/actionlogger(21435): gentest_info_test #0 created. 03-07 13:23:43.830: i/actionlogger(21435): gente
Read more

python - ('The SQL contains 0 parameter markers, but 50 parameters were supplied', 'HY000') or TypeError: 'tuple' object is not callable -

-
import pyodbc,nltk,array cnxn = pyodbc.connect('driver={mysql odbc 5.1 driver};server=127.0.0.1;port=3306;database=information_schema;user=root; password=1234;option=3;') cursor = cnxn.cursor() cursor.execute("use collegedatabase ;") cursor.execute("select * sampledata ; ") cnxn.commit() s=[] j=[] x=[] words = [] w = [] sfq = [] pos=[] entry in cursor: s.append(entry.injury_type),j.append(entry.injury_desc) nltk.tokenize import punktwordtokenizer nltk.corpus import stopwords tokenizer = punktwordtokenizer() english_stops = set(stopwords.words('english')) in range(0,26): # filter stop words tokenizer.tokenize(j[i]) w.append([word word in tokenizer.tokenize(j[i]) if word not in english_stops]) in range(0 , 26):#converting tokenzied text ito string sfq.append(" ".join(w[a])) replacers import regexpreplacer replacer = regexpreplacer() in range (0,26):#pos tagging replacer.repl
Read more