Column Chart - image icons on hAxis

23 views

Skip to first unread message

Thomas Stopp

unread,

Jan 8, 2019, 5:13:26 AM1/8/19

to Google Visualization API

Hello everybody!

I want to check Google Charts to rebuild a column chart similar to this one:

Now my question: is it possible to adjust the data or the options to show small image icons on the hAxis instead of just the text "Player 1-10"?

My code:

<html>

<head>

var data;

var chart;

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

google.charts.setOnLoadCallback(drawScorer);

function drawScorer() {

// set data

var topAssistColor = 'color:#b3bdc7;';

var topGoalerColor = 'color:#cd3223;';

data = new google.visualization.arrayToDataTable(

[

['Kategorie', 'Vorlagen', {role: 'style'}, 'Tore', {role: 'style'}, { role: 'annotation' }],

['Player 1', 6, topAssistColor, 8, , '14'],

['Player 2', 6, topAssistColor, 8, , '14'],

['Player 3', 4, , 9, topGoalerColor, '13'],

['Player 4', 4, , 7, , '11'],

['Player 5', 4, , 7, , '11'],

['Player 6', 3, , 8, , '15'],

['Player 7', 6, topAssistColor, 4, , '10'],

['Player 8', 5, , 4, , '9'],

['Player 9', 1, , 7, , '8'],

['Player 10', 0, , 8, , '8']

]

);

// set options

var options = {

annotations: {

alwaysOutside: true,

textStyle: {

bold: true,

color: '#08111f'

}

title:'Spieler-Rangliste Scorer',

titleTextStyle:{

color: '#6b7d8b',

bold: true

tooltip: {

textStyle: {

color: '#08111f',

bold: true

showColorCode: true

width: 600,

height: 450,

legend: { position: 'right' },

isStacked:true,

colors:['#e4e4e4','#e69078'],

hAxis: {

baselineColor: '#d7d7d7',

gridlines: {color: '#333', count: 1}

vAxis: {

ticks: [5,10,15],

baselineColor: '#d7d7d7'

}

};

chart = new google.visualization.ColumnChart(document.getElementById('drawArea'));

chart.draw(data, options);

}

</script>

</head>

<body>

</body>

</html>

Thanks & greetz
Thommy

Reply all

Reply to author

Forward

0 new messages