Google Chart Pie Chart

by liggth

HTML

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

JavaScript

google.charts.load('current', {packages:['corechart']});  
			google.charts.setOnLoadCallback(drawLineChart);
      
      function drawLineChart(){
        var data =[
            ['Date', 'Sales', 'Expenses', 'Expenses2'],
            [new Date(2001,01,01),  1000,      400,      200],
            [new Date(2002,01,01),  1170,      460,      100],
            [new Date(2003,01,01),  660,       1120,      500],
            [new Date(2004,01,01),  1030,      540,      120],
            [new Date(2005,01,01),  1030,      540,      300],
          ];
        drawChart(data);
      }
      
           
function drawChart(data) {
  data = google.visualization.arrayToDataTable(data);

	var options = {
		title: '',
		curveType: 'function',
    width: '80%',
		height: 400,
		chartArea: {
			backgroundColor: {
				'fill': '#fff',
				'opacity': 100
			},
			width: '90%',
			height: '80%',
		},
		legend: {
			position: 'bottom',
			textStyle: {fontSize: 14, bold: true}
		},
		pointSize: 3,
		dataOpacity: 0.5,
		displayAnnotations: true,
		annotations: {
			stem: {
				length: 12
			},
			textStyle: { fontSize: 11 },
			style: 'points',
			alwaysOutside: true
		},
		is3D: true,
		hAxis: {
			textStyle : {
				fontSize: 12
			},
			format: 'YYYY-MM-dd'
		},
		explorer: {
			actions: ['dragToZoom', 'rightClickToReset'],
			axis: 'horizontal',
			keepInBounds: true,
			maxZoomIn: 4.0
		}
	};

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }