We Keep Coding

How to display a single data point on Google Area OR Line chart

I've tried every configuration possible to get a Google Area Chart to display a single point but nothing has worked. I'm also totally open to any solutions using the Google Line Chart as long as it has a filled area. However, I couldn't find a solution for making this work with a line chart either.
Already tried setting the pointSize as well as setting the pointSize conditionally if there is only a single row. Tried numerous different ways of configuring the chart including.
var data = new google.visualization.DataTable();
data.addColumn('date', 'Updated');
data.addColumn('number', 'Amount');
data.addRow([new Date(1548266417060.704),100]);
AND
var mets = [['Updated', 'Amount'], [new Date(1548266417060.704),100]];
var data = google.visualization.arrayToDataTable(mets);
Area Chart Example JSFiddle
Line Chart Example JSFiddle
This Line Chart would need the area below the line filled in but I haven't been able to determine how to do so with this API
Example of the chart I'm trying to achieve using CanvasJs but I'm trying to implement it with Google Visualization API and allow for a single point to be shown if there is only a single point on the chart.
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100],
//[new Date(1548716961817.513),100],
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
pointSize: 5,
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I'm expecting the chart to display a single point when there is only one data row. As you can see by the JSFiddle when there is a single row nothing appears but as soon as you uncomment the second row everything works just fine.

