CHART: budget OTELo

by toubia95

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.6/download.min.js"></script>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<a href="#" id="dl">Télécharger le graphique en SVG pour Illustrator</a>

CSS

/* 
 * https://google-developers.appspot.com/chart/
 * http://stackoverflow.com/questions/12698003/save-a-google-chart-as-svg
 * http://stackoverflow.com/questions/20069226/google-pie-chart-how-can-i-change-the-color-of-lines-in-the-legend
 * http://stackoverflow.com/questions/16282210/google-charts-pie-chart-title-position
 * http://stackoverflow.com/questions/11266286/center-align-title-google-chart
 */

JavaScript

var titre = "ORIGINE DES RECETTES DE L'ANNEE 2015 EN EUROS";
var tableau = [
  ["Masse salariale d'Etat", 16451712],
  ["Dotation annuelle (crédits scientifiques et d'infrastructures)", 1305553],
  ["Projets UL et EPST", 904400],
  ["ICEEL", 241180],
  ["Projets locaux", 1393931],
  ["ANR", 2379822],
  ["Projets européens", 1036339],
  ["EPIC", 1157866],
  ["Contrats de partenariat industriel", 2206651],
  ["Prestations", 1801604],
  ["Autres", 442310],
  ["Soutien aux équipements", 111310],
]

var position_titre_x = 165;
var position_titre_y = 75;
var position_legende = 460;
var couleur_titre_et_legende = 'black';

google.charts.load('current', {
  'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');

  // type de graphique
  data.addColumn('number', 'Slices');

  // valeurs
  data.addRows(tableau);

  // options
  var options = {
    'width': 1500,
    'height': 450,
    'backgroundColor': {
      fill: 'transparent'
    },
    'colors': [
      '#464895', '#954a93', '#e42617', '#f19037', '#49a828', '#3cb2e1',
      "#1971c5", "#b55cd4", "#c14d27", "#6cb46f", "#b9b66e", "#2fd9e6",
      '#7577b0', '#b077ae', '#eb5c51', '#f5ac69', '#77be5e', '#6dc5e9'
    ],

    'reverseCategories': false,
    'pieStartAngle': 0,
    'enableInteractivity': false,
    'tooltip': {
      'trigger': 'none'
    },
    'fontSize': 20,
    'title': titre,
    'titleTextStyle': {
      'color': couleur_titre_et_legende,
      'fontName': 'Helvetica',
      'fontSize': 16,
      'bold': true,
      'italic': false,
    },
    'legend': {
      'position': 'right', // labeled, top, right, bottom, left, none
      'alignment': 'center', //start, center, end
      'textStyle': {
        'color': couleur_titre_et_legende,
        'fontName': 'Helvetica',
        'fontSize': 14,
        'bold': false,
        'italic': false,
      },
    },
    //'is3D':...