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

How to set Google chart vertical axis increments? How can I set a max width on the grid bar? [duplicate]

I'm having problems formatting the axes of material charts.
Using "classic" line chart if I would like to format my vertical axis with a dollar sign, I would do
{vAxes: { 0: {title: 'Amount',format: '$#,##'}}}
Making it look like so:
I would've thought I could change to {axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } } after reading what little docs exist for the material charts, but this didn't work at all.
Also, I have date on the horizontal axis, and the default formatting is sh*t! I can't figure out how to override that formatting either. Note this is on the axis it self I'm trying to format.
With the horizontal I tried setting hAxis: {format:'YYYY-MM-DD'} but that didn't work.
My main question would be: Does anyone know of a complete documentation of the material charts? The one I've been using is this.
Second question: How do I format the values on the axes?

the options simply are not available on Material charts...
see --> Tracking Issue for Material Chart Feature Parity #2143
when using a Core chart instead, there is an option that will get the chart "close" to Material chart...
theme: 'material'
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date','Date');
data.addColumn('number','Value');
data.addRows([
[new Date(2017, 1, 12), 250],
[new Date(2017, 1, 13), 200],
[new Date(2017, 1, 14), 150]
]);
var options = {
hAxis: {
format: 'yyyy-MM-dd'
},
theme: 'material',
vAxis: {
format: '$#,##',
title: 'Amount'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Additionl vertical axis in Google Charts (Column)

I tried to create Column Charts (Google Charts) with automatically generated vertical axis and one special, additional, featured, vertical axis set by me (custom vertical axis).
I painted this picture to show what I mean:
..and this is my code without custom axis:
google.load("visualization", "1.1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Col.name');
dataTable.addColumn('number', 'Stage 1');
dataTable.addColumn('number', 'Stage 2');
dataTable.addColumn('number', 'Stage 3');
dataTable.addRows([
['Current quarter', 0, 0, 1300],
['Annual summary', 300, 600, 1300]
]);
var options = {
isStacked: true,
};
new google.visualization.ColumnChart(document.getElementById('chart_div')).draw(dataTable, options);
}
demo: http://jsfiddle.net/cichy380/QjQNX/1004/
I cannot find any solution in Google Charts Documentation.
I found only vAxis.ticks option, but it replaces the automatically generated axis!

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.

Google Charts Line Chart

I'm new to google charts and can't seem to figure out how i would do something of the following:
I want to make a data table that has my xcord,ycord,legendlabel. I'm trying the following:
var data = google.visualization.arrayToDataTable([]);
data.addColumn("number","reps");
data.addColumn("number","weight");
data.addColumn("string","legendlabel")
data.addColumn("string","workoutname");
data.addRows([[150, 10,"workoutA"],
[300, 2,"workoutB"], //format [xcord,ycord,legendlabel]
]);
However, it isn't working obviously because we have two different types, number and string.
Is there a way i can specify the xcord, ycord then have a label for this point, then if there are multiple labels that are the same it forms a line graph?
Thanks in advance guys!

With a line chart each data line has to have a value for every point on the domain or else the line will be broken, What you want is a scatter chart
Then data for you graph should look something like this:
var data = google.visualization.arrayToDataTable([]);
data.addColumn("number","reps");
data.addColumn("number","workout1");
data.addColumn("number","workout2");
data.addRows([
[150, 10, null],
[300, null, 2,]
]);
you will want to set the lineWidth to see the trending curve
chart.draw(data, {
lineWidth: 2,
vAxis: {title: "reps"},
hAxis: {title: "weight"}
}