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/
Related
Here is a codepen
https://codepen.io/nick-ladieu/pen/PobBbXM
Here is my current JS
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: "",
chartArea: {
left: '3%',
top: '3%',
height: '100%',
width: '100%'
},
pieHole: 0.2,
width:'100%',height:'100%',
tooltip: {
trigger: "none"
},
pieSliceBorderColor: "none",pieSliceText: "none",
colors: ['green', 'blue', 'pink','orange', 'purple' ],
legend: {
position: "labeled",
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart2);
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div2'));
chart.draw(data, options);
}
$(window).resize(function(){
drawChart1();
drawChart2();
});
I am trying to make a responsive layout which includes a donut chart where the client has requested that the chart include the lines for labels instead of a legend.
I have this somewhat working, however when the width is reduced to a mobile view the chart labels are cut off, I'm not sure how to approach dynamically reducing the chart size so that the labels can be visble
Example of issue
What worked for me was to change the font size with css. Normally you would want your mobile font size smaller, so my advice is:
.your-chart-class text {
font-size: 11px; /* or any other smaller font size you want */
}
I am using google chart. I want to slate text on x-axis and should be minimum value is 0 in y-axis. After some google i put some snippet not it working.
Here is my code:-
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6']
};
var chart = new google.charts.Bar(document.getElementById('days-leads'));
chart.draw(data, options);
there are many options that simply do not work with material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedText
{hAxis,vAxis,hAxes.*,vAxes.*}.slantedTextAngle
{hAxis,vAxis,hAxes.*,vAxes.*}.minValue
see --> Tracking Issue for Material Chart Feature Parity #2143
material chart --> google.charts.Bar -- packages:['bar']
core chart --> google.visualization.ColumnChart -- packages:['corechart']
however, for core charts, there is an option for...
theme: 'material'
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var loadDaysLeadGraphData = [
['Year', 'Value'],
['2005', 58],
['2006', 63],
['2007', 66],
['2008', 66],
['2009', 81],
['2010', 85],
['2011', 86],
['2012', 86],
['2013', 89],
['2014', 90],
['2015', 90]
];
var data = google.visualization.arrayToDataTable(loadDaysLeadGraphData);
var options = {
hAxis: {
title: "Month",
textPosition: 'out',
slantedText: true,
slantedTextAngle: 90
},
vAxis: {
title: 'Revenue',
minValue: 0,
viewWindow: { min: 0 },
format: '0',
},
height: 260,
colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
theme: 'material'
};
var chart = new google.visualization.ColumnChart(document.getElementById('days-leads'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="days-leads"></div>
I want to accomplish google stacked area chart.
Here is the js fiddle:
Js Fiddle
I also tried adding the options for stacked area:
var options_fullStacked = {
isStacked: 'relative',
height: 300,
legend: {position: 'top', maxLines: 3},
vAxis: {
minValue: 0,
ticks: [0, .3, .6, .9, 1]
}
};
It is available in the documentation for google charts:stacked area
I want to display it as shown in this figure:
Please ignore everything else in this figure except the stacked area chart displayed in between the line chart and the map
seems to work here, is there more you can share?
see following examples...
isStacked: true
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: true,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
isStacked: false
google.charts.load('current', {
callback: function () {
new google.visualization.AreaChart(document.getElementById('chart_div')).draw(
google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]),
{
title: 'Company Performance',
isStacked: false,
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
}
);
},
packages:['corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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>
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>