adding horizontal,vertical labels to a histogram chart

Yves De Jesus

unread,

Nov 25, 2019, 10:32:01 PM11/25/19

to Google Visualization API

Hello,

I've bolded the problem I'm trying to fix. Basically, I'm trying to add a "Efficiency (Energy-use intensity/Energy-use per square ft.)" as a bottom label.

here is my data viz:

<html>
<head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Building', 'EUI'],
          ['Telecommunications Building', 705.6],
          ['Kolthoff Hall',    431.9],
          ['SE Steam Plant',    418.1],
          ['Center For Magnetic Resonance Research',    409.1],
          ['Physics and Nanotechnology',    371.9],
          ['Lions Research/McGuire Translational Research Facility',    357.5],
          ['Cancer & Cardiovascular Research Building',    353.9],
          ['Jackson Hall',    350.6],
          ['Medical Biosciences Building',    350.0],
          ['Aquatic Center',    340.6],
          ['Dwan Variety Club Cardio Research Center',    338.7],
          ['Smith Hall',    322.3],
          ['Phillips-Wangensteen Building',    319.6],
          ['Molecular and Cellular Biology',    299.6],
          ['Thompson Center for Environmental Management',    293.2],
          ['Amundson Hall',    290.5],
          ['Walter Library',    280.5],
          ['Bierman Field Athletic Building',    249.2],
          ['Shepherd Laboratories',    249.0],
          ['Transportation & Safety Building',    244.8],
          ['Moos Health Sciences Tower',    235.4],
          ['Weaver-Densford Hall',    235.1],
          ['Diehl Hall',    228.5],
          ['Hasselmo Hall',    226.8],
          ['Tate Laboratory Of Physics',    224.5],
          ['Keller Hall',    224.1],
          ['Microbiology Research Facility',    224.0],
          ['Clinics and Surgery Center',    213.2],
          ['Bierman Field Clubhouse',    187.8],
          ['Mechanical Engineering',    187.3],
          ['Mayo Building & Additions',    177.3],
          ['Boynton Health Service',    172.2],
          ['Variety Club Research Center',    161.2],
          ['717 Delaware St. SE (MN Dept. of Health)',    160.1],
          ['Cooke Hall',    159.6],
          ['Office of Information Technology Bldg',    158.4],
          ['MAST Laboratory',    158.3],
          ['Recreation Center',    148.7],
          ['Student Recreational Sports Field',    143.7],
          ['Elliott Hall',    141.9],
          ['Centennial Hall',    137.1],
          ['Childrens Rehabilitation Center',    133.9],
          ['Siebert Stadium',    128.7],
          ['Pattee Hall',    127.7],
          ['Comstock Hall',    122.6],
          ['Sanford Hall',    120.2],
          ['Territorial Hall',    117.2],
          ['Frontier Hall',    116.6],
          ['Ridder Arena & Tennis Facility',    114.2],
          ['17th Avenue Residence Hall',    110.3],
          ['Akerman Hall', 106.7],
          ['Coffman Memorial Union',    104.7],
          ['Child Development',    104.4],
          ['Rapson Hall',    102.9],
          ['Yudof Hall',    100.6],
          ['Civil Engineering Building',    99.9],
          ['Peik Hall',    99.6],
          ['Murphy Hall',    98.9],
          ['Mariucci Arena',    97.7],
          ['Campus Substation',    90.8],
          ['Northrop Memorial Auditorium',    90.5],
          ['Landcare & Facilities Operations',    89.9],
          ['Appleby Hall',    89.6],
          ['Vincent Hall',    89.1],
          ['TCF Bank Stadium',    88.3],
          ['Ford Hall',    87.2],
          ['Morrill Hall',    85.6],
          ['Jones Hall',    84.7],
          ['Peik Gymnasium',    83.9],
          ['Gibson/Nagurski Football Practice Facility',    83.9],
          ['Scott Hall',    82.7],
          ['1901 University Avenue SE',    79.6],
          ['Weisman Art Museum',    78.3],
          ['Williamson Hall',    77.1],
          ['Johnston Hall',    75.5],
          ['Education Sciences',    71.9],
          ['Roy Wilkins Hall',    70.4],
          ['Boathouse',    69.8],
          ['Fraser Hall',    68.4],
          ['Recreation Center Expansion',    66.8],
          ['Armory',    66.0],
          ['Shevlin Hall',    63.6],
          ['MN Geological Survey',    62.8],
          ['Bruininks Hall',    62.3],
          ['Folwell Hall',    60.8],
          ['Lind Hall',    60.4],
          ['University Office Plaza',    60.3],
          ['Williams Arena and Sports Pavilion',    59.6],
          ['Burton Hall',    59.3],
          ['McNamara Alumni Center',    59.1],
          ['10 Church Street Building',    57.0],
          ['Nicholson Hall',    55.0],
          ['Nolte Center',    50.5],
          ['Donhowe Building',    47.5],
          ['Pillsbury Hall',    44.6],
          ['Field House',    43.3],
          ['Wulling Hall',    35.0],
          ['1425 University Avenue SE',    29.3],
          ['Pioneer Hall',    28.8],
          ['Keeler Apartments',    17.7],
          ['University Avenue Parking Ramp',    11.3],
          ['Church Street Garage',    11.1],
          ['Washington Avenue Pedestrian Bridge',    9.1],
          ['Fourth Street Parking Ramp',    6.6],
          ['East River Parkway Garage',    5.9],
          ['Eddy Hall',    4.6],
          ['Oak Street Parking Ramp',    1.7],
          ['Washington Avenue Parking Ramp',    1.4]

        ]);

        var options = {
          title: 'Efficiency of East Bank Buildings',
          legend: { position: 'none' },
          colors: ['gold'],
          histogram: { hideBucketItems: true },
          histogram.hideBucketItems: true

          hAxistitle: 'Energy-use per square ft.'
        };

        var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
