Google chart label - javascript

I have the column for the Annotation, but the annotation does not appear at the top of the bars? If the var view important to show the Label?
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({type: 'number', role: 'annotation'});
data.addColumn('number', 'Folgers Instant');
data.addColumn({type: 'number', role: 'annotation'})
data.addColumn('number', 'Nescafe Beans');
data.addColumn({type: 'number', role: 'annotation'})
data.addRows([
['2001', 321, 150, 621, 500, 600, 816],
['2002', 163, 150, 231, 500, 600, 539]
]);
var options = {
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
vAxis: {
viewWindow: {
min: 0,
max: 1500
}
},
chartArea: { backgroundColor: '#F8F8F8' }
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
Thanks,
peXeq


first, the documentation for the annotation role says to use --> Data type: string
and unfortunately, annotations don't work on Material charts
as demonstrated below
use config option theme: 'material' to get the Core chart close to the look of a Material chart
see following working snippet, draws both chart types...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Nescafe Instant');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Folgers Instant');
data.addColumn({type: 'string', role: 'annotation'})
data.addColumn('number', 'Nescafe Beans');
data.addColumn({type: 'string', role: 'annotation'})
data.addRows([
['2001', 321, '321', 621, '621', 600, '600'],
['2002', 163, '163', 231, '231', 600, '600']
]);
var options = {
width: 800,
height: 600,
chart: {
title: 'Year-by-year coffee consumption',
subtitle: 'This data is not real'
},
vAxis: {
viewWindow: {
min: 0,
max: 1500
}
},
chartArea: { backgroundColor: '#F8F8F8' },
title: 'Year-by-year coffee consumption',
theme: 'material'
};
var chart = new google.charts.Bar(document.getElementById('chart_div_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_core'));
chart.draw(data, options);
},
packages: ['bar', 'corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>Core Chart</div>
<div id="chart_div_core"></div>
<div>Material Chart</div>
<div id="chart_div_material"></div>

Related

Google graph show extra label with numeric value

I am trying to add custom label as target achieved with numeric value, which is just a value but not the calculation of graph bar/height.
I am not getting how to get the similar result as showed in screen shot,
JS Fiddle : http://jsfiddle.net/xv867tur/
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addColumn({type: 'string', role: 'annotation' });
data.addRows([
['Foo', 53, 'Foo text'],
['Bar', 71, 'Bar text'],
['Baz', 36, 'Baz text'],
['Cad', 42, 'Cad text'],
['Qud', 87, 'Qud text'],
['Pif', 64, 'Pif text']
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 1, 2]);
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(view, {
height: 400,
width: 600,
series: {
0: {
type: 'bars'
},
1: {
type: 'line',
color: 'grey',
lineWidth: 0,
pointSize: 0,
visibleInLegend: false
}
},
vAxis: {
maxValue: 100
}
});
}
Expected result :

Vertical line annotation in horizontal bar using Google Chart

Just want to ask if it's possible to add multiple line annotation per bar based on date? Then if I hover the line, it should display the date.
If it's not possible is there any way to do this?
Here's my sample code: http://jsfiddle.net/q0ftngve/
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Display Order');
data.addColumn('date', 'Dummy');
data.addColumn('date', 'Introduction');
data.addColumn('date', 'Presentation');
data.addColumn('date', 'Demonstration');
data.addColumn('date', 'Evaluation');
data.addColumn('date', 'Negotiation');
data.addColumn('date', 'Approval');
data.addColumn('date', 'Purchase');
data.addRows([
[
'P0003-0000001',
new Date('2020-04-02'),
new Date('1970-01-14'),
new Date('1970-01-16'),
new Date('1970-01-23'),
new Date('1970-01-22'),
new Date('1970-02-03'),
new Date('1970-01-17'),
new Date('1970-02-01')
]
]);
var dateMin = new Date('2020-4-1');
new google.visualization.BarChart(document.getElementById('progress_chart')).
draw(data,
{
width: "100%",
bar: {groupWidth: "90%"},
backgroundColor: "whitesmoke",
legend: { position: "none" },
isStacked: true,
hAxis: {
viewWindow: {
// max: new Date(2020,5,1),
min: dateMin,
},
// format: 'M/d/yy',
// baseline: dateToday,
// baselineColor: 'red',
},
bar: { groupWidth: 20 }
});
}

