js_charts

Transcript

1. Javascript Chart Libraries Gordon Diggs PP Dev Lightning Talks 130614 Friday, June 14, 13
2. A little history Friday, June 14, 13
3. My considerations • Lots of data • Need labels to be relevant/understandable • Raw numbers more significant than comparisons Friday, June 14, 13
4. d3.js / rickshaw probably amazing. Friday, June 14, 13
5. A chronological look at the ones I’ve used Friday, June 14, 13
6. Google Charts API • Not actually javascript • Static images • Pass all the data in the URL • Will do automatic gradient • Deprecated Friday, June 14, 13
7. 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
8. Google Charts API Friday, June 14, 13
9. 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
10.            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
11. Google Charts API (js) Friday, June 14, 13
12. Google Charts API (js) • https://developers.google.com/chart/ Friday, June 14, 13
13. Chart.js • Canvas • Good initialization • Nice animation • Limited Interactivity • No labels Friday, June 14, 13
14.        $('.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
15. Chart.js Friday, June 14, 13
16. Chart.js • http://www.chartjs.org Friday, June 14, 13
17. Chartkick • One line of ruby • Takes ruby data structures • Interactivity and labels Friday, June 14, 13
18. =  pie_chart  Item.group("artist").count Friday, June 14, 13
19. Chartkick Friday, June 14, 13
20. Chartkick • http://ankane.github.io/chartkick/ Friday, June 14, 13
21. BONUS: jqcloud • Easy way to make word clouds with jQuery Friday, June 14, 13
22.    $.each($('.frequency'),  function(i,  freq)  {        $.getJSON('/items/words_for_field?field='+$(freq).data('field'),  function(response)  {            $(freq).jQCloud(response);        });    }); Friday, June 14, 13
23. jqcloud Friday, June 14, 13
24. jqcloud • https://github.com/lucaong/jQCloud Friday, June 14, 13
25. Thanks! Friday, June 14, 13