Tweet
Tweet

Slide 1

Slide 1 text

Javascript Chart Libraries Gordon Diggs PP Dev Lightning Talks 130614 Friday, June 14, 13

Slide 2

Slide 2 text

A little history Friday, June 14, 13

Slide 3

Slide 3 text

My considerations • Lots of data • Need labels to be relevant/understandable • Raw numbers more significant than comparisons Friday, June 14, 13

Slide 4

Slide 4 text

d3.js / rickshaw probably amazing. Friday, June 14, 13

Slide 5

Slide 5 text

A chronological look at the ones I’ve used Friday, June 14, 13

Slide 6

Slide 6 text

Google Charts API • Not actually javascript • Static images • Pass all the data in the URL • Will do automatic gradient • Deprecated Friday, June 14, 13

Slide 7

Slide 7 text

Google Charts API • http://chart.apis.google.com/chart? cht=p&chd=s:world5&chs=200x125&chl=A |B|C|D|E|Fe Friday, June 14, 13

Slide 8

Slide 8 text

Google Charts API Friday, June 14, 13

Slide 9

Slide 9 text

Google Charts API (js) • Great interactivity, can bind events • Auto-coloring • Pain to set up • Data format kind of weird • Not really open source Friday, June 14, 13

Slide 10

Slide 10 text

           var  drawChart  =  function(elem)  {                var  options  =  {                            backgroundColor:  {                                fill:  '#2F2F2F',                                stroke:  '#2F2F2F'                            },                            pieSliceBorderColor:  '#2F2F2F',                            pieSliceText:  'label',                            pieSliceTextStyle:  {  color:  'black',  fontSize:  '12'  },                            legend:  {position:  'none'},                            chartArea:  {width:  '800',  height:  '500'}                        };                  $.getJSON('/occurrences',  {  field:  $(elem).attr('data-­‐field')  },  function(response)  {                    console.log("response  for  field:",  $(elem).attr('data-­‐field'),  response);                    var  data  =  google.visualization.arrayToDataTable(response.occurrence);                    var  chart  =  new  google.visualization.PieChart(elem)                    chart.draw(data,  options);                      //  add  select  listener  to  jump  to  search  results  from  pie  charts                    google.visualization.events.addListener(chart,  'select',  function()  {                        var  selected  =  chart.getSelection()//,                                label  =  data.getFormattedValue(selected[0].row,  0);                          if(confirm("Go  to  results  for  '"  +  label  +  "'?"))  {                            window.location.href  =  '/?search='  +  encodeURIComponent(label);                        }                    });                });              };              $('.chart').each(function(i)  {                drawChart(this);            }); Friday, June 14, 13

Slide 11

Slide 11 text

Google Charts API (js) Friday, June 14, 13

Slide 12

Slide 12 text

Google Charts API (js) • https://developers.google.com/chart/ Friday, June 14, 13

Slide 13

Slide 13 text

Chart.js • Canvas • Good initialization • Nice animation • Limited Interactivity • No labels Friday, June 14, 13

Slide 14

Slide 14 text

       $('.chart').each(function(i)  {            var  $elem  =  $(this),                    ctx  =  $elem.find('canvas')[0].getContext("2d");            $.getJSON('/stats',  {  field:  $elem.attr('data-­‐field')  },  function(response)  {                var  data  =  [],                        colors  =  colorGradient('224466',  '6699bb',  response.length);                $.each(response,  function(i,  datum)  {                    datum.color  =  colors[i  %  colors.length];                    data[i]  =  datum;                });                new  Chart(ctx).Pie(data,  {                    segmentStrokeColor:  '#2F2F2F',                    segmentStrokeWidth:  1,                    animation:  false                });            });        }); Friday, June 14, 13

Slide 15

Slide 15 text

Chart.js Friday, June 14, 13

Slide 16

Slide 16 text

Chart.js • http://www.chartjs.org Friday, June 14, 13

Slide 17

Slide 17 text

Chartkick • One line of ruby • Takes ruby data structures • Interactivity and labels Friday, June 14, 13

Slide 18

Slide 18 text

=  pie_chart  Item.group("artist").count Friday, June 14, 13

Slide 19

Slide 19 text

Chartkick Friday, June 14, 13

Slide 20

Slide 20 text

Chartkick • http://ankane.github.io/chartkick/ Friday, June 14, 13

Slide 21

Slide 21 text

BONUS: jqcloud • Easy way to make word clouds with jQuery Friday, June 14, 13

Slide 22

Slide 22 text

   $.each($('.frequency'),  function(i,  freq)  {        $.getJSON('/items/words_for_field?field='+$(freq).data('field'),  function(response)  {            $(freq).jQCloud(response);        });    }); Friday, June 14, 13

Slide 23

Slide 23 text

jqcloud Friday, June 14, 13

Slide 24

Slide 24 text

jqcloud • https://github.com/lucaong/jQCloud Friday, June 14, 13

Slide 25

Slide 25 text

Thanks! Friday, June 14, 13