Develop Reference

Google Area Chart Fixed Values [duplicate]

I have a fast question. It is possible to generate that Char in Google Charts? ... And mayby u knew how to do that (any advice or smth)?
Chart1
This white area below the chart is very important.

it's possible
use AreaChart with isStacked: true and set the bottom area to 'transparent'
since isStacked: true, most likely some data manipulation will be required to get the desired outcome
see following working snippet...
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Bottom', 'Area 1', 'Area 2', 'Area 3'],
['2010', 100, 100, 100, 100],
['2020', 110, 120, 130, 140],
['2025', 120, 160, 180, 200],
['2030', 140, 180, 200, 240],
['2035', 200, 240, 280, 320],
['2040', 260, 300, 320, 380],
['2045', 320, 400, 460, 600],
['2050', 400, 480, 600, 800]
]),
{
areaOpacity: 1.0,
colors: ['transparent', 'cyan', 'yellow', 'magenta'],
lineWidth: 1,
isStacked: true,
series: {
0: {
visibleInLegend: false
}
}
}
);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

It is possible to generate that Char in Google Charts?

I have a fast question. It is possible to generate that Char in Google Charts? ... And mayby u knew how to do that (any advice or smth)?
Chart1
This white area below the chart is very important.

it's possible
use AreaChart with isStacked: true and set the bottom area to 'transparent'
since isStacked: true, most likely some data manipulation will be required to get the desired outcome
see following working snippet...
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Bottom', 'Area 1', 'Area 2', 'Area 3'],
['2010', 100, 100, 100, 100],
['2020', 110, 120, 130, 140],
['2025', 120, 160, 180, 200],
['2030', 140, 180, 200, 240],
['2035', 200, 240, 280, 320],
['2040', 260, 300, 320, 380],
['2045', 320, 400, 460, 600],
['2050', 400, 480, 600, 800]
]),
{
areaOpacity: 1.0,
colors: ['transparent', 'cyan', 'yellow', 'magenta'],
lineWidth: 1,
isStacked: true,
series: {
0: {
visibleInLegend: false
}
}
}
);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

fill one color in google chart

We are trying to fill only one color in google area chart, with different line color.
If we use
isStacked:true
then it will change chart representation
(change y-axis max coordinate)
we want to fill only one color
(green color below the max border in chart).
fiddle

You mean like this: https://jsfiddle.net/7uyz541m/1/ or this: https://jsfiddle.net/7uyz541m/2/ ?
You can set the areaOpacity to zero to remove the filling of a series.
The difference between the first and second jsfiddle link is the isstacked value.
series: {
0: {
areaOpacity: 0
}
},
To make both areas the "same" color but the line a different color you need to add a dummy column like here: https://jsfiddle.net/7uyz541m/3

Using a ComboChart and two sets of the same data, I believe I was able to achieve the desired result.
Note definitions for each series
The first two are identical using areaOpacity: 1 to prevent color mix
These are also not visibleInLegend
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data1 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 1000, 400, 400, 1000 ],
['2014', 1170, 460, 460, 1170 ],
['2015', 660, 1120, 1120, 660 ],
['2016', 1030, 540, 540, 1030 ]
]);
var data2 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 1000, 400, 400, 1000 ],
['2014', 1170, 460, 460, 1170 ],
['2015', 660, 400, 400, 660 ],
['2016', 1030, 540, 540, 1030 ]
]);
var data3 = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Expenses', 'Sales'],
['2013', 400, 1000, 1000, 400 ],
['2014', 460, 1170, 1170, 460 ],
['2015', 400, 660, 660, 400 ],
['2016', 540, 1030, 1030, 540 ]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {
color: '#333'
}
},
vAxis: {
minValue: 0
},
series: {
0: {
areaOpacity: 1,
color: '#EF9A9A',
type: 'area',
visibleInLegend: false
},
1: {
areaOpacity: 1,
color: '#EF9A9A',
type: 'area',
visibleInLegend: false
},
2: {
color: '#5C6BC0',
lineWidth: 5,
type: 'line'
},
3: {
color: '#B71C1C',
lineWidth: 5,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data1, options);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div2'));
chart.draw(data2, options);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div3'));
chart.draw(data3, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1" style="width: 900px; height: 500px;"></div>
<div id="chart_div2" style="width: 900px; height: 500px;"></div>
<div id="chart_div3" style="width: 900px; height: 500px;"></div>

Google Chart: AreaChart vAxis Gridlines is Not Drawing

As per title above, is there anyone know why? My code is as follows, and by the way, I am using the Google Chart Playground to testing out on it, http://code.google.com/apis/ajax/playground/?type=visualization#area_chart. Please advise, thanks!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
['0:00', 1000, 500],
['1:00', 1170, 604],
['2:00', 660, 302],
['3:00', 1030, 827],
['4:00', 1222, 86]
]);
var options = {
areaOpacity: 0.7,
backgroundColor:{
color: 'none',
fill: 'none',
},
animation:{
easing: 'inAndOut',
},
hAxis: {gridlines: {color: '#000000', count: 3}},
vAxis: {gridlines: {color: '#DCDCDC', count: 5}},
tooltipTextStyle: {color: '#444444', fontName: 'Tahoma', fontSize: 12},
focusTarget: 'category',
series: {
0:{color: '#207795', lineWidth: 4, pointSize: 10},
1:{color: '#464A54', lineWidth: 4, pointSize: 10},
},
legend: 'none',
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

To get vertical gridlines you have to set hAxis gridlines (done) and change x-axis data type to a continuous data type. See Customizing Axes/Terminology and area chart: Configuration Options: hAxis.gridlines description.
Instead of
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
['0:00', 1000, 500],
['1:00', 1170, 604],
['2:00', 660, 302],
['3:00', 1030, 827],
['4:00', 1222, 86]
]);
you have to provide for example:
var data = google.visualization.arrayToDataTable([
['Hour', 'Sales', 'Expenses'],
[0, 1000, 500],
[1, 1170, 604],
[2, 660, 302],
[3, 1030, 827],
[4, 1222, 86]
]);
Note hour data is not a string any more. And if you change count value of hAxis to 5, you will get vertical line for each hour:

The Code hasn't any error, you have missed chart_div in your markup..
<div id="chart_div"></div>
See Demo
http://jsfiddle.net/rathoreahsan/LE7V3/

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.
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);
}

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>