using an annotation, with --> style: 'line'
would actually produce a horizontal line,
and would display text on the bar.
to get something to display on hover, you would also need to use annotationText
instead, it may easier to use a different series type...
see following working snippet,
a line series is used to display the lines on the bars...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Display Order');
data.addColumn('date', 'Dummy');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn('date', 'Date');
data.addColumn('date', 'Introduction');
data.addColumn('date', 'Presentation');
data.addColumn('date', 'Demonstration');
data.addColumn('date', 'Evaluation');
data.addColumn('date', 'Negotiation');
data.addColumn('date', 'Approval');
data.addColumn('date', 'Purchase');
data.addRow([
'P0003-0000001',
new Date('2020-04-02'),
new Date('2020-04-03'),
new Date('2020-04-04'),
new Date('2020-04-05'),
new Date('2020-04-06'),
new Date('1970-01-14'),
new Date('1970-01-16'),
new Date('1970-01-23'),
new Date('1970-01-22'),
new Date('1970-02-03'),
new Date('1970-01-17'),
new Date('1970-02-01')
]);
var dateMin = new Date('2020-4-1');
new google.visualization.BarChart(document.getElementById('progress_chart')).
draw(data, {
width: '100%',
bar: {
groupWidth: '90%'
},
backgroundColor: 'whitesmoke',
legend: {
position: 'none'
},
isStacked: true,
hAxis: {
viewWindow: {
// max: new Date(2020,5,1),
min: dateMin,
},
// format: 'M/d/yy',
// baseline: dateToday,
// baselineColor: 'red',
},
bar: {
groupWidth: 20
},
annotations: {
boxStyle: {
stroke: '#fff',
strokeWidth: 1
}
},
series: {
1: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
2: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
3: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
4: {
color: '#fff',
pointShape: {
type: 'star', sides: 2, dent: 0.05
},
pointSize: 24,
type: 'line'
},
}
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="progress_chart"></div>
NOTE: recommend using loader.js, rather than jsapi to load google charts...
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
the newer library can be found here...
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement, see above snippet...

How can I filter two charts with different ways to get data with the same string filter?

here's my code:
google.charts.load('current', {'packages':['corechart', 'controls']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'Customer_Name');
data.addColumn('number', 'Credits');
data.addColumn('string', 'Date');
data.addColumn('string', 'Seller');
data.addColumn('string', 'Branch');
data.addRows([
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
[213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
]);
var groupedBranch = google.visualization.data.group(data, [5], [{
column: 0,
type: 'number',
label: data.getColumnLabel(0),
aggregation: google.visualization.data.count
}]);
var branchFilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'div_filter1',
'options': {
'filterColumnLabel': 'Branch',
'matchType': ('any'),
'ui': {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
}
});
var branchChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'div_chart1',
'options': {
'animation':{duration:666, easing:'inAndOut', startup:true},
'backgroundColor': {fill:'transparent' },
'title': 'Branches',
'hAxis': {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle : {fontSize: 12}},
'vAxis': {minValue: 0},
'colors': ['#f39c12'],
'legend': 'none'
}
});
var tableChart = new google.visualization.ChartWrapper({
'chartType': 'Table',
'containerId': 'div_chart3',
'options': {
'animation':{duration:666, easing:'inAndOut', startup:true},
'backgroundColor': {fill:'transparent' },
'title': 'a',
'hAxis': {title: 'Loja', titleTextStyle: {color: '#999'}, slantedText:true, slantedTextAngle:74, textStyle : {fontSize: 12}},
'vAxis': {minValue: 0},
'colors': ['#f39c12'],
'legend': 'none'
}
});
And then below, the way that my dashboard is drawing (my problem).
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(branchFilter, [branchChart, tableChart]);
dashboard.draw(groupedBranch);
}
here is my point.
I want to draw the Column Chart based on my var groupedBranch data and the Table based on my var data,
both using the same branchFilter
Image exemples:
The way my dashboard is now
The table now
The table I need

dashboards will only work with one data table
in this case, draw each chart independently, on the filter's 'statechange' event
google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);
when the event fires, use data table method getFilteredRows to build a view for each chart
you will have to manually account for the filter's matchType
var filterValue = branchFilter.getState().value;
viewBranch.rows = groupedBranch.getFilteredRows([{
column: 0,
test: function (value) {
// same as matchType: 'any'
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'controls']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'ID');
data.addColumn('string', 'Customer_Name');
data.addColumn('number', 'Credits');
data.addColumn('string', 'Date');
data.addColumn('string', 'Seller');
data.addColumn('string', 'Branch');
data.addRows([
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch2'],
[123, 'Customer1', 400, '01/02/03', 'Seller1', 'Branch1'],
[321, 'Customer2', 300, '01/02/03', 'Seller2', 'Branch4'],
[213, 'Customer3', 500, '01/02/03', 'Seller3', 'Branch3']
]);
var groupedBranch = google.visualization.data.group(data, [5], [{
column: 0,
type: 'number',
label: data.getColumnLabel(0),
aggregation: google.visualization.data.count
}]);
var branchFilter = new google.visualization.ControlWrapper({
controlType: 'StringFilter',
containerId: 'div_filter1',
dataTable: groupedBranch,
options: {
filterColumnLabel: 'Branch',
matchType: 'any',
ui: {label: 'Branch filter', labelSeparator:':', labelStacking:'vertical'}
}
});
google.visualization.events.addListener(branchFilter, 'ready', drawCharts);
google.visualization.events.addListener(branchFilter, 'statechange', drawCharts);
var branchChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'div_chart1',
dataTable: groupedBranch,
options: {
animation: {duration: 666, easing: 'inAndOut', startup: true},
backgroundColor: {fill:'transparent' },
title: 'Branches',
hAxis: {title: 'Branch', titleTextStyle: {color: '#999'}, textStyle: {fontSize: 12}},
vAxis: {minValue: 0},
colors: ['#f39c12'],
legend: 'none'
}
});
var tableChart = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'div_chart3',
dataTable: data
});
branchFilter.draw();
function drawCharts() {
var filterValue = branchFilter.getState().value;
var viewBranch = {};
var viewTable = {};
if (filterValue !== '') {
viewBranch.rows = groupedBranch.getFilteredRows([{
column: 0,
test: function (value) {
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
viewTable.rows = data.getFilteredRows([{
column: 5,
test: function (value) {
return (value.toLowerCase().indexOf(filterValue.toLowerCase()) > -1);
}
}]);
}
branchChart.setView(viewBranch);
branchChart.draw();
tableChart.setView(viewTable);
tableChart.draw();
}
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_filter1"></div>
<div id="div_chart1"></div>
<div id="div_chart3"></div>

How implement the following chart in google chart api?

I want to implement the following chart in google chart api. how can i get it. I want to separate 4 quarters between two data points and indicators for each quarters need to display. And vertical line with number is that point has annotations. how can i get this in google chart api.

You can use an "annotation" role column to create the lines you want. Here's an example:
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Year');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', 'Value');
data.addRows([
[2009, null, 5],
[2010, '1', 4],
[2011, null, 7],
[2011.25, '2', null],
[2011.5, '3', null],
[2012, null, 7]
]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(data, {
height: 400,
width: 600,
interpolateNulls: true,
annotation: {
1: {
style: 'line'
}
},
hAxis: {
format: '#',
minorGridlines: {
count: 3
},
ticks: [2009, 2010, 2011, 2012]
},
vAxis: {
textPosition: 'none',
minValue: 0,
maxValue: 10
},
legend: {
position: 'none'
}
});
};
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
See it working here: http://jsfiddle.net/asgallant/H5K29/

How to display the point value in the line chart stroke of google api chart?

I am using linechart in google api chart. In this chart i need to display the vaxis value above point.but i am using annotation.It's create point value in near haxis .But i need above the point.
Actual chart:
Expected chart:
<script type="text/javascript">
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({type: 'number', role: 'annotation'});
data.addRows([
['2008', 23, 23],
['2009', 145, 145],
['2010', 245, 245],
['2011', 350, 350]
]);
var options = {
width: 400,
height: 100,
pointSize: 4,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 10,
width: 400,
height: 50},
vAxis: {
baselineColor: '#fff',
gridlines: {color: 'transparent'}
},
tooltip: {trigger: 'none'},
annotation: {
1: {
style: 'none'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>

You simply have to correct the order of the column defintion:
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn({type: 'number', role: 'annotation'});
Edit: See asgallant's comment on the correct order of columns. My text below isn't fully correct.
Although Google's documentation isn't that clear about it, you should always specify the x-axis first, then the values and put stuff like annotations at the end.

Categories

Resources