Login/Register
How would I be able display the title in two lines with a different font size for each line?
Asked Answered
Solved javascripthtmlgraphchartsgoogle-visualization
F

1

1

I am using Google Chart API to create a time-line graph and want to modify the title of the graph into two lines.

Question:

How would I be able display the two lined chart title, with different font sizes.

Current Output:

enter image description here

Ideal Output:

enter image description here

Relevant Research:

The only thing I could find was was someone trying to do this with a pie chart, but I tried and couldn't make it work.

MWE:

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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[new Date(2021, 11, 31, 0, 0, 0), 0, ''],


	[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
	[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[new Date(2021, 11, 31, 5, 56, 41), 0, ''],

	[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
	[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[new Date(2021, 11, 31, 12, 11, 5), 0, ''],

	[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
	[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[new Date(2021, 11, 31, 15, 14, 6), 0, ''],

	[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxis

	vAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var options

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

}   //End drawChart()
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Formulate answered 15/11, 2019 at 2:31 Comment(0)
V
1

unbeknownst to the other answer, modifications to the chart,
should only be made on the chart's 'ready' event.
else, the elements may not exist yet, when the modification is tried.

here, we determine the text content of the label we want to change.
find the label containing the content,
then reduce the font size of the element. 

// listen for chart ready event
google.visualization.events.addListener(chart, 'ready', function () {
  // get label copy to change
  var labelContent = options.title.substring(options.title.indexOf('\n') + 1);

  // get chart labels
  var labels = chart.getContainer().getElementsByTagName('text');

  // find chart label
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].textContent === labelContent) {
      // reduce font size
      var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
      labels[i].setAttribute('font-size', currentFontSize - 4);
      break;
    }
  }
});

note: the font size may vary, depending on the size of the chart.
unless the font size is explicitly set in the chart options.
also, the event listener must be assigned after the chart is created,
and before the chart is drawn.

see following working snippet... 

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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[new Date(2021, 11, 31, 0, 0, 0), 0, ''],


	[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
	[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[new Date(2021, 11, 31, 5, 56, 41), 0, ''],

	[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
	[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[new Date(2021, 11, 31, 12, 11, 5), 0, ''],

	[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
	[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[new Date(2021, 11, 31, 15, 14, 6), 0, ''],

	[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxis

	vAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var options

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

  // listen for chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    // get label copy to change
    var labelContent = options.title.substring(options.title.indexOf('\n') + 1);

    // get chart labels
    var labels = chart.getContainer().getElementsByTagName('text');

    // find chart label
    for (var i = 0; i < labels.length; i++) {
      if (labels[i].textContent === labelContent) {
        // reduce font size
        var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
        labels[i].setAttribute('font-size', currentFontSize - 4);
        break;
      }
    }
  });

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

EDIT

for multiple lines, use the split method, instead of substring.

then change the font size of all matching labels, except the first. 

// get label copy to change
var labelContent = options.title.split('\n');

// get chart labels
var labels = chart.getContainer().getElementsByTagName('text');

// loop chart title lines, beginning with second line
for (var l = 1; l < labelContent.length; l++) {
  // find chart label
  for (var i = 0; i < labels.length; i++) {
    if (labels[i].textContent === labelContent[l]) {
      // reduce font size
      var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
      labels[i].setAttribute('font-size', currentFontSize - 4);
      break;
    }
  }
}

see following working snippet... 

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

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date \& Time');
data.addColumn('number', "Triggered Events");
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
	[new Date(2021, 11, 31, 0, 0, 0), 0, ''],


	[new Date(2021, 11, 31, 3, 41, 44), 0, ''],
	[new Date(2021, 11, 31, 3, 41, 44), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],

	[new Date(2021, 11, 31, 5, 56, 41), 1, 'Event Duration: 2h 14m 57s\nMax Val: XYZ °C\nStart Time: 03:41:44\nEnd Time: 05:56:41'],
	[new Date(2021, 11, 31, 5, 56, 41), 0, ''],

	[new Date(2021, 11, 31, 9, 40, 48), 0, ''],
	[new Date(2021, 11, 31, 9, 40, 48), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],

	[new Date(2021, 11, 31, 12, 11, 5), 1, 'Event Duration: 2h 30m 17s\nMax Val: XYZ °C\nStart Time: 09:40:48\nEnd Time: 12:11:05'],
	[new Date(2021, 11, 31, 12, 11, 5), 0, ''],

	[new Date(2021, 11, 31, 12, 45, 57), 0, ''],
	[new Date(2021, 11, 31, 12, 45, 57), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],

	[new Date(2021, 11, 31, 15, 14, 6), 1, 'Event Duration: 2h 28m 9s\nMax Val: XYZ °C\nStart Time: 12:45:57\nEnd Time: 15:14:06'],
	[new Date(2021, 11, 31, 15, 14, 6), 0, ''],

	[new Date(2022, 0, 1, 0, 0, 0), 0, '']
]);   //End data.addRows([])

var options = {
	title:'Generated 3 Events\nAverage Event Duration: 2h 24m 27s\nLine 3\nLine 4\nLine 5',
	tooltip: {textStyle: {fontName: 'Lucida Console', fontSize: 12} },
	width: 1100,
	height: 500,
	lineWidth: 1,
	chartArea:{width: 900, height:150 },
	series: { 0: { color: '#188785', areaOpacity: 1.0}},
	legend: {position: 'none'},
	enableInteractivity: true,

	hAxis: {
		title: 'Date \& Time',
		titleTextStyle: {bold: false, italic: false},
		format: 'dd/MM/yyyy HH:mm',
		slantedText:true,
		slantedTextAngle:90,
		gridlines: {color: 'none'},
		},  //End hAxis

	vAxis: {
		title: 'Events Triggered',
		titleTextStyle: {bold: false, italic: false},
		viewWindow: {min: 0, max: 1},
		ticks: [{ v: 0, f: 'Event Off'}, {v: 1, f: 'Event On'}],
		gridlines: { color: 'transparent' }
		},  //End vAxis

	};  //End var options

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

  // listen for chart ready event
  google.visualization.events.addListener(chart, 'ready', function () {
    // get label copy to change
    var labelContent = options.title.split('\n');

    // get chart labels
    var labels = chart.getContainer().getElementsByTagName('text');

    // loop chart title lines, beginning with second line
    for (var l = 1; l < labelContent.length; l++) {
      // find chart label
      for (var i = 0; i < labels.length; i++) {
        if (labels[i].textContent === labelContent[l]) {
          // reduce font size
          var currentFontSize = parseInt(labels[i].getAttribute('font-size'));
          labels[i].setAttribute('font-size', currentFontSize - 4);
          break;
        }
      }
    }
  });

  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Vend answered 15/11, 2019 at 12:46 Comment(3)
How about for the lines thereafter? IE Line 1 to be big font, line 2, line 3, line..., line n-1, line n. How can I keep all except line 1, small? – Formulate
<3 You're a god! :) Thank you! – Formulate
one last question that got me head scratching... – Formulate

© 2022 - 2024 — McMap. All rights reserved.