CODEWITHSUNDEEP
javascriptcharts
Rob
Rob

Reputation: 1495

Google Area Chart axis and setting full width

I'm trying to style and add another 2 x'axis to a Google area chart (a and b in the image). For example, the a axis should be set to 900 and b: 700.

Also trying to extend the chart to the full width of the containing div (960px) but my solution seems to do nothing.

This is the desired effect This is the desired effect.

Current js

google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales', 'Expenses'],
            ['November',  1000,      400],
            ['December',  1170,      460],
            ['January',  660,       1120],
            ['February',  690,       1120],
            ['March',  780,       1120],
            ['April',  820,       1120],
            ['May',  660,       1120],
            ['June',  1030,      540]
    ]);

    var options = {
      title: '',
      backgroundColor: 'none',
      width:'960',
      legend: {position: 'none'},
      hAxis: {title: 'Year',  titleTextStyle: {color: 'grey'},
      }
    };

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

Upvotes: 22

Views: 24927

Answers (1)

gilly3
gilly3

Reputation: 91497

To get the chart width right, add a chartArea definition to your options object. The chartArea settings are listed in the AreaChart documentation under "Configuration Options":

chartArea: {
    left: 40,
    top: 10,
    width: 900,
    height: 350
}

Demo: http://jsfiddle.net/2H7sp/ 

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['November', 1000, 400],
        ['December', 1170, 460],
        ['January', 660, 1120],
        ['February', 690, 1120],
        ['March', 780, 1120],
        ['April', 820, 1120],
        ['May', 660, 1120],
        ['June', 1030, 540]
    ]);

    var options = {
        title: '',
        backgroundColor: 'none',
        legend: { position: 'none' },
        hAxis: {
            title: 'Year',
            titleTextStyle: {
                color: 'grey'
            }
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>

You'll need to play with the numbers a little bit. chartArea refers to the graphical portion of the chart, excluding the axes, title, and legend. So you need to add padding to your values in order to leave room.

Edit: To get the horizontal lines, you'll need to add two additional series with values of 900 and 700 for each row in the respective columns:

var data = google.visualization.arrayToDataTable([   
    [ 'Year',     'Sales',  'Expenses',  'a',   'b'  ],
    [ 'November',  1000,     400,         900,   700 ],   
    [ 'December',  1170,     460,         900,   700 ],   
    [ 'January',   660,      1120,        900,   700 ],
    ...

To get the colors right, specify a definition for the series option that sets the area invisible and the line color black for the two new series.

var options = {
    ...
    series: {
        2: { areaOpacity: 0, color: "#000" },
        3: { areaOpacity: 0, color: "#000" }
    },
    ...

This is close, but the lines will be solid instead of dashed, and there will be no labels. You can get these effects by adding columns with roles to your data table. You'll not be able to use .arrayToDataTable() for this, but instead will need to use the more verbose syntax:

var data = new google.visualization.DataTable();
data.addColumn("string", "Year");
data.addColumn("number", "Sales");
data.addColumn("number", "Expenses");
data.addColumn("number", "a");
data.addColumn("number", "b");
data.addRows([
    ['November', 1000, 400,  900, 700],
    ['December', 1170, 460,  900, 700],
    ['January',  660,  1120, 900, 700],
    ...

For dashed lines add a certainty role column following each of your "a" and "b" columns:

data.addColumn({ type: "boolean", role: "certainty" });

To get the "a" and "b" labels add a annotation role columns following each of your certainty columns:

data.addColumn({ type: "string", role: "annotation" });

The certainty column values should all be false. The annotation column values should all be null except for the last row where you want the label to appear. The annotation aligns above the data point instead of to the right where you want it, but that's as good as you can get.

Your data rows with the new columns added will look like this:

data.addRows([
    ['November', 1000, 400,  900, false, null, 700, false, null],
    ['December', 1170, 460,  900, false, null, 700, false, null],
    ...
    ['May',      660,  1120, 900, false, null, 700, false, null],
    ['June',     1030, 540,  900, false, "a",  700, false, "b"]
]);

And, here's the end result: http://jsfiddle.net/2H7sp/2/ 

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn("string","Year");
    data.addColumn("number","Sales");
    data.addColumn("number","Expenses");
    data.addColumn("number","a");
    data.addColumn({type:"boolean",role:"certainty"});
    data.addColumn({type:"string",role:"annotation"});
    data.addColumn("number","b");
    data.addColumn({type:"boolean",role:"certainty"});
    data.addColumn({type:"string",role:"annotation"});
    data.addRows([
        ['November', 1000, 400,  900, false, null, 700, false, null],
        ['December', 1170, 460,  900, false, null, 700, false, null],
        ['January',  660,  1120, 900, false, null, 700, false, null],
        ['February', 690,  1120, 900, false, null, 700, false, null],
        ['March',    780,  1120, 900, false, null, 700, false, null],
        ['April',    820,  1120, 900, false, null, 700, false, null],
        ['May',      660,  1120, 900, false, null, 700, false, null],
        ['June',     1030, 540,  900, false, "a",  700, false, "b"]
    ]);

    var options = {
        title: '',
        backgroundColor: 'none',
        legend: { position: 'none' },
        hAxis: {
            title: 'Year',
            titleTextStyle: { color: 'grey' }
        },
        series:{
            2:{areaOpacity:0,color:"#000"},
            3:{areaOpacity:0,color:"#000"}
        },
        chartArea: {
            left: 40,
            top: 10,
            width: 600,
            height: 150
        }
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
body { margin: 0; }
#chart_div {
    background-color: #f5f5f5;
    width: 660px;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
}
<script src="https://www.google.com/jsapi?jsapi.js"></script>
<div id="chart_div"></div>

Upvotes: 42

Related Questions