</head>
<body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>

Ray Thomas

unread,

Nov 26, 2019, 11:57:54 PM11/26/19

to Google Visualization API

Hello Yves,

what you want is

var options = {

title: 'Efficiency of East Bank Buildings',

legend: { position: 'none' },

colors: ['gold'],

histogram: { hideBucketItems: true },

hAxis: { title: 'Efficiency (Energy-use intensity/Energy-use per square ft.)'},

};

You have to try and realize the difference between how the examples are written in the Configuration Options of the charts and how to use them in the options block or you will keep running into problems.

Yves De Jesus

unread,

Nov 27, 2019, 12:02:45 AM11/27/19

to google-visua...@googlegroups.com

Thanks so much Ray! I got my histogram to getting both the x,y-axis labels

var options = {

title: 'Efficiency of East Bank Buildings, in Energy-Use Index (EUI)',

legend: { position: 'none' },
colors: ['gold'],

fontName: 'PT Sans',
fontSize: 18,

hAxis: {
title: 'EUI (kBTU/ft squared)',
textStyle: {
color: 'black',
fontSize: 14,
fontName: 'PT Sans',
bold: false,
italic: false
},

titleTextStyle: {
color: '#black',
fontSize: 18,
fontName: 'PT Sans',
bold: false,
italic: false
}
},

vAxis: {
title: 'Count of buildings',
textStyle: {
color: 'black',
fontSize: 14,
fontName: 'PT Sans',
bold: false
},
titleTextStyle: {
color: 'black',
fontSize: 20,
fontName: 'PT sans',
bold: false,
italic: false
}
},

};

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/V2K5EPAF85o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/45d54639-c1ab-46f1-b632-3acad95c0533%40googlegroups.com.

--

Yves

Ray Thomas

unread,

Nov 27, 2019, 10:46:48 AM11/27/19

to Google Visualization API

Cool. These charts really are versatile, but sometimes it's a little bit of work to get them how you want them. Ray

Yves De Jesus

unread,

Nov 27, 2019, 4:50:28 PM11/27/19

to google-visua...@googlegroups.com

Hi Ray,

Do you know if it would be possible to add a label below my horizontal-axis labels? I'm trying to put a descriptor on either side of the horizontal-axis because my audience won't necessarily know or understand what either ends of the my x-axis range mean without me putting a descriptor.

hope that made sense,

On Wed, Nov 27, 2019 at 9:47 AM 'Ray Thomas' via Google Visualization API <google-visua...@googlegroups.com> wrote:

Cool. These charts really are versatile, but sometimes it's a little bit of work to get them how you want them. Ray

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/V2K5EPAF85o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/c2d28917-ba3b-46d1-a89f-19546bf785eb%40googlegroups.com.

--

Yves

Message has been deleted

Ray Thomas

unread,

Nov 28, 2019, 1:08:38 AM11/28/19

to Google Visualization API

Because this is going to be under all the chart elements, I'd be tempted to go back to plain HTML/CSS. Something like this.

<p id="left" style="width: 40%; float: left;">This is the left-hand description</p>

<p id="right" style="width: 40%; float: left; text-align: right;">This is the right-hand description</p>

</div>

Yves De Jesus

unread,

Dec 4, 2019, 10:53:02 PM12/4/19

to google-visua...@googlegroups.com

Hello Ray,

see the attached image for reference.

As you can see, the bottom descriptors could be utilized better for sourcing (UMN), which is what I did. Is there a way to add the descriptors just right under number range (on either side)?

Also I've changed the bolded title to a question. I was thinking of writing short paragraph underneath as the subhead. Is there a way to add a subhead?

Sorry for the many questions,

--

title: 'How efficient is East Bank?',

legend: { position: 'none' },
colors: ['gold'],

var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>

<p id="left" style="width: 40%; float: left;">Source: University of Minnesota</p>
<p id="right" style="width: 40%; float: left; text-align: right;">Uses more energy per ft2</p>
</div>

</body>
</html>

--

You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/V2K5EPAF85o/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/39756b18-f08c-461a-ba7b-73ed465a6c89%40googlegroups.com.

--

Yves

Screen Shot 2019-12-04 at 9.48.24 PM.png

Ray Thomas

unread,

Dec 6, 2019, 12:22:39 PM12/6/19

to Google Visualization API

Hello again Yves,

You can add new lines to titles and labels by using \n in the text. BUT - you cannot (as far as I know) easily restyle it. What I did was copy your code and put it at http://brisray.com/test/yves.htm so I could see what I can do to help you. I also tidied up what I wrote before so there isn't so much CSS and clutter.

You see the bottom haxis title is now on two lines? That is done by adding \n to the text.

title: 'EUI (kBTU/ft squared) \n >> Uses more energy per ft2 >>',

in the haxis options.

When I tried doing that to the main title it did work but it used the title styling which not what I think you want. What I did then was remove the title and subtitle from the chart itself and used them separately. The problem with that is that there was a huge gap between that text and top of the chart.

There is a way around that though by using the chartArea options. Details about that are available in the documentation - https://developers.google.com/chart/interactive/docs/gallery/histogram#configuration-options So I added

chartArea:{top:10}

to your options to reduce the size of the gap.

WhiteHat on StackOverflow did come up with a way to insert a subtitle into the chart, but to me it seems a bit over-complicated for the result achieved - https://stackoverflow.com/questions/41893055/add-subtitle-in-areachart-in-google-chart

Reply all

Reply to author

Forward