Guest User

Two-Columns Google Chart with labels

a guest
Sep 27th, 2013
3,269
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2.   <head>
  3.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  4.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  5.     <script type="text/javascript">
  6.     google.load("visualization", "1", {packages: ["corechart"]});
  7.     google.setOnLoadCallback(drawChart);
  8.  
  9.     function drawChart() {
  10.       var data = new google.visualization.DataTable();
  11.       data.addColumn('string', 'Name');
  12.       data.addColumn('number', 'Fetes');
  13.       data.addColumn({type: 'string', role: 'annotation'});
  14.       data.addColumn('number', 'Fora Termini');
  15.       data.addColumn({type: 'string', role: 'annotation'});
  16.      
  17.       data.addRows([
  18.         ['Gener', 53, '53', 5, '5'],
  19.         ['Febrer', 71, '71', 15, '15'],
  20.         ['Marc', 36, '36', 25, '25'],
  21.         ['Abril', 42, '42', 5, '5']
  22.       ]);
  23.  
  24.       var view = new google.visualization.DataView(data);
  25.       view.setColumns([0, 1, 1, 2, 3, 3, 4]);
  26.  
  27.       var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  28.  
  29.       chart.draw(view, {
  30.         height: 400,
  31.         width: 500,
  32.         series: {
  33.             0:{type: 'bars',color: 'blue'},
  34.             2:{type:'bars', color: 'red'},
  35.             1:{type: 'line',color: 'blue',lineWidth: 0,pointSize: 0,visibleInLegend: false},
  36.             3:{type: 'line',color: 'red',lineWidth: 0,pointSize: 0,visibleInLegend: false}
  37.         }
  38.       });
  39.  
  40.       mydiv = $("#chart_div");
  41.       labels = mydiv.find('svg > g > g > g > g > g > text');
  42.       for (i = 0; i < labels.length; i++) {
  43.           el = $(labels[i]);
  44.           changeElementPos(el);
  45.       }
  46.       rects = mydiv.find('svg > g > g > g > rect');
  47.       for (i = 0; i < rects.length; i++) {
  48.           if($(rects[i]).attr('width') == '1') $(rects[i]).remove();
  49.       }
  50.     }
  51.  
  52.     function changeElementPos($el) {
  53.         obj = {
  54.             x: parseFloat($el.attr("x")),
  55.             y: parseFloat($el.attr("y")),
  56.             fill: $el.attr("fill")
  57.         }
  58.         $el.attr('y',(obj.y+5));
  59.         if (obj.fill == "#0000ff") $el.attr('x',(obj.x-11));
  60.         if (obj.fill == "#ff0000") $el.attr('x',(obj.x+11));
  61.     }
  62.  
  63.    
  64.     </script>
  65.   </head>
  66.   <body>
  67.     <div id="chart_div"></div>
  68.   </body>
  69. </html>
Advertisement
Add Comment
Please, Sign In to add comment