I have a really simple implementation of a classic google line chart but when applying vAxis: { format: 'none' } it is printing none to the chart as well as correctly formatting the number.
Going through the documentation I have tried options['vAxis']['format'] = 'none' just to see if that would magically solve it for me but to no success.
Any help greatly appreciated.
google.charts.load('current', { packages: ['corechart', 'line'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day of Week');
data.addColumn('number', 'Pressure');
//console.log(outer[0]);
data.addRows(outer[0]);
var options = {
chart: {
title: 'Pressure Forecast',
subtitle: ''
},
width: 900,
height: 500,
vAxis: {
format: 'none'
}
};
var chart = new google.visualization.LineChart(document.getElementById('pressureChart'));
chart.draw(data, options);}
#WhiteHat was correct vAxis: { format: '0' } has done as needed and overridden the default of { format: 'short' }.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Day of Week');
data.addColumn('number', 'Pressure');
//console.log(outer[0]);
data.addRows(outer[0]);
var options = {
chart: {
title: 'Pressure Forecast',
subtitle: ''
},
width: 900,
height: 500,
vAxis: {
format: '0'
}
};
Related
I have this code here for filtering my areachart by date, but it's not working correctly because arrayToDataTable is not accepting dateTime type.
Any help would be appreciated.
Anyone know how to fix this?
This is my script:
<script type="text/javascript">
google.load("visualization", "1.1", { packages: ["controls", "corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "GoogleChart.aspx/GetChartData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'AreaChart',
chartOptions: {
chartArea: {
width: '100%',
left: 36,
right: 18
},
height: 72
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart_div',
options: {
width: 1800,
height: 600,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeFilter, chart);
dashboard.draw(data);
},
});
}
</script>
in order to create date time values,
you will need to manually change each row in the data.
instead of using arrayToDataTable...
var data = google.visualization.arrayToDataTable(r.d);
create a blank data table,
then use the column headings in the data to create the columns,
and the rest to create the rows...
var data = new google.visualization.DataTable();
r.d.forEach(function (row, index) {
if (index === 0) {
data.addColumn('date', row[0]);
data.addColumn('number', row[1]);
} else {
data.addRow([new Date(row[0]), row[1]]);
}
});
when i create a chart (with google chart) with all the values setted to zero, the haxis is in the middle of the chart.
How can i stuck it at the bottom ?
here is the code :
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Average Revenue');
data.addRows([
['2004', 0],
['2005', 0],
['2006', 0],
['2007', 0]
]);
var options = {
title: 'Revenue by Year',
seriesType: "bars",
series: {1: {type: "line"}},
vAxis: {title: 'Year',
titleTextStyle:{color: 'red'}},
colors:['red','black']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
http://jsfiddle.net/boj6ztLo/
thanks
set following config option...
vAxis.viewWindow.min: 0
see following working snippet...
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Average Revenue');
data.addRows([
['2004', 0],
['2005', 0],
['2006', 0],
['2007', 0]
]);
var options = {
title: 'Revenue by Year',
seriesType: 'bars',
series: {
1: {
type: 'line'
}
},
vAxis: {
title: 'Year',
titleTextStyle: {
color: 'red'
},
viewWindow: {
min: 0
}
},
colors:['red','black']
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note
recommend not using jsapi to load the library, according to 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 (loader.js) from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will also change the load statement to...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
How can i hide the vertical bar that separates the values on the left and the bars on the right?
for bar charts, set hAxis.baselineColor to 'transparent', to hide the vertical bar
set hAxis.gridlines.count to zero, so the baseline isn't replaced with a gridline
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart(transparent) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Value');
data.addRows([
['UK', 8.94],
['AF', 10.49],
['UN', 20.2],
['SK', 21.45],
]);
var options = {
legend: {
position: 'none'
},
hAxis: {
baselineColor: 'transparent',
gridlines: {
count: 0
}
},
vAxis: {
baselineColor: 'magenta'
},
width: 200
};
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm trying to use Google charts to display the results of a survey. All seems fine, apart from the title of the vAxis is being cut off slightly and I can't work out how to move it closer to the axis.
This is the code:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have a fiddle here:
https://jsfiddle.net/SBComms/pa4yLcb3/
With a Core Chart, you can adjust the size of the chartArea to allow room for the title.
However, this doesn't appear to work for a Material Chart.
Also, I would recommend loading with loader.js vs. the older library jsapi.
See following example...
google.charts.load('current', {
callback: drawChart,
packages: ['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Question title goes here', 'Percentage Score'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Section Title',
subtitle: 'Section subtitle',
},
chartArea: {
backgroundColor: 'cyan',
height: 400,
left: 60,
top: 20,
width: 500
},
legend: {
position: "none"
},
vAxis: {
title: 'Percentage',
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical',
width: 600,
height: 500
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
var chart2 = new google.visualization.ColumnChart(document.getElementById('barchart_core'));
chart2.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>========MATERIAL========</div>
<div id="barchart_material"></div>
<div>==========CORE==========</div>
<div id="barchart_core"></div>
I managed to find a real fiddle to the problem. I have updated the chart script so that the vAxis fontSize is 18:
google.load("visualization", "1.0", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['', 'Percentage'],
['Always', 40],
['Usually', 30],
['Rarely', 10],
['Never', 20]
]);
var options = {
chart: {
title: 'Company Performance'
},
legend: { position: "none" },
vAxis: {
title: 'Percentage',
titleTextStyle: {
fontSize: '18',
},
viewWindowMode:'explicit',
viewWindow: {
max:100,
min:0
}
},
bars: 'vertical', // Required for Material Bar Charts.
width: 400,
height: 400
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have then added a CSS setting to force the font size back to normal:
#barchart_material g text {
font-size: 12px !important;
}
I have updated the fiddle here: https://jsfiddle.net/SBComms/pa4yLcb3/1/
Is it possible to show each legend in different color in google pie chart? I have 3 legends in my pie chart and i want to show each one of them in different color.
Yes, from google instructions:
use the legend.textStyle option and assign it like so
Object {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
An object that specifies the legend text style. The object has this format:
{ color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean> }
The color can be any HTML color string, for example: 'red' or '#00cc00'. Also see fontName and fontSize.
so for each pi chart in the drawchart
function drawChart() {//chart 1
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 1',
pieSliceText: 'label',
legend.textStyle: { color: 'blue', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart1'));
chart.draw(data, options);
}
function drawChart() {//chart 2
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 2',
pieSliceText: 'label',
legend.textStyle: { color: 'red', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart2'));
chart.draw(data, options);
} function drawChart() {//chart 3
var data = google.visualization.arrayToDataTable([
['Language', 'Speakers (in millions)'],
['dataname1', 13], ['dataname2', 83],
]);
var options = {
title: 'chart 3',
pieSliceText: 'label',
legend.textStyle: { color: 'green', fontName: 'arial'}
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart3'));
chart.draw(data, options);
}