CHART: tx net emploi

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 = "CONCOURS D'ENTRÉE";
var tableau = [
  ['BCPST', 63],
  ['MP', 6],
  ['PC', 7],
  ['PSI', 3],
  ['CPP', 8],
  ['L3', 1],
  ['AUTRE', 1],
]

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

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': 800,
    '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': 20,
      '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': 18,
        'bold': false,
        'italic': false,
      },
    },
    //'is3D': true, // 3D
    //'pieHole': 0.4, // Donut
    'pieSliceText': 'value', //percentage, value, label, none, value-and-percentage
    'pieSliceTextStyle': { // none
      'color': 'white',
      'fontName': 'Helvetica',
      'fontSize': 20,
    },
    'pieSliceBorderColor': 'white',
    'slices': {
      0: {
        //'offset': 0.05,
        //'color': 'green',
     ...