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>
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 */
}
When I use combo chart and use mixture of candlesticks and stepped aria chart with hAxis ticks,
it doesn't render candlesticks chart and only displays the stepped area.
I want to break the steps on vertical grids on candles but don't know how to do it.
This is my code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Date', 'Low', 'Open', 'High', 'Close', 'Average'],
[{v:1, f:"2014/05/01"}, 200, 300, 500, 400 , 100],
[{v:2, f:"2014/05/02"}, 300, 400, 600, 700 , 200],
[{v:3, f:"2014/05/03"}, 100, 150, 200, 300 , 400],
[{v:4, f:"2014/05/04"}, 100, 150, 200, 300 , 400]
]);
var options = {
areaOpacity: 0,
bar: { groupWidth: '60%' },
series: {
0: {type: "candlesticks"},
1: {type: "steppedArea"}
},
hAxis: { ticks: [{v:1, f:"2014/05/01"},{v:2, f:"2014/05/02"},{v:3, f:"2014/05/03"},{v:4, f:"2014/05/04"}]}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
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.
This is the code which I tried to show the chart with the help of Google chart.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br/>
<script>
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
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 = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'Vertical', // Required for Material Bar Charts.
hAxis: {format: 'decimal'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
This is the code I tried to show the bar chart. I just want to show dollar ($) sign in Y axis. Please help in this.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<br/>
<script>
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
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 = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'Vertical', // Required for Material Bar Charts.
vAxis: {format: 'currency'},
height: 400,
colors: ['#1b9e77', '#d95f02', '#7570b3']
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var btns = document.getElementById('btn-group');
btns.onclick = function (e) {
if (e.target.tagName === 'BUTTON') {
options.hAxis.format = e.target.id === 'none' ? '' : e.target.id;
chart.draw(data, google.charts.Bar.convertOptions(options));
}
}
}
</script>
https://jsfiddle.net/wdf6wvpt/
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>