The legend labels for my pie chart are being cut off when the label is too long. I have already tried to setting width to '100%' but my legend is way big to counter that. Is there a way to discretely define the pie chart size and the legend size? Could someone please share a working example of the same.
Link for JS Fiddle: https://jsfiddle.net/2nzzLe18
The container div dimensions and the legend label font size are part of my requirement.
Also below is the code,
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['info regarding task Work', 11],
['info regarding task Eat', 2],
['info regarding task Commute', 2],
['info regarding task Watch TV', 2],
['info regarding task Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
chartArea: {left: -100, width: '100%'},
legend: {textStyle: {fontSize: 15}},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
Thanks,
Farhan
it can be cumbersome to properly size a pie chart,
but it boils down to adjusting the size of the overall chart div,
and the size of the chartArea, where the pie is drawn (separate from the legend)
it can be tricky because it doesn't always respond how you think it should,
but I was able to get the entire legend to display
see the following working snippet,
moved the overall size from the style attribute on the div
to the options for the chart, then adjusted the chartArea
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['info regarding task Work', 11],
['info regarding task Eat', 2],
['info regarding task Commute', 2],
['info regarding task Watch TV', 2],
['info regarding task Sleep', 7]
]);
var options = {
backgroundColor: 'cyan',
title: 'My Daily Activities',
chartArea: {
left: 0,
height: 250,
width: 600
},
height: 300,
width: 600,
legend: {
maxLines: 1,
textStyle: {
fontSize: 15
}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart"></div>
Related
I'm using Google's geochart. I'm using the number of visits per country as the data to be displayed. But, the data is not linear. So, instead of plotting it against the number of visits, I'd like to plot it against its log value. Basically, I'd like to use the log scale. How do I do that?
I tried to convert the values to log manually and it plotted right, but the tooltip shows the log value and not the exact visit count.
there is not an option for log scale in GeoChart.
but you can calculate manually, then display the real number in the tooltip,
by changing the formatted value of the data table cell.
the tooltip will always display the formatted value by default.
when loading your data, use object notation, where...
v: = value
f: = formatted value
e.g. {v: 200, f: '300'}
using the above, the chart will use 200 for the region color or marker,
but display 300 in the tooltip.
see following working snippet...
google.charts.load('current', {
packages: ['geochart'],
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', {v: 200, f: '300'}],
['United States', {v: 300, f: '400'}],
['Brazil', {v: 400, f: '500'}],
['Canada', {v: 500, f: '600'}],
['France', {v: 600, f: '700'}],
['RU', {v: 700, f: '800'}]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.GeoChart(container);
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to remove y-axis values, I just want 0 and 1 once, but there are multiple 1's.
"gridlines: { count: 2}, " is not applying. Is there any solution for this?
the chart is using numbers for the y-axis that have decimal places,
which obviously aren't shown due to the number format
would need to see code, options used on the chart, etc. to understand why
also, drawing the chart before it's container is visible can cause problems
however, the chart in the image appears to be a Material chart
unfortunately, many of the options you could use to correct the issue
are not supported by Material charts, including...
{hAxis,vAxis,hAxes.*,vAxes.*}.gridlines.count
see --> Tracking Issue for Material Chart Feature Parity
recommend using Core chart instead, with following option...
theme: 'material'
using ticks will guarantee which labels appear...
vAxis: {
ticks: [0, 1]
},
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Category', 'Count'],
['Customers Added', 1.4],
['Posts Created', null],
['Cash Transaction', null],
['Card Transaction', null],
['Buy Incomplete', null],
['Merchant SignUp', null]
]);
var container = document.getElementById('chart_div');
var chartCol = new google.visualization.ColumnChart(container);
chartCol.draw(data, {
vAxis: {
ticks: [0, 1]
},
height: 400,
theme: 'material',
title: 'Agent Report'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note:
Material --> google.charts.Bar -- packages: ['bar']
Core --> google.visualization.ColumnChart -- packages: ['corechart']
I have to create a line chart, which has vertical bands in the background, and a vertical line at a specified position.Following is a sample chart image.
Sample chart
I tried to create a combo chart with line and bar as my series, to get the blue line and red vertical line. But i am unable to figure out how to get the vertical bands. Histogram is not supported by the combo chart. There is no option to create bar charts with variable width of each bar as well. Following is what i am able to create till now:
chart created so far
Following is my code:
function drawChart() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Percentile', 'Number of students', 'Vertical lines',{ role: 'style' }],
[1, 0.2020202,,''],
[3, 0.546875,,''],
[10, 1.20967742,,''],
[25, 1.87969925,,''],
[50, 1.953125, ,''],
[75, 1.32743363,,''],
[90, 0.64814815, ,''],
[97, 0.25316456, ,''],
[99, 0.00621891,,''],
[78, ,20,'stroke-width: 2; fill-color: red']
]);
var options = {
vAxis: {
gridlines:{count: 6},
viewWindow:{ max: 2.5}
},
hAxis: {
ticks: [0,20,40,60,80,100,120]
},
seriesType: 'line',
series: {1: {type: 'bars'}},
bar:{groupWidth:2},
intervals: { 'lineWidth':2, 'barWidth': 0.5, style: 'boxes' },
curveType: 'function',
legend: { position: 'none' },
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ComboChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}
</script>
Please suggest how can these vertical bands be achieved?
I'm generating some Google Charts and I'm stuck here. Google allows you to have your columns stacked. But it's either limited or I can't configure it to work. Taken from Google, here is an example showing number of cups of coffee produced in each year for two countries:
Say I have another data set for the same two countries, but this time I have instant coffee instead of ground. Example:
What I'd like to do is to stack these two datasets on top of each other. So each column would be a single country, but two divisions: bean and instant coffee.
I was thinking if there was a way of formatting the data table in the following way:
['Year', 'Austria', 'Austria (instant)', 'Bulgaria', 'Bulgaria (instant')],
['2003', 1736060, 10051, 250361, 68564],
['2004', 1338156, 65161, 786849, 1854654],
['2005', 1276579, 65451, 120514, 654654]
to generate something like
Your help is appreciated.
I just ran into this same issue today and followed your submission link. It seems that just recently someone replied with this:
"This is actually possible with the new Material Bar chart (albeit in
a somewhat roundabout way). In the new chart, if you make a chart
stacked, but place some series on a different axis, that creates a
separate stack for those series. Unfortunately, there is currently no
way to completely hide an axis yet, and you will have to explicitly
set the view window. Eventually we will introduce options to hide axes
and to align view windows, but this will have to do for now."
This fiddle seemed to help me solve this problem: http://jsfiddle.net/p7o0pjgg/
Here's the code:
google.load('visualization', '1.1', {
'packages': ['bar']
});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn('number', 'Folgers Instant');
data.addColumn('number', 'Nescafe Beans');
data.addColumn('number', 'Folgers Beans');
data.addRows([
['2001', 321, 621, 816, 319],
['2002', 163, 231, 539, 594],
['2003', 125, 819, 123, 578],
['2004', 197, 536, 613, 298]
]);
// Set chart options
var options = {
isStacked: true,
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
vAxis: {
viewWindow: {
min: 0,
max: 1000
}
},
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
}
}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
You can do it using a stacked column chart, where all data series of one group (e.g. ground coffee) is on the left axis, and all data series of the other group on the right axis (instant coffee).
data and stacked column chart set-up
series of group 2 moved to right axis
The Visualization API does not support creating multiple column stacks per row of data. You can make a feature request to add support for this if you want.
The answer by Dan Hogan worked for me. However, the JSFiddle example didn't seem to work (not sure, why.) Here is a version that works for me.
google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(function() {
$('.service-usage-graph').each(function() {
var table = new google.visualization.DataTable();
table.addColumn('string', 'Date');
table.addColumn('number', 'UL Peak');
table.addColumn('number', 'UL Off-peak');
table.addColumn('number', 'DL Peak');
table.addColumn('number', 'DL Off-peak');
table.addRow(['2001-01-01', 1, 2, 3, 4]);
table.addRow(['2001-01-03', 3, 2, 4, 2]);
table.addRow(['2001-01-04', 2, 2, 4, 2]);
table.addRow(['2001-01-05', 0, 1, 4, 5]);
table.addRow(['2001-01-06', 9, 2, 6, 8]);
table.addRow(['2001-01-07', 2, 2, 7, 3]);
var chart = new google.charts.Bar(this);
var options = google.charts.Bar.convertOptions({
isStacked: true,
series: {
2: { targetAxisIndex: 1 },
3: { targetAxisIndex: 1 }
},
vAxis: {
viewWindow: {
max: 15,
}
}
});
chart.draw(table, options);
});
});
<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 class="service-usage-graph"></div>
I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks
pass the options like this
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};
add this to your options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}
The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.
In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.
In case a feature is supported by both the Material chart sometimes requires different format for the options.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/
It is easier using the options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.
Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?
See Google Charts documentation.
If you want to do like this then it will help. I use stepped area chart in the combo chart from the Google library...
where the values for each stepped area is the value for ticks.
Here is the link for jsfiddle code
Simply add background option
backgroundColor: {
fill:'red'
},
here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/
You can do it just with CSS:
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}