How to match AreaChart colors to PieChart slices

[Mele Couvreur]

I have created a piechart and an areachart, both representing the number of tickets sold per type, with the piechart focusing on the total number of tickets sold and the areachart the timeline they were sold. I now want to make sure the color assigned to each ticket type is replicated across both charts. Initially I thought of simply sorting the data based on number of tickets sold and assigning colors based on order, but the data structure for the areachart and the piechart is slightly different and the areachart only includes total tickets sold per day vs all time. My plan was to assign colors based on the number of total tickets sold in the piechart and the mimic that in the timeline by assigning colors based on matching ticket type names. I tried doing this by adding an extra column to the chart with the 'style' property, storing the color data there but it doesn't seem to work. Any advice? This is my code sofar: 

<script type="text/javascript">
google.charts.load('current', {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);


<?php $colorMapping = [
'another\x20type' => 'red',
'xxx' => 'green',
'General Admission'=> 'blue',
'group test - General Admission'=> 'black',
'another type (inc. test)'=> 'purple',
'free' => 'green'
];
?>

function getTimelineData() {
let data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
<?php
foreach($this->ticketTypes as $ticketType) { ?>
data.addColumn('number', "<?php $this->echoEscapeJs($ticketType); ?>");
<?php
} ?>
data.addColumn({type: 'string', role: 'style'})
<?php
foreach($this->timeline as $day => $value) { ?>
data.addRow(["<?php $this->echoEscapeJs($day); ?>", <?php $this->echoEscapeJs(implode(',', $value)); ?> , '<?php $this->echoEscapeHtml('test') ?>'; ]);
<?php
} ?>
return data;
}

function getPieChartData($colorMapping) {
let data = new google.visualization.DataTable();
data.addColumn('string', 'Ticket type');
data.addColumn('number', 'Quantity');
data.addColumn({type: 'string', role: 'style'})
<?php
foreach($this->table['ticket_type_lines'] as $ticketType) {
?>
data.addRow(["<?php $this->echoEscapeJs($ticketType['ticket_type_name']); ?>", <?php $this->echoEscapeJs($ticketType['quantity']); ?>, '<?php isset($colorMapping[$ticketType['ticket_type_name']]) ? $this->echoEscapeJs(array_keys($colorMapping, $ticketType['ticket_type_name'])) : "red"?>' ]);
<?php
} ?>
return data;
}

function drawChart() {
new google.visualization.AreaChart(document.getElementById('timeline_div'))
.draw(getTimelineData(), {
curveType: "function",
height: 400,
colors: 'style',
vAxis: {
title: 'Tickets issued'
},
hAxis: {
slantedText: true
}
});
new google.visualization.PieChart(document.getElementById('pieChart_div'))
.draw(getPieChartData(), {
chartArea: {
width: '100%',
height: 400,
},
legend: {
position: 'labeled'
},
fontSize: 14,
sliceVisibilityThreshold: 0.05,
pieSliceText: 'none',
colors: 'style',
});
var pieChartData = getPieChartData();
console.log(pieChartData)
}
setTimeout(drawChart, 200);
//create trigger to resizeEnd event
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
drawChart();
}, 500);
});
</script>