I am using Google API for generating graphs.
My current Output is :
I want to display text/number in the bar as like below.. I could not find /missing the options to do it. Please let me know... Please do not say it not possible as it is 3rd party API. Its possible as they have done it for other Bar Charts... Link Here
Here is my code.
//Bar Chart
var data_bar = google.visualization.arrayToDataTable([
['Unit Tested','Passed', 'Failed', 'NA' ],
['BTEQ', 100, 20, 3, ]
]);
var options_bar = {
width: 400,
height: 75,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
series: [{color: '#32B232',visibleInLegend: false}, {color: 'red',visibleInLegend: false}, {color: '#FFD732',visibleInLegend: false}]
};
var chart_bar = new google.visualization.BarChart(document.getElementById('chart_div'));
chart_bar.draw(data_bar, options_bar);
//end of bar chart..
You've actually mentioned the link to the solution yourself:
https://developers.google.com/chart/interactive/docs/gallery/barchart#Labels
Basically you need to add the following code similar to the DataView() mentioned in the link above, but now for every column of the data.
var view = new google.visualization.DataView(data_bar);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
3,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" }
]);
Edit: to answer your question: the 0,1,2,3 refer to the columns of the data. In order for the annotation to appear the data from the columns (sourceColumn: 1), is transformed to a string with JSON function stringify() (calc: "stringify"). Note that with setColumns() you can use the data multiple times. [0,1,1,1,2,3] would mean that 100 is used three times in the DataView(). Here every column is used once to see the bar and the second time it is transformed to a string and used as annotation.
Your own solutions, although shorter code is more of a hack. Since you enter the data twice. This becomes a problem when you import the data from an external source.
Here is my working answer...
var data_bar = google.visualization.arrayToDataTable([
['Unit Tested','Passed',{ role: 'annotation' }, 'Failed',{ role: 'annotation' }, 'NA',{ role: 'annotation' } ],
['BTEQ', 100,'100', 20,'20', 3,'3' ]
Related
I need to put labels over my google.chart.Bar (not google.visualization.BarChart) the chart is correctly visualized but only shows values on mouse over the bars,please helpme!.
without mouse over
with mouse over
the data is taked from hidden inputs... here the code :
var data3 = new google.visualization.arrayToDataTable([
['Ambitos', 'Programados', 'Terminados',{ role: 'style' }],
['ex', parseInt(document.getElementById("sumex").value),(parseInt(document.getElementById("sumex").value))-( parseInt(document.getElementById("sumpex").value)),document.getElementById("sumex").value],
['ma', parseInt(document.getElementById("summa").value),(parseInt(document.getElementById("summa").value))-( parseInt(document.getElementById("sumpma").value)),document.getElementById("summa").value],
['mo', parseInt(document.getElementById("summo").value),(parseInt(document.getElementById("summo").value))-( parseInt(document.getElementById("sumpmo").value)),document.getElementById("summo").value],
['re', parseInt(document.getElementById("sumre").value),(parseInt(document.getElementById("sumre").value))-( parseInt(document.getElementById("sumpre").value)),document.getElementById("sumre").value],
['tx', parseInt(document.getElementById("sumtx").value),(parseInt(document.getElementById("sumtx").value))-( parseInt(document.getElementById("sumptx").value)),document.getElementById("sumtx").value]]);
var view3 = new google.visualization.DataView(data3);
view3.setColumns([0,1,2,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" },3]);
var options3 = {
legend: { position: "none" },
chart: {
title: 'Resumen General',
subtitle: 'programados v/s terminados'},
series: {},
axes: { y: {
distance: {label: ''}, } },
chartArea : { width:"95%", height:"80%"} };
var chart3 = new google.charts.Bar(document.getElementById('barras'));
chart3.draw(data3, options3);
p.d. sorry for my bad english!
unfortunately, annotations (bar labels) are not supported on Material charts
recommend using Core chart, with the following option instead...
theme: 'material'
an separate annotation column should be added for each series column,
that should have annotations
when using a DataView to add annotation columns,
be sure to draw the chart using the view (view3),
instead of the original data table (data3)
see following working snippet...
google.charts.load('current', {
callback: function () {
var data3 = new google.visualization.arrayToDataTable([
['Ambitos', 'Programados', 'Terminados',{ role: 'style' }],
['ex', 8,(8)-(6),''],
['ma', 6,(6)-(4),''],
['mo', 4,(4)-(2),''],
['re', 2,(2)-(1),''],
['tx', 1,(1)-(0),'']]);
var view3 = new google.visualization.DataView(data3);
view3.setColumns([0,
1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2,
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
},
3
]);
var options3 = {
legend: { position: "none" },
chart: {
title: 'Resumen General',
subtitle: 'programados v/s terminados'
},
series: {},
axes: {
y: {
distance: {label: ''},
}
},
chartArea : {
width:"95%",
height:"80%"
},
theme: 'material'
};
var chart3 = new google.visualization.ColumnChart(document.getElementById('barras'));
chart3.draw(view3, options3);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barras"></div>
note: list of options unavailable to Material --> Tracking Issue for Material Chart Feature Parity
I am using google charts within an MVC project.
I am looking to implement a bar chart that has negative values.
I would like the annotations on the negative portion of the chart to be on the same side as the end of the bar (just like the positive, see image below, green box is where I would like annotations to be).
I cant seem to find any documentation on how this can be achieved.
Is it possible to move the annotation to the other side?
there are no standard config options that will move the annotations
but you can move them manually
however, the chart will actually move them back whenever activity occurs,
such as on bar hover
have to use a MutationObserver, or something, to keep them there
use chart methods --> getChartLayoutInterface().getXLocation(value)
to find the location
also, need to adjust the axis window to leave room for the labels
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'y0', type: 'number'},
],
rows: [
{c:[{v: 'Omega'}, {v: -0.95}]},
{c:[{v: 'Large'}, {v: -0.92}]},
{c:[{v: 'Medium'}, {v: 2.76}]},
{c:[{v: 'Tiny'}, {v: 2.03}]}
]
});
var options = {
annotations: {
alwaysOutside: true,
stem: {
color: 'transparent'
},
textStyle: {
color: '#000000'
}
},
hAxis: {
// leave room for annotation
viewWindow: {
min: data.getColumnRange(1).min - 1
}
},
legend: {
position: 'none'
}
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var container = document.getElementById('chart');
var chart = new google.visualization.BarChart(container);
// move annotations
var observer = new MutationObserver(function () {
$.each($('text[text-anchor="start"]'), function (index, label) {
var labelValue = parseFloat($(label).text());
// only negative -- and -- not on tooltip
if ((labelValue < 0) && ($(label).attr('font-weight') !== 'bold')) {
var bounds = label.getBBox();
var chartLayout = chart.getChartLayoutInterface();
$(label).attr('x', chartLayout.getXLocation(labelValue) - bounds.width - 8);
}
});
});
observer.observe(container, {
childList: true,
subtree: true
});
chart.draw(view, 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>
I am using google charts to render the data on webpages. I am using a CSV as an input and that data is then manipulated for google chart api to use.
I want to show the column value on the top of the Bar/Column chart. I figured out that if you create a Data View and do view.setColumns and specify the role annotation then number becomes visible on the top of the chart, otherwise you need to hover on the chart to see the exact value.
My problem is that i am unable to dynamically set the columns and roles to the view. As the input is csv, i will never be sure about the columns.
Main intent is to show the numbers on the bars, if there is any other alternative by which it can be done, then it will be appreciated as well. Cheers
var arrayData = csvAttr.toArrays(csvString, {
onParseValue : csvAttr.hooks.castToScalar
});
var data = new google.visualization.arrayToDataTable(arrayData);
view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2,
{ calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation" },
3,
{ calc: "stringify",
sourceColumn: 3,
type: "string",
role: "annotation" }
]);
Simple way for set columns dynamically.
var totalColumns = 3
var view = new google.visualization.DataView(dataTable);
var columns = [];
for (var i = 0; i <= totalColumns ; i++) {
if (i > 0) {
columns.push(i);
columns.push({
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
});
} else {
columns.push(i);
}
}
view.setColumns(columns);
How can I change the Text of legend of pie chart. I am using c3 charts in my php page. I have already read the documentation of c3 charts but no luck.
Currently i am using this code it show legend for true but I not able to change the text I have tried this.
var chart = c3.generate({
bindto: '#container',
padding: {
top: 10,
right: 0,
bottom: 10,
left: 0,
},
data: {
columns: [<?php echo $pieChartDataString; ?>],
type : 'pie',
labels: true
},
legend: {
show: true,
position: 'upper-center'
format: {
title: function () { return "Legend title"; },
name : function () { return "Legend name"; },
value: function () { return "Legend value";}
}
}
//But these legend values or not showing
});
It's not showing my legend values its always shows only columns as legend.
Is there any way that I can change the legend values.
You haven't provided the data that gets outputted from your php, so it's hard to say.
But the first item in each of the columns array determines the name that goes in the legend. So:
columns: [
['this is legend 1', 30],
['put your value here', 120],
]
would result in the legend labels being "this is legend 1" and "put your value here".
Here's a fiddle:
http://jsfiddle.net/jrdsxvys/9/
Edit...
Another option is to use the names property, as done here:
http://jsfiddle.net/jrdsxvys/40/
data: {
columns: [
['d1', 30],
['d2', 120]
],
type: 'pie',
labels: true,
names: {
d1: 'some name here',
d2: 'another name'
}
}
#agpt Yes. The names property is a good way to go generally because the first property of the columns data array eg 'd1' above is used when doing things like having multiple types on charts. eg for a bar and line combination using types instead of type: 'pie':
columns: [
['bar_1', 3, 8, 6],
['bar_2', 4, 0, 7],
['bar_3', 2, 3, 0]
],
types: {
bar_1: 'bar',
bar_2: 'line',
bar_3: 'bar'
},
names : {
bar_1: 'Initial',
bar_2: '3 month',
bar_3: '6 month'
}
So, using the names property allows you to use more 'dynamic' property names and be consistent throughout the config.
First I'd like to let it be known that although there is a similar question labeled:
Google Charts API: Always show the Data Point Values in Graph
...on the site, I can't seem to use it's solution since my chart is fed using arrayToDataTable.
Here's my code:
function drawChart1998() {
var data = google.visualization.arrayToDataTable([
['Year', 'Index Trend'],
['1/3', 1236777],
['1/7', 834427],
['1/10', 2164890],
['1/14', 1893574],
['1/17', 2851881],
['1/21', 359504],
['1/24', 2264047],
['1/28', 3857933],
['1/31', 2197402],
['2/4', 2469935],
['2/7', 1651752],
['2/11', 4710582],
['2/14', 1565803],
['2/18', 345499],
['2/21', 2817319],
['2/25', 733242],
['2/28', 1485788],
['3/4', 1091181],
['3/7', 4477498],
['3/11', 490931],
['3/14', 3905556],
['3/18', 475417],
['3/21', 1512729],
['3/25', 1782796],
['3/28', 4778434]
]);
var options = {
curveType: "function",
title: '1998 Results',
vAxis: {viewWindow: {min: 0, max: 5006386}},
hAxis: {textStyle: {color: 'black', fontName: 'verdana', fontSize: 10} },
series: {0: { pointSize: 6 }}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_1998'));
chart.draw(data, options);
}
As you can see, I managed to set the series to display the DataPoint dots but I can't seem to figure out how to incorporate the following line of code as the previous post on the site suggests in order to display the values for each DataPoint.
data.addColumn({type: 'string', role: 'annotation'});
For reference, you can input an annotation column to your DataTable using the arrayToDataTable method. Pass an object instead of a string for the column header:
var data = google.visualization.arrayToDataTable([
[/* column headers */, {type: 'string', role: 'annotation'}, /* column headers */],
// ...
]);
This works for any column role.
If you just want to display the value of a data point, you don't have to add an extra column to your DataTable. You can use a DataView to add an "annotation" column, calculated as the string-value of a source column:
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}]);
Then draw the chart using the view instead of the DataTable:
chart.draw(view, options);