We Keep Coding

Google Chart columnChart haxis dates are wrong

I have a Google Chart (column-chart) showing a single dated (Jan-2010 = 2010-01-01) column - but the resulting column seems to run from 1-Jul-09 through to 1-Jul-10 (note this seems to change depending on the width of the screen); how can I fix this so that the column sits only on the 01-Jan-2010 date? (**Note, the dates/values are variable and can include one or hundreds of column values so we CANNOT simply hard code this or change the column type from 'date' to 'string').
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
A demonstrator for this can be found on https://jsfiddle.net/Abeeee/d5fojtp2/34/

you can add custom ticks to ensure each column "sits" on the correct date.
the ticks option expects an array of values.
we can use DataTable method --> getDistinctValue(colIndex)
to return the date values from the data table.
var xTicks = data.getDistinctValues(0);
hAxis: {
slantedText: false,
format: 'd.MMM.yy', <---- changed from 'd/MMM/yy' to avoid line breaks
ticks: xTicks
},
see following working snippet...
function doTest() {
var arr = eval("[[new Date(2010, 0, 1), 0,1]]");
var data = new google.visualization.DataTable();
data.addColumn('date', 'Dt');
data.addColumn('number', 'Open');
data.addColumn('number', 'Closed');
data.addRows(arr);
var xTicks = data.getDistinctValues(0);
var options_stacked = {
isStacked: true,
height: 300,
colors: ['#111', '#a00'],
hAxis: {
slantedText: false,
format: 'd/MMM/yy',
ticks: xTicks
},
legend: {
position: 'top',
},
vAxis: {
minValue: 0
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options_stacked);
}
window.addEventListener('resize', doTest);
google.charts.load('current', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(doTest);
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<h1>Google Charts</h1>
<div id="chart_div"></div>

How to Add Point on Visualization: Area Chart

How to add a point inside the Google Charts Visualization: Area chart like the red point in the picture shown above and can i put some label above or beside the point?
Here is the code that outputs the chart above
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addRows([
<?php echo"['', 2, null],"; ?>
<?php echo"['', 2, '1 Kpa ---------->'],"; ?>
<?php echo"['2', 1, '<---------- 2'],"; ?>
<?php echo"['3 σ', 0, '<---------- 3 σ']"; ?>
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] }
};
var chart = new google.visualization.AreaChart(document.getElementById('total_stress'));
chart.draw(data, options);
}

you can use a ComboChart to combine series types
add another column to the data table for the point
in the options, define the series types, use 'scatter' for points
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Output1');
data.addColumn('number', 'Height');
data.addColumn({type:'string', role:'annotation'});
data.addColumn('number', 'Scatter');
data.addRows([
['', 2, null, null],
['', 2, '1 Kpa ---------->', 1],
['2', 1, '<---------- 2', null],
['3 s', 0, '<---------- 3 s', null]
]);
var options = {
title: 'Total Stress',
hAxis: {title: '<-------- Direction', titleTextStyle: {color: '#333'}},
vAxis: { ticks: [{v:2, f:'1 Kpa ->'}, {v:1, f:'1 m'},{v:0, f:'length ^ 1 m'},{v:0, f:'1 m'}] },
seriesType: 'area',
series: {
1: {
type: 'scatter'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How can I hide hAxis labels in Google material bar chart?

I would like to show a stacked bar chart with grouped bars and only one row of horizontal axis labels. From what I found, it is not currently possible to show a stacked BarChart with grouped bars using visualization.BarChart as of the Google Visualization API v44 , but this is possible with the material Bar chart by using the series array option.
For example:
google.charts.load('44', {
packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23],
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
targetAxisIndex: 1
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
textPosition: 'none',
ticks: [null],
title: 'Hide one of the axis values '
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
My problem is that the horizontal axis range/ticks match for both bars, so showing 2 with the exact same tick values on the bottom is redundant. With the non-material BarChart, the textPosition: 'none' option can be used to hide labels for an axis, but this option is not currently supported in material bar charts. Is there another way that one of these axis labels/ticks can be hidden in a non-hacky way?
Note that textPosition has no effect.

couldn't find a way to hide the tick marks
but you can move them to the top
see following working snippet...
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23]
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
axis: 'red'
}
},
axes: {
x: {
red: {
label: '',
side: 'top'
}
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
title: 'Hide one of the axis values'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>
UPDATE
another option would be to modify the chart's svg manually,
once the 'ready' event fires
here, the top labels are hidden when the chart is drawn...
google.charts.load('44', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Nothing');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Blue');
data.addColumn('number', 'Red');
data.addRows([
['Row 1', 14, 1, 3, 0, 1, 36],
['Row 2', 10, 1, 0, 2, 2, 23]
]);
var options = {
legend: {
position: 'none'
},
isStacked: true,
series: {
5: {
axis: 'red'
}
},
axes: {
x: {
red: {
label: '',
side: 'top'
}
}
},
hAxis: {
viewWindow: {
min: 0,
max: 40
},
title: 'Hide one of the axis values'
},
bars: 'horizontal'
};
var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
google.visualization.events.addListener(chart, 'ready', function () {
$.each($('#stacked-grouped-chart text'), function (index, label) {
if (parseFloat($(label).attr('y')) < 20) {
$(label).attr('fill', 'none');
}
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
}
<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="stacked-grouped-chart"></div>

var options = {
hAxis : {
format : 'none'
}
}

Show month in google chart hAxis

We are trying to show horizontal and vertical lines in google chart. For this we need to use hAxis and vAxis attribute.
But hAxis.format does not have any format for month, So how we can show vertical line?
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', ],
['Jan', 1000],
['Feb', 1170],
['Mar', 660],
['Apr', 1030]
]);
var options = {
title: '',
hAxis: {
title: 'Year',
minValue: 0,
titleTextStyle: {
color: '#333'
},
gridlines: {
color: '#f3f3f3',
count: 5
},
format: 'MMM'
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 5
}
}
};
JsFiddle
And here is year jsFiddle which is showing both lines( horizontal and vertical )
Working Fiddle

Yes there is, but it is not so straight forward.
First thing you should know is that there is no option to create vertical lines for a major column of type string. So we need to use a column type of number for example and fix the labels later.
To do that we define the datatable like this:
var data = new google.visualization.DataTable();
data.addColumn('number', 'Month');
data.addColumn('number', 'Sales');
data.addRows([
[{v: 0, f:'Jan'}, 1000],
[{v: 1, f:'Feb'}, 1170],
[{v: 2, f:'Mar'}, 660],
[{v: 3, f:'Apr'}, 1030]
]);
Where we set number values but also string labels for the Month axis.
With just this and the format attribute removed, we would get vertical lines but numbers instead of the strings for the x axis labels, which is not what we want.
To fix this we can set hAxis ticks to force the correct labels in the plot.
var options = {
title: '',
hAxis: {
title: 'Month',
titleTextStyle: {
color: '#333'
},
baseline: 0,
gridlines: {
color: '#f3f3f3',
count: 4
},
ticks: [{v: 0, f:'Jan'},{v: 1, f:'Feb'},{v: 2, f:'Mar'},{v: 3, f:'Apr'}], // <------- This does the trick
},
vAxis: {
minValue: 0,
gridlines: {
color: '#f3f3f3',
count: 5
}
}
};
Hereby the complete working fiddle: http://jsfiddle.net/j29Pt/417/

setting the vertical axis scale in google charts api

I was playing around with trying to set the vertical axis scale in my google charts. I'm not happy with the auto scaling that it does since I have two results and want to see them on an even scale for apples-to-apples comparison.
This is my code. I have set the max and min values, yet that does not seem to apply in the output.
Code
function createExpenseChart(data) {
google.load("visualization", "1", {packages:["corechart"]});
var chartdata = new google.visualization.DataTable();
chartdata.addColumn('number', 'Expense');
chartdata.addColumn('number', '2013');
chartdata.addColumn('number', '2014');
for (var k in data["Expense"]["2013"]){
if (data["Expense"]["2013"].hasOwnProperty(k)) {
["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)])
chartdata.addRow([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)]);
}
}
var options = {'title':'2013 vs. 2014 comparison,
curveType: 'function',
viewWindowMode:'explicit',
viewWindow:{
max:100000,
min:10000
},
vAxis: {title: 'Cost ($)',
minValue: 0,
},
hAxis: {title: 'Expense (dollars)'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById('mydiv'));
chart.draw(chartdata, options);
}
I have also tried the following, but they don't show any effect
var options = {'title':'2013 v/s 2014',
curveType: 'function',
viewWindowMode:'explicit',
viewWindow:{
max:80,
min:20
},
vAxis: {
title: 'Cost ($)'
viewWindowMode:'explicit',
viewWindow: {
max:10000,
min:10000
}
},
hAxis: {title: 'Expense (dollars)'},
height: 600,
width: 1000
};

Sorry guys, this is resolved. Pretty much the same code worked me. I just had to clean my cache.
Sorry for the confusion.
function createExpenseChart(data) {
google.load("visualization", "1", {packExpenses:["corechart"]});
var chartdata = new google.visualization.DataTable();
chartdata.addColumn('number', 'Expense');
chartdata.addColumn('number', 'Previous Cost');
chartdata.addColumn('number', '2014 Cost');
for (var k in data["Expense"]["2013"]){
if (data["Expense"]["2013"].hasOwnProperty(k)) {
//console.log([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)])
chartdata.addRow([parseInt(k,10),parseInt(data["Expense"]["2013"][k],10),parseInt(data["Expense"]["2014"][k],10)]);
}
}
var formatter = new google.visualization.NumberFormat({negativeColor: 'red', negativeParens: true, pattern: '$###,###'});
formatter.format(chartdata, 1);
formatter.format(chartdata, 2);
var options = {'title':'2013 vs. 2014 Costs by Expense',
curveType: 'function',
viewWindowMode:'explicit',
viewWindow:{
min:0
},
vAxis: {title: 'Cost ($)',
viewWindowMode : 'explicit',
viewWindow:
{
min: 0,
max:42000000
}
},
hAxis: {title: 'Expense (years)'},
height: 600,
width: 1000
};
var chart = new google.visualization.LineChart(document.getElementById('Expensecostdiv'));
chart.draw(chartdata, options);
}