there is a bug with the most recent version of google charts,
when the x-axis is a continuous axis (date, number, not string, etc.),
and only one row exists in the data table,
you must set an explicit view window on the axis --> hAxis.viewWindow
to use a date type with only one row,
first, use data table method --> getColumnRange
this will return an object with min & max properties for the x-axis
then we can increase the max and decrease the min by one day,
and use that for our view window.
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100]
]);
var oneDay = (24 * 60 * 60 * 1000);
var dateRange = data.getColumnRange(0);
if (data.getNumberOfRows() === 1) {
dateRange.min = new Date(dateRange.min.getTime() - oneDay);
dateRange.max = new Date(dateRange.max.getTime() + oneDay);
}
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'},
viewWindow: dateRange
},
pointSize: 5
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
you'll notice if we go back to an old version ('45'),
a single date row displays without issue...
google.charts.load('45', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704),100]
]);
var options = {
title: 'Company Performance',
hAxis: {
title: 'Year',
titleTextStyle: {color: '#333'},
},
pointSize: 5
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

I dont know if you understod but the date format you are passing is wrong, so when you write Date() it return the current date formatted as string.
now if we understand that much then the currect way of writing the date array should be
var data = google.visualization.arrayToDataTable([
['Updated', 'Amount'],
[new Date(1548266417060.704).toString(),100],
]);
This will return the date formatted as string.
and the library will accept it.
if you are still want to pass on an object then you need to specify the dataTable column as Date.
read here for more information
https://developers.google.com/chart/interactive/docs/datesandtimes

Anychart chart.animation breaks pie3d chart type

I'm running 7.12.0.1229, where according to Anychart : How to add animation in Pie or funnel chart of AnyChart7.1 several animation issues were fixed.
When trying to use a chart type of pie3d in combination with chart.animation(true, 800);, chart.animation(true); or chart.animation({enabled: true, duration: duration}) the chart won't render.
Working example http://jsfiddle.net/RainerAtSpirit/c2wye9m9/3/
anychart.onDocumentReady(function() {
//dataset
var data = anychart.data.set([
["$0-$50,000", 68],
["$50,000-$100,000", 13],
["$100,000-$150,000", 6],
["$150,000-$250,000", 6],
["$250,000 - plus", 7]
])
var chart = anychart.pie3d(data);
//adjust legend
var legend = chart.legend();
legend.enabled(true);
legend.position("left");
legend.align("center");
legend.itemsLayout("vertical");
//create title
var title = chart.title();
title.text("Pop Out");
title.enabled(true);
//inner radius makes this a doughnut chart instead of pie
chart.innerRadius("30%");
//define the container
chart.container("container");
// chart.animiation breaks pie3d chart type
// chart.animation(true, 800);
//set delay to recall draw ch art to
chart.draw();
});
Broken example http://jsfiddle.net/RainerAtSpirit/c2wye9m9/2/
anychart.onDocumentReady(function() {
//dataset
var data = anychart.data.set([
["$0-$50,000", 68],
["$50,000-$100,000", 13],
["$100,000-$150,000", 6],
["$150,000-$250,000", 6],
["$250,000 - plus", 7]
])
var chart = anychart.pie3d(data);
//adjust legend
var legend = chart.legend();
legend.enabled(true);
legend.position("left");
legend.align("center");
legend.itemsLayout("vertical");
//create title
var title = chart.title();
title.text("Pop Out");
title.enabled(true);
//inner radius makes this a doughnut chart instead of pie
chart.innerRadius("30%");
//define the container
chart.container("container");
// chart.animiation breaks pie3d chart type
chart.animation(true, 800);
//set delay to recall draw ch art to
chart.draw();
});

Indeed, it doesn't look nice, thank you for the report! We transfered this case to our bug tracking system, so we will dig deep into it and get back to you as soon as possible. As for animation feature in common, 3d charts support animation:
chart = anychart.bar3d([2, 8, 3, 4, 9]);
chart.animation({enabled: true, duration: 3000});
JSFIDDLE
But in case of 3d pie it doesn't work, we'll investigate it shortly.

It seems that animation is not yet supported for 3D charts. So either make the chart a 2d pie chart with animation or a 3D chart without.

Google visualization table sorts even if I define my own function

I am having a bit of an issue with the Google Visualization library. I have a very simple table being built on the screen, and I need to disable sorting, but only for a certain column. I have gone through their documentation and found that you can define your own functions for events that will override the default, but it is not working. Here is an extremely simple example...
var chart = new google.visualization.Table(document.getElementById('myTable'));
google.visualization.events.addListener(chart, 'sort', function(e) { handleSort(e, chart); });
chart.draw(opts, dataTable);
function handleSort(e, chart) {
console.log('inside sort');
return false;
}
when I click on the column header I get the console log of 'inside sort', but the table will sort on that column. I have even tried...
function handleSort(e, chart) {
if(e.column == 9) {
chart.options['sortColumn'] = 0;
chart.options['isAscending'] = true;
}
}
When clicking the column header for column 9 it still sorts on column 9. I can't get it to stop sorting on that column. Essentially I have a button in the header for column 9, when the user clicks the button the page does something, but since it sorts the table, it ruins what is supposed to be happening.
Also, inside the opts object that gets passed to the draw method, I do have 'sort' set to 'event' like they say in their documentation, but it will not work. The function gets run, but the table still sorts regardless of what I have in the function. Any help would be greatly appreciate. Thank you all.

If you want complete control over the sort, add sort: 'event' to the configuration options
Keep in mind, you're in control now, so you must sort the data manually.
The sortAscending and sortColumn options are used to set the sort arrow in the column heading.
In this example, the data is initially sorted by descending Hours, set the options accordingly on the initial draw.
Then in the sort event, I only allow sorting by Hours...
google.load("visualization", "1", {packages:["table"], callback: loadChart});
function loadChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('number', 'Hours');
data.addRows([
['Mike', {v: 10000, f: '$10,000'}, 40],
['Jim', {v:8000, f: '$8,000'}, 30],
['Alice', {v: 12500, f: '$12,500'}, 20],
['Bob', {v: 7000, f: '$7,000'}, 10]
]);
var chart = new google.visualization.Table(document.getElementById('table_div'));
var options = {
sort: 'event',
sortAscending: false,
sortColumn: 2
};
google.visualization.events.addListener(chart, 'sort', function(e) {
if (e.column === 2) {
options.sortAscending = e.ascending;
options.sortColumn = e.column;
data.sort([{
column: e.column,
desc: !e.ascending
}]);
chart.draw(data, options);
}
});
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="table_div"></div>

How to label Google Column Chart bars

I am using Google Chart API to create chart for values which goes from 1 to millions.
Problem
The bars which are representing smaller values (ex: less than 50 or so) are invisible on graph and no way I can see what values correspond to certain x-axis.
This would be solved if I can somehow print y-axis values on top of bars.But, I couldn't find any mention in the API doc on how to do it.
There is similar problem here, but it doesn't answers my question.
put labels on top of inside bar in google interactive bar chart
There are some other more than year old unanswered questions here, I am hoping someone might have found a solution or a workaround by now, that is why asking this question again.
Google Visualization: Column Chart, simple question but can't find the answer
How to show values on the the top of columns Google Chart API
Can you show me how to achieve what I want using How can I customize this Google Bar Chart? ?

Check out Andrew Gallant's JSFiddle here:
http://jsfiddle.net/asgallant/QjQNX/
It uses a clever hack of a combo chart to accomplish what I think you're looking for.
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
}
});
}

