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>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/da76174d-2e3b-4d58-9d5f-3c01da143fefn%40googlegroups.com.
