CGE: taux net emploi

by toubia95

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart" style="width: 900px; height: 500px;"></div>

CSS

/*
 * https://developers.google.com/chart/interactive/docs/gallery/linechart
 * https://developers.google.com/chart/interactive/docs/gallery/annotationchart
 */

JavaScript

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Date de l'enquête CGE (avril)", "Promotion 2010", "Promotion 2011", "Promotion 2012", "Promotion 2013", "Promotion 2014", "Promotion 2015"],
    ['2013', 99, 94, 82, null, null, null],
    ['2014', null, 90.5, 89.9, 75, null, null],
    ['2015', null, null, 91.4, 88.7, 68, null],
    ['2016', null, null, null, 92.2, 93.5, 71.6]
  ]);

  var options = {
    title: "Taux net d'emploi annuel par promotion",
    titleTextStyle: {
      color: 'black',
      fontSize: 20,
      bold: true,
      italic: false,
    },
    curveType: 'function',
    lineWidth: 3,
    targetAxisIndex: 1,
    legend: {
      position: 'left',
      alignment: 'start',
      textStyle: {
        color: 'black',
        fontSize: 16
      }
    },
    pointSize: 10,
    series: {
      0: {
        pointShape: 'circle'
      },
      1: {
        pointShape: 'triangle'
      },
      2: {
        pointShape: 'square'
      },
      3: {
        pointShape: 'diamond'
      },
      4: {
        pointShape: 'star'
      },
      5: {
        pointShape: 'polygon'
      }
    },
    backgroundColor: 'transparent',
    enableInteractivity: false,
    fontSize: 16,
    width: 900,
    height: 500,
    hAxis: {
      title: "Date de l'enquête CGE (avril)",
      titleTextStyle: {
        fontSize: 16,
        bold: false,
        italic: false,
      },
    },
    vAxes: {
      1: {
        title: "Taux net d'emploi (%)",
        textStyle: {
          fontSize: 16,
          bold: false,
          italic: false,
        },
        minorGridlines: {
          count: 1,
        },
        titleTextStyle: {
          italic: false
        },
      }
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart'));

  chart.draw(data, options);
}