I had some setbacks using annotation and the invisible line (for example, having it displayed in the tooltip as another series).
I've made a hack to the ComboChart (could work with BarChart and ColumnChart as well, with a couple of changes) to insert the labels into the SVG.
Check out this fiddle: http://jsfiddle.net/augustomen/FE2nh/
Tested on Firefox 21, Chrome 27 and IE 9.

Insert Links into Google Charts api data?

I have been playing around with Google charts quite a bit over in the google charts play ground here:
Link
The code I have been playing with is this:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['2003', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
and that gives me a nice chart that looks like this:
I am trying to have this chart fit the needs of my website, and to do this, I need to make the bar names on the left links to another page. So for example 2003 would be a link that the user can click ans so would 2004 etc.
I tried to do something like this:
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['Link text', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
]);
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
But I could only hope for it to be that easy and it wasn't. Does anyone know if this is at all possible?

Manzoid's answer is good, but "some assembly is still required" as it just displays an alert box rather than following the link. Here is a more complete answer BUT it makes the bars clickable rather than the labels. I create a DataTable that includes the links then create a DataView from that to select the columns I want to display. Then when the select event occurs, I just retrieve the link from the original DataTable.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'link', 'Austria'],
['2003', 'http://en.wikipedia.org/wiki/2003', 1336060],
['2004', 'http://en.wikipedia.org/wiki/2004', 1538156],
['2005', 'http://en.wikipedia.org/wiki/2005', 1576579],
['2006', 'http://en.wikipedia.org/wiki/2006', 1600652],
['2007', 'http://en.wikipedia.org/wiki/2007', 1968113],
['2008', 'http://en.wikipedia.org/wiki/2008', 1901067]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 2]);
var options = {title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}};
var chart = new google.visualization.BarChart(
document.getElementById('chart_div'));
chart.draw(view, options);
var selectHandler = function(e) {
window.location = data.getValue(chart.getSelection()[0]['row'], 1 );
}
google.visualization.events.addListener(chart, 'select', selectHandler);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 900px;"></div>
</body>
</html>

This is non-trivial because the output you are seeing is SVG, not HTML. Those labels in your example ("2004", "2005", etc) are embedded inside SVG text nodes, so inserting raw HTML markup inside them will not be rendered as HTML.
The workaround is to scan for the text nodes containing the target values (again, "2004", "2005" etc) and replace them with ForeignObject elements. ForeignObject elements can contain regular HTML. These then need to be positioned more-or-less where the original SVG text nodes had been.
Here is a sample snippet illustrating all this. It is tuned to your specific example, so when you switch to rendering whatever your real data is, you will want to modify and generalize this snippet accordingly.
// Note: You will probably need to tweak these deltas
// for your labels to position nicely.
var xDelta = 35;
var yDelta = 13;
var years = ['2003','2004','2005','2006','2007','2008'];
$('text').each(function(i, el) {
if (years.indexOf(el.textContent) != -1) {
var g = el.parentNode;
var x = el.getAttribute('x');
var y = el.getAttribute('y');
var width = el.getAttribute('width') || 50;
var height = el.getAttribute('height') || 15;
// A "ForeignObject" tag is how you can inject HTML into an SVG document.
var fo = document.createElementNS("http://www.w3.org/2000/svg", "foreignObject")
fo.setAttribute('x', x - xDelta);
fo.setAttribute('y', y - yDelta);
fo.setAttribute('height', height);
fo.setAttribute('width', width);
var body = document.createElementNS("http://www.w3.org/1999/xhtml", "BODY");
var a = document.createElement("A");
a.href = "http://yahoo.com";
a.setAttribute("style", "color:blue;");
a.innerHTML = el.textContent;
body.appendChild(a);
fo.appendChild(body);
// Remove the original SVG text and replace it with the HTML.
g.removeChild(el);
g.appendChild(fo);
}
});
Minor note, there is a bit of jQuery in there for convenience but you can replace $('text') with document.getElementsByTagName("svg")[0].getElementsByTagName("text").

