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 */
}
Related
I need to use vAxis {logScale : true ,...} in the options of a AreaChart of Google chart package but when i add logScale : true to its options, It causes a problem in the animation scan.
When i remove it, the animation works nice.
Is there any way to show animation on startup by a Google chart when vAxis.logScale is true?
Demo
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
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,
logScale:true // << It cause animation problem
},
animation:{
startup:true,
duration: 1000,
easing: 'out',
},
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
there are some known issues when using animation.startup
this appears to be another...
to get animation to work with logScale,
remove animation.startup
use a blank data table to draw the chart initially
and a one time 'ready' event listener,
to immediately draw the chart again with the correct data...
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['', 0, 0],
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {
minValue: 0,
logScale: true
},
animation:{
duration: 1000,
easing: 'out'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
data.removeRow(0);
data.addRows([
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
chart.draw(data, options);
});
chart.draw(data, options);
$(window).resize(function() {
chart.draw(data, options);
});
},
packages: ['corechart']
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I made a fix for this bug myself.
Using it is so simple. Just add the following fix function to your script and call it before first chart.draw(...).
The fix function:
function fixLogScaleAnimation(chart,data, opts){
if(opts.vAxis.logScale){
opts.vAxis.logScale=false;
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
opts.vAxis.logScale=true;
chart.draw(data, opts);
});
}
}
Use:
chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
fixLogScaleAnimation(chart,data, options); // << Call the fix function here
chart.draw(data, options);
Demo:
function fixLogScaleAnimation(chart,data, opts){
if(opts.vAxis.logScale){
opts.vAxis.logScale=false;
google.visualization.events.addOneTimeListener(chart, 'ready', function () {
opts.vAxis.logScale=true;
chart.draw(data, opts);
});
}
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
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,
logScale:true // << It cause animation problem
},
animation:{
startup:true,
duration: 1000,
easing: 'out',
},
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
fixLogScaleAnimation(chart,data, options);
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
I think my way is a better (simple and clean) solution to this problem and i made it before anyone write an answer for it here but i mark #WhiteHat's answer as accepted answer because his solution works well too and he wrote his answer here before me. ;)
The solution to this problem is changing the configuration option of your vAxis to:
vAxis: {
minValue: 0,
0: {logScale: true}
}
Making the first axis on the graph scaled as log.
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 have a Google Bar Chart using the Material design. I am trying to change its default white background color to match my page, but the color changes only the outer margin of the chart. The inner area where the chart data is stays white. I have used plain backgroundColor and the fill:... identifiers in my options and both give me the same result. Here's my code:
var barchart_options = {
width: 600,
height:350,
backgroundColor : '#CFC3F8',
.......
When trying it with the fill identifier, I did this:
backgroundColor : {fill:'#CFC3F8'},
Here's a screenshot:
there is also an option for chartArea.backgroundColor
var options = {
backgroundColor: '#CFC3F8',
chartArea: {
backgroundColor: '#CFC3F8'
}
};
and only the color is needed
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
backgroundColor: 'magenta',
chartArea: {
backgroundColor: 'cyan'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></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>
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/