I'm working on google line chart and I want to double label on x axis(date wise processes ), I'm able to draw chart without dates with below code but not able to populate dates,
<html>
<head>
<title>Google Charts Tutorial</title>
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart']});
</script>
</head>
<body>
<div id="container"
style="width: 1610px; height: 400px; margin-left:-120px;"></div>
<script language="JavaScript">
\
function drawChart() {
// Define the chart to be drawn.
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn('number', 'Suceess');
data.addColumn('number', 'Error');
data.addColumn('number', 'Warning');
data.addRows([
['RE-LINK|', 266, 2136, 472],
['UPDATE-IB', 0, 1722, 2728],
['UPDATE-SA', 0, 43580, 87713],
['CREATE-IB/SA', 0, 18920, 103690],
['TERMINATE-IB', 0, 2, 0],
['TERMINATE-COVERAGE', 3682, 5917, 0],
['ADD-COVERAGE AND CHANGE-SITE', 1101, 2433, 7887],
['day1--CREATE-IB', 36647, 0,1064]
]);
data.addRows([
['RE-LINK', 11649, 221, 1127],
['UPDATE-IB', 0, 4844, 79886],
['UPDATE-SA', 0, 2961, 7377],
['CREATE-IB/SA', 0, 3993, 13268],
['TERMINATE-IB', 4105, 0, 0],
['TERMINATE-COVERAGE', 1844, 10834, 0],
['day2--ADD-COVERAGE AND CHANGE-SITE', 218, 717, 10498]
]);
data.addRows([
['RE-LINK', 3484, 3, 28],
['UPDATE-IB', 0, 139207, 238037],
['UPDATE-SA', 0, 3, 3],
['CREATE-IB/SA', 0, 4598, 12680],
['TERMINATE-COVERAGE', 480, 1210, 90],
['day3--ADD-COVERAGE AND CHANGE-SITE', 1, 72, 2372]
]);
data.addRows([
['RE-LINK', 7142, 465, 1427],
['UPDATE-IB', 0, 105719, 216275],
['UPDATE-SA', 0, 14761, 31698],
['CREATE-IB/SA', 0, 5071, 14184],
['TERMINATE-IB', 18, 10, 0],
['TERMINATE-COVERAGE', 5265, 1280, 98],
['day4--ADD-COVERAGE AND CHANGE-SITE', 1173, 12474, 15545]
]);
// Set chart options
var options = {'title' : 'Applications status biz process wise(4 Days)',
hAxis: {
title: '',
textStyle: {
color: '#01579b',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 12,
fontName: 'Arial',
bold: false,
italic: true
},
slantedTextAngle:90
},
vAxis: {
title: '',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
}
},
'width':1600,
'height':400,
colors: ['#00ff00', '#ff0000','#ffe102'],
legend: { position: 'top' },
};
// Instantiate and draw the chart.
var chart = new google.visualization.LineChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);
</script>
</body>
</html>
I want to draw this chart
please help on this....
although the requested layout is not available via standard configuration options,
it is possible to achieve, if you're ok with modifying the svg manually
when the chart's 'ready' event fires, add the category labels and group lines
see following working snippet, which is just an example to show the possibility
several assumptions are made based on the size and placement of the chart...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', '');
data.addColumn('string', '');
data.addColumn('number', 'Success');
data.addColumn('number', 'Error');
data.addColumn('number', 'Warning');
data.addRows([
[new Date('12/01/2016'), 'RE-LINK|', 266, 2136, 472],
[new Date('12/01/2016'), 'UPDATE-IB', 0, 1722, 2728],
[new Date('12/01/2016'), 'UPDATE-SA', 0, 43580, 87713],
[new Date('12/01/2016'), 'CREATE-IB/SA', 0, 18920, 103690],
[new Date('12/01/2016'), 'TERMINATE-IB', 0, 2, 0],
[new Date('12/01/2016'), 'TERMINATE-COVERAGE', 3682, 5917, 0],
[new Date('12/01/2016'), 'ADD-CVG / CHG-SITE', 1101, 2433, 7887],
[new Date('12/01/2016'), 'day1--CREATE-IB', 36647, 0,1064]
]);
data.addRows([
[new Date('12/02/2016'), 'RE-LINK', 11649, 221, 1127],
[new Date('12/02/2016'), 'UPDATE-IB', 0, 4844, 79886],
[new Date('12/02/2016'), 'UPDATE-SA', 0, 2961, 7377],
[new Date('12/02/2016'), 'CREATE-IB/SA', 0, 3993, 13268],
[new Date('12/02/2016'), 'TERMINATE-IB', 4105, 0, 0],
[new Date('12/02/2016'), 'TERMINATE-COVERAGE', 1844, 10834, 0],
[new Date('12/02/2016'), 'ADD-CVG / CHG-SITE', 218, 717, 10498]
]);
data.addRows([
[new Date('12/03/2016'), 'RE-LINK', 3484, 3, 28],
[new Date('12/03/2016'), 'UPDATE-IB', 0, 139207, 238037],
[new Date('12/03/2016'), 'UPDATE-SA', 0, 3, 3],
[new Date('12/03/2016'), 'CREATE-IB/SA', 0, 4598, 12680],
[new Date('12/03/2016'), 'TERMINATE-COVERAGE', 480, 1210, 90],
[new Date('12/03/2016'), 'ADD-CVG / CHG-SITE', 1, 72, 2372]
]);
data.addRows([
[new Date('12/04/2016'), 'RE-LINK', 7142, 465, 1427],
[new Date('12/04/2016'), 'UPDATE-IB', 0, 105719, 216275],
[new Date('12/04/2016'), 'UPDATE-SA', 0, 14761, 31698],
[new Date('12/04/2016'), 'CREATE-IB/SA', 0, 5071, 14184],
[new Date('12/04/2016'), 'TERMINATE-IB', 18, 10, 0],
[new Date('12/04/2016'), 'TERMINATE-COVERAGE', 5265, 1280, 98],
[new Date('12/04/2016'), 'ADD-CVG / CHG-SITE', 1173, 12474, 15545]
]);
var view = new google.visualization.DataView(data);
view.hideColumns([0]);
var options = {
chartArea: {
height: 300,
left: 60,
top: 60
},
colors: ['#00ff00', '#ff0000','#ffe102'],
hAxis: {
title: '',
textStyle: {
color: '#01579b',
fontSize: 10,
fontName: 'Arial',
bold: true,
italic: true
},
titleTextStyle: {
color: '#01579b',
fontSize: 12,
fontName: 'Arial',
bold: false,
italic: true
},
slantedTextAngle: 90
},
height: 600,
legend: {
position: 'top'
},
title: 'Applications status biz process wise(4 Days)',
vAxis: {
title: '',
textStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
},
titleTextStyle: {
color: '#1a237e',
fontSize: 12,
bold: true
}
},
width: 1600
};
var formatDate = new google.visualization.DateFormat({
pattern: 'dd-MMM-yy'
});
var container = document.getElementById('container');
var chart = new google.visualization.LineChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var rowIndex = -1;
var dateValue = null;
var svgParent = container.getElementsByTagName('svg')[0];
var labels = [];
Array.prototype.forEach.call(container.getElementsByTagName('text'), function(text) {
var groupLabel;
// find hAxis labels
if (text.hasAttribute('transform')) {
rowIndex++;
if (dateValue !== formatDate.formatValue(data.getValue(rowIndex, 0))) {
dateValue = formatDate.formatValue(data.getValue(rowIndex, 0));
groupLabel = text.cloneNode(true);
groupLabel.removeAttribute('transform');
groupLabel.removeAttribute('font-style');
groupLabel.setAttribute('fill', '#333333');
groupLabel.setAttribute('y', parseFloat(text.getAttribute('y')) + 132);
groupLabel.textContent = dateValue;
text.parentNode.appendChild(groupLabel);
if (labels.length > 0) {
setLabelX(labels[labels.length - 1], text, 0);
}
labels.push(groupLabel);
addGroupLine(groupLabel, -24, -144);
}
if (rowIndex === (data.getNumberOfRows() - 1)) {
if (labels.length > 0) {
setLabelX(labels[labels.length - 1], text, 16);
}
addGroupLine(text, 18, -12);
}
}
});
// center group label
function setLabelX(prevLabel, curLabel, xOffset) {
prevLabel.setAttribute('x',
parseFloat(prevLabel.getAttribute('x')) + xOffset +
((parseFloat(curLabel.getAttribute('x')) - parseFloat(prevLabel.getAttribute('x'))) / 2)
);
}
// add group line
function addGroupLine(text, xOffset, yOffset) {
var parent = container.getElementsByTagName('g')[0];
var groupLine = container.getElementsByTagName('rect')[0].cloneNode(true);
groupLine.setAttribute('x', parseFloat(text.getAttribute('x')) + xOffset);
groupLine.setAttribute('y', parseFloat(text.getAttribute('y')) + yOffset);
groupLine.setAttribute('width', '0.8');
groupLine.setAttribute('height', '188');
groupLine.setAttribute('stroke', '#333333');
groupLine.setAttribute('stroke-width', '1');
groupLine.setAttribute('fill', '#333333');
groupLine.setAttribute('fill-opacity', '1');
parent.appendChild(groupLine);
}
});
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>
Related
I have developed a feature which allows the user to hide/show columns. One thing that Google Charts does is list all rows in the list even if the visible row has null values. Is there a way to automatically hide rows that don't have any data in them? I have attached a screenshot to demonstrate rows with null values.
you can use data table method --> getFilteredRows()
the method returns an array of row indexes that match the criteria,
the following will return the row where the second column is not null...
var nonBlankRows = data.getFilteredRows([{
column: 1,
test: function(value, row, column, table) {
return (value !== null);
}
}]);
you can then use the returned array in a data view or chart wrapper,
see following working snippet, which uses both...
google.charts.load('current', {
packages: ['controls', 'table']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time');
data.addColumn('string', 'Data');
data.addRows([
[new Date(2017, 11, 20), 'TEST 0'],
[new Date(2017, 11, 21), null],
[new Date(2017, 11, 22), null],
[new Date(2017, 11, 23), null],
[new Date(2017, 11, 24), null],
[new Date(2017, 11, 25), null],
[new Date(2017, 11, 26), 'TEST 1'],
[new Date(2017, 11, 27), null],
[new Date(2017, 11, 28), null],
[new Date(2017, 11, 29), 'TEST 2']
]);
var nonBlankRows = data.getFilteredRows([{
column: 1,
test: function(value, row, column, table) {
return (value !== null);
}
}]);
var options = {
showRowNumber: true,
allowHtml: true
};
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'Table',
containerId: 'wrapper-table',
dataTable: data,
options: options,
view: {
rows: nonBlankRows
}
});
chartWrapper.draw();
var view = new google.visualization.DataView(data);
view.setRows(nonBlankRows);
var chart = new google.visualization.Table(document.getElementById('chart-table'));
chart.draw(view, options);
});
.table {
display: inline-block;
margin: 6px;
padding: 6px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="table">
<div id="wrapper-table"></div>
</div>
<div class="table">
<div id="chart-table"></div>
</div>
I've got problem with LineChart - I've got my chart date values from mid april to mid june and I want to make hAxis grid lines showing only borders between months from my data. Manually I've made it this way:
hAxis: {
textStyle: { fontSize: 10, color: '#999999' },
gridlines:{ color: '#eee' },
textPosition: 'in',
baselineColor: '#eee',
format: 'M',
ticks: [
new Date(2016, 4, 1),
new Date(2016, 5, 1),
new Date(2016, 6, 1)
]
}
But I want it to be made automatically fitting my data. Anyone can help?
read the data prior to drawing the chart,
and collect the ticks you need displayed
in the following working snippet,
the first day, of each month found, is added to tickMarks
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', '2015');
data.addColumn('number', '2016');
data.addRows([
[new Date('04/20/2016'), 200, 210],
[new Date('04/30/2016'), 190, 220],
[new Date('05/06/2016'), 205, 200],
[new Date('05/18/2016'), 220, 230],
[new Date('05/24/2016'), 212, 210],
[new Date('06/01/2016'), 185, 193],
[new Date('06/16/2016'), 196, 207]
]);
var tickMarks = [];
var curMonth = -1;
for (var i = 0; i < data.getNumberOfRows(); i++) {
var testDate = data.getValue(i, 0);
if (testDate.getMonth() > curMonth) {
curMonth = testDate.getMonth();
tickMarks.push(new Date(testDate.getFullYear(), testDate.getMonth(), 1));
}
}
var options = {
height: 400,
hAxis: {
textStyle: { fontSize: 10, color: '#999999' },
gridlines:{ color: '#eee' },
textPosition: 'in',
baselineColor: '#eee',
format: 'M',
ticks: tickMarks
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using Google Charts. I want to change border color & width of selected column. By default stroke color is white and width is 1. I want to change border color to black and width to 2.
Code :
var data = google.visualization.arrayToDataTable(mydata);
var options = {
width: 600,
height: 400,
legend: {position: 'top', maxLines: 4},
bar: {groupWidth: '50%'},
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
There is no build-in option to set this style, but you may ovveride these settings for stroke-color/width via CSS:
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawStacked);
function drawStacked() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
legend: {position: 'top', maxLines: 4},
isStacked: true};
var chart = new google.visualization.ColumnChart(document.getElementById('mydiv'));
chart.draw(data, options);
}
#mydiv svg>g>g>g>g>rect[stroke="#ffffff"][stroke-width="1"] {
stroke: black !important;
stroke-width: 2px !important;
}
<div id="mydiv"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
You could set column style (border color & width) by applying Column styles on the selected column using select event as demonstrated below:
google.load("visualization", '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Genre', 'Fantasy & Sci Fi', 'Romance', 'Mystery/Crime', 'General','Western', 'Literature'],
['2010', 10, 24, 20, 32, 18, 5],
['2020', 16, 22, 23, 30, 16, 9],
['2030', 28, 19, 29, 30, 12, 13]
]);
var options = {
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: true,
};
var view = new google.visualization.DataView(data);
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart_stacked'));
google.visualization.events.addListener(chart, 'select', function () {
highlightBar(chart,options,view);
});
chart.draw(data, options);
}
function highlightBar(chart,options,view) {
var selection = chart.getSelection();
if (selection.length) {
var row = selection[0].row;
var column = selection[0].column;
//1.insert style role column to highlight selected column
var styleRole = {
type: 'string',
role: 'style',
calc: function(dt, i) {
return (i == row) ? 'stroke-color: #000000; stroke-width: 2' : null;
}
};
var indexes = [0, 1, 2, 3, 4, 5, 6];
var styleColumn = findStyleRoleColumn(view)
if (styleColumn != -1 && column > styleColumn)
indexes.splice(column, 0, styleRole);
else
indexes.splice(column+1, 0, styleRole);
view.setColumns(indexes);
//2.redraw the chart
chart.draw(view, options);
}
}
function findStyleRoleColumn(view) {
for (var i = 0; i < view.getNumberOfColumns() ; i++) {
if (view.getColumnRole(i) == "style") {
return i;
}
}
return -1;
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="columnchart_stacked" style="width: 600px; height: 420px;"></div>
JSFiddle
How do you change the color of an annotation text in Google Chart Tools LineChart ?
Here is an example
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'});
data.addRows([
[new Date(2012, 3, 5), 80, null],
[new Date(2012, 3, 12), 120, 'New Product'],
[new Date(2012, 3, 19), 80, null],
[new Date(2012, 3, 26), 65, null],
[new Date(2012, 4, 2), 70, null],
]);
var options = {
title: 'Sales by Week',
displayAnnotations: true,
hAxis: {title: 'Date',
titleTextStyle: {color: 'grey'}},
colors: ['#f07f09']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I want the line to be orange and the annotation text in grey. Currently the annotation text is orange.
No need for extra style data column and plumbing code to fill it for every row with ugly (and even incomplete above) formatting string. Only resort to separate styling column if you want to have different annotation color for the different data points.
There's a global setting, search for annotations.textStyle in https://developers.google.com/chart/interactive/docs/gallery/linechart
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
// The color of the text.
color: '#871b47',
// The color of the text outline.
auraColor: '#d799ae',
// The transparency of the text.
opacity: 0.8
}
}
};
Here is a concept code for your case (notice different initialization google.charts, very important):
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
google.charts.load('current', { 'packages': ['corechart', 'line', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales');
data.addColumn({id: 'title', label: 'Title', type: 'string', role: 'annotation'});
data.addRows([
[new Date(2012, 3, 5), 80, null],
[new Date(2012, 3, 12), 120, 'New Product'],
[new Date(2012, 3, 19), 80, null],
[new Date(2012, 3, 26), 65, null],
[new Date(2012, 4, 2), 70, null],
]);
var options = {
chart: {
title: 'Sales by Week'
},
hAxis: {
title: 'Date',
titleTextStyle: {color: 'grey'}
},
annotations: {
textStyle: {
color: 'grey',
}
}
colors: ['#f07f09']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
You can also change other text formatting of the annotation, like bold, italic, font type, etc. Here is an example where most of the text is configured to be bold:
var options = {
chart: {
title: title
},
hAxis: {
textStyle: {
bold: true
}
},
vAxis: {
format: 'decimal',
textStyle: {
bold: true
}
},
legendTextStyle: {
bold: true
},
titleTextStyle: {
bold: true
},
width: chart_width,
//theme: 'material', // material theme decreases the color contrast and sets the black color items (all text) to 171,171,171 grey -> washed out
annotations: {
alwaysOutside: true,
highContrast: true, // default is true, but be sure
textStyle: {
bold: true
}
}
};
More examples with source repo link: https://mrcsabatoth.github.io/GoogleChartsTalk/
Actually you can. Color of the annotations is the same as line color. Just put a dot in the place you want to make an annotation and set a dot's color to the desirable annotation color.
data.addColumn({type: 'string', role: 'style'});
data.addColumn({type:'string', role:'annotation'});
and then when you add data
'point { size: 14; shape-type: circle; fill-color: #63A74A','Your annotation'
See example at
http://www.marketvolume.com/stocks/stochasticsmomentumindex.asp?s=SPY&t=spdr-s-p-500
If your annotations are not "touching", ie. the points you'd like to annotate are not next to each other, you could add a second line and add the annotations to that line.
In the JSON example below I have a date and a "total balance", as well as an "Ann" line.
"cols":[
{
"id":"date",
"label":"date",
"type":"date",
"p":{
"role":"domain"
}
},
{
"id":"total-balance",
"label":"Total balance",
"type":"number",
"p":{
"role":"data"
}
},
{
"id":"ann",
"label":"Ann",
"type":"number",
"p":{
"role":"data"
}
},
{
"type":"string",
"p":{
"role":"annotation"
}
},
{
"type":"string",
"p":{
"role":"annotationText"
}
}
],
The annotation comes after the "Ann" column so it'll be added to the "Ann" data points.
In my JSON, the date and "total-balance" are always filled in. "Ann" and the annotations are usually empty:
"rows":[
{
"c":[
{
"v":"Date(2013, 0, 1)"
},
{
"v":1000
},
{
"v":null
},
{
"v":null
},
{
"v":null
}
]
},
{
"c":[
{
"v":"Date(2013, 0, 8)"
},
{
"v":1001
},
{
"v":null
},
{
"v":null
},
{
"v":null
}
]
},
When I need an annotation, the "Ann" cell gets the same value as the total balance, and the annotation is added:
{
"c":[
{
"v":"Date(2013, 1, 26)"
},
{
"v":2000
},
{
"v":2000
},
{
"v":"Something!"
},
{
"v":"Something happened here!"
}
]
},
In your GChart's configuration, you can now set two colours. One for the normal line, and one for the "Ann".
colors: ['black','red']
If you have no annotations "touching", GCharts will not draw a line between them and the points will remain "invisible", while the annotations show up at exactly the right place.
Short answer: no, you can't change the text color through standard options (you could write something to find that text in the SVG and change its color with javascript, but that is beyond my level).
You can see an answer from ASGallant on Google Groups here, and his example here.
// code borrowed from Google visualization API playground, slightly modified here
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');
data.addRow(["A", null, null, 1, 1, 0.5]);
data.addRow(["B", null, null, 2, 0.5, 1]);
data.addRow(["C", null, null, 4, 1, 0.5]);
data.addRow(["D", null, null, 8, 0.5, 1]);
data.addRow(["E", 'foo', 'foo text', 7, 1, 0.5]);
data.addRow(["F", null, null, 7, 0.5, 1]);
data.addRow(["G", null, null, 8, 1, 0.5]);
data.addRow(["H", null, null, 4, 0.5, 1]);
data.addRow(["I", null, null, 2, 1, 0.5]);
data.addRow(["J", null, null, 3.5, 0.5, 1]);
data.addRow(["K", null, null, 3, 1, 0.5]);
data.addRow(["L", null, null, 3.5, 0.5, 1]);
data.addRow(["M", null, null, 1, 1, 0.5]);
data.addRow(["N", null, null, 1, 0.5, 1]);
// Create and draw the visualization.
var chart = new google.visualization.LineChart(document.getElementById('visualization'));
chart.draw(data, {
annotation: {
1: {
style: 'line'
}
},
curveType: "function",
width: 500,
height: 400,
vAxis: {
maxValue: 10
}
});
}
The best you can do is to change the style of the line, but it doesn't look like you can currently change the color of the line.
Has this been updated using the 'style' option where one could add a new column {"type":"string","role":"style"} and in each row we would have {"v":"point {size: 4; fill-color: #3366cc;}"}? This allows the annotation to have the same color as the point/marker (which could be changed for each point) but does not allow it to be bold. One example of the data to try would be,
var data =new google.visualization.DataTable(
{
"cols":[
{"label":"Log GDP Per-Capita ","type":"number"},
{"label":"New Chart",
"type":"number"},
{"type":"string","role":"annotation"},
{"type":"string","role":"style"}
],
"rows":[
{"c":[{"v":10.21932},{"v":12.3199676},{"v":"ABW"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.68416},{"v":8.4347518},{"v":"ARE"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":9.634226},{"v":12.0774068},{"v":"ATG"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.83869},{"v":1.8545959},{"v":"AUS"},{"v":"point {size: 4; fill-color: #3366cc;}"}]},
{"c":[{"v":10.7687},{"v":7.4919999},{"v":"AUT"},{"v":"point {size: 4; fill-color: #3366cc;}"}]}
]
}
);
When trying to add a Dashboard control to a working Google Charts item, I get
".. does not fit either the Control or Visualization specification" - relating to the line "var dashboard = new ..." towards the end.
The code below will work standalone and reproduces the entire error:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['annotatedtimeline', 'controls']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'timestamp');
data.addColumn('number', 'Age Partnership');
data.addColumn('number', 'Aviva');
data.addColumn('number', 'Saga');
data.addColumn('number', 'Global');
data.addColumn('number', 'Bower');
data.addColumn('number', 'Esmart');
data.addColumn('number', 'key');
data.addRows(3);
data.setValue(0, 0, new Date(2011, 10, 25, 15, 21, 16, 0));data.setValue(0, 2, 1);data.setValue(0, 1, 2);data.setValue(0, 7, 3);data.setValue(0, 5, 4);data.setValue(0, 4, 5);data.setValue(0, 3, 8);data.setValue(0, 6, 10);data.setValue(1, 0, new Date(2011, 10, 26, 12, 7, 50, 0));data.setValue(1, 1, 1);data.setValue(1, 2, 2);data.setValue(1, 4, 3);data.setValue(1, 7, 4);data.setValue(1, 5, 5);data.setValue(1, 3, 7);data.setValue(1, 6, 8);data.setValue(2, 0, new Date(2011, 10, 26, 12, 15, 2, 0));data.setValue(2, 1, 1);data.setValue(2, 2, 2);data.setValue(2, 7, 3);data.setValue(2, 4, 4);data.setValue(2, 5, 5);data.setValue(2, 6, 7);data.setValue(2, 3, 8);
var options = {
width: 1100,
height: 450,
title: 'Keyword Performance - equity release',
hAxis: {title: 'Date/Time', showTextEvery: 24},
isStacked:"true",
dateFormat: 'HH:mm MMMM dd, yyyy'
};
var categoryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Metric',
'ui': {
'allowTyping': false,
'allowMultiple': true,
'selectedValuesLayout': 'belowStacked'
}
},
// Define an initial state, i.e. a set of metrics to be initially selected.
'state': {'selectedValues': [1,2,3,4,5,6,7]}
});
var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div0'));
chart.draw(data, options);
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).bind(categoryPicker, drawChart).draw(data, options);
}
</script>
</head>
<body>
<div id="dashboard_div">
<!--Divs that will hold each control and chart-->
<div id="control1"></div>
<div id="chart_div0" style="width: 1100px; height: 450px;"></div>
</div>
</body>
</html>
To use a Dashboard element you need to feed both ChartWrapper and ControlWrapper elements in to it. Right now you are using just the ControlWrapper and trying to link it to a chart not involved in the Dashboard itself (because it isn't a ChartWrapper object). I gave a shot at creating an Annotated Time Line chart as a part of a dashboard, but wasn't successful:
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn('string', 'title1');
data.addColumn('string', 'text1');
data.addColumn('number', 'Sold Pens');
data.addColumn('string', 'title2');
data.addColumn('string', 'text2');
data.addRows([
[new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
[new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
[new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
[new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
[new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
]);
// Define a slider control for the 'Donuts eaten' column
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Sold Pencils',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a time line chart
var timeline = new google.visualization.ChartWrapper({
'chartType': 'AnnotatedTimeLine',
'containerId': 'chart1',
'options': {
'width': 600,
'height': 300,
}
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the slider to affect the piechart
bind(slider, timeline).
// Draw the dashboard
draw(data);
}
It fails to draw the chart (though the control works fine). It may be that because the Annotated Time Line chart is a flash chart, it doesn't work nicely in dashboards. Or it could just be that the ChartWrapper object type doesn't allow Annotated Time Lines. If I do the same thing with a line chart, it works:
function drawVisualization() {
// Prepare the data
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sold Pencils');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Sold Pens');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addRows([
[new Date(2008, 1 ,1), 30000, null, null, 40645, null, null],
[new Date(2008, 1 ,2), 14045, null, null, 20374, null, null],
[new Date(2008, 1 ,3), 55022, null, null, 50766, null, null],
[new Date(2008, 1 ,4), 75284, null, null, 14334, 'Out of Stock', 'Ran out of stock on pens at 4pm'],
[new Date(2008, 1 ,5), 41476, 'Bought Pens', 'Bought 200k pens', 66467, null, null],
[new Date(2008, 1 ,6), 33322, null, null, 39463, null, null]
]);
// Define a slider control for the 'Donuts eaten' column
var slider = new google.visualization.ControlWrapper({
'controlType': 'NumberRangeFilter',
'containerId': 'control1',
'options': {
'filterColumnLabel': 'Sold Pencils',
'ui': {'labelStacking': 'vertical'}
}
});
// Define a time line chart
var timeline = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'chart1',
'options': {
'width': 600,
'height': 300,
}
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('dashboard')).
// Configure the slider to affect the piechart
bind(slider, timeline).
// Draw the dashboard
draw(data);
}