Since the SVG-embedding route is (understandably) too hairy for you to want to muck with, let's try a completely different approach. Assuming that you have the flexibility to alter your functional specification a bit, such that the bars are clickable, not the labels, then here's a much simpler solution that will work.
Look for the alert in this snippet, that's the part that you will customize to do the redirect.
function drawVisualization() {
// Create and populate the data table.
var rawData = [
['Year', 'Austria'],
['2003', 1336060],
['2004', 1538156],
['2005', 1576579],
['2006', 1600652],
['2007', 1968113],
['2008', 1901067]
];
var data = google.visualization.arrayToDataTable(rawData);
// Create and draw the visualization.
var chart = new google.visualization.BarChart(document.getElementById('visualization'));
chart.draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
var handler = function(e) {
var sel = chart.getSelection();
sel = sel[0];
if (sel && sel['row'] && sel['column']) {
var year = rawData[sel['row'] + 1][0];
alert(year); // This where you'd construct the URL for this row, and redirect to it.
}
}
google.visualization.events.addListener(chart, 'select', handler);
}

I apparently don't have enough reputation points to comment directly to a previous reply, so my apologies for doing so as a new post. manzoid's suggestion is great but has one issue I found, and it looks like Mark Butler might have run into the same problem (or unknowingly sidestepped it).
if (sel && sel['row'] && sel['column']) {
That line keeps the first data point from being clickable. I used it on a Jan-Dec bar chart, and only Feb-Dec were clickable. Removing sel['row'] from the condition allows Jan to work. I don't know that the if() condition is really even necessary, though.

Here's another solution that wraps each text tag for label with anchor tag.
no ForeignObject
clickable label
stylable by css (hover effect)
Here's a sample: https://jsfiddle.net/tokkonoPapa/h3eq9m9p/
/* find the value in array */
function inArray(val, arr) {
var i, n = arr.length;
val = val.replace('…', ''); // remove ellipsis
for (i = 0; i < n; ++i) {
if (i in arr && 0 === arr[i].label.indexOf(val)) {
return i;
}
}
return -1;
}
/* add a link to each label */
function addLink(data, id) {
var n, p, info = [], ns = 'hxxp://www.w3.org/1999/xlink';
// make an array for label and link.
n = data.getNumberOfRows();
for (i = 0; i < n; ++i) {
info.push({
label: data.getValue(i, 0),
link: data.getValue(i, 2)
});
}
$('#' + id).find('text').each(function(i, elm) {
p = elm.parentNode;
if ('g' === p.tagName.toLowerCase()) {
i = inArray(elm.textContent, info);
if (-1 !== i) {
/* wrap text tag with anchor tag */
n = document.createElementNS('hxxp://www.w3.org/2000/svg', 'a');
n.setAttributeNS(ns, 'xlink:href', info[i].link);
n.setAttributeNS(ns, 'title', info[i].label);
n.setAttribute('target', '_blank');
n.setAttribute('class', 'city-name');
n.appendChild(p.removeChild(elm));
p.appendChild(n);
info.splice(i, 1); // for speeding up
}
}
});
}
function drawBasic() {
var data = google.visualization.arrayToDataTable([
['City', '2010 Population', {role: 'link'}],
['New York City, NY', 8175000, 'hxxp://google.com/'],
['Los Angeles, CA', 3792000, 'hxxp://yahoo.com/' ],
['Chicago, IL', 2695000, 'hxxp://bing.com/' ],
['Houston, TX', 2099000, 'hxxp://example.com'],
['Philadelphia, PA', 1526000, 'hxxp://example.com']
]);
var options = {...};
var chart = new google.visualization.BarChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
addLink(data, 'chart_div');
}

You should use formatters.
If you replace value with HTML then sorting will not work properly.