My issue is that the each bar spans a few days either side of the date instead of just the one day on the hAxis (x axis). How do I make each hAxis bar be just 1 day wide?
google.charts.safeLoad({'packages':['corechart']});
google.charts.setOnLoadCallback(function(){
chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
});
...
var rows = [[new Date("2022-12-14 00:00:00"),2,"14/12/2022","color:blue"],[new Date("2022-12-01 00:00:00"),1,"01/12/2022","color:blue"],[new Date("2022-09-21 00:00:00"),1,"21/09/2022","color:blue"],[new Date("2022-03-16 00:00:00"),1,"16/03/2022","color:blue"]];
var data = new google.visualization.DataTable();
data.addColumn('date', "Date");
data.addColumn('number', "Quantity");
data.addColumn({type:"string", role:"tooltip"});
data.addColumn({type:"string", role:"style"});
data.addRows(rows);
var options = {
hAxis:{
title: "Date",
textStyle : { fontSize:10 },
titleTextStyle: { fontSize:12, bold:true, italic:false },
viewWindow: { min:new Date("2021-12-14"), max:new Date("2022-12-14") }
},
vAxis:{
title: "Quantity",
textStyle : { fontSize:10 },
titleTextStyle: { fontSize:12, bold:true, italic:false },
format:"0"
},
isStacked: "absolute",
animation: {
duration: 750,
easing: "out",
startup: true
},
chartArea: {
width: "92%",
height: "160",
top: "4"
},
explorer: { actions: ["dragToZoom", "rightClickToReset"] },
legend: {position: 'none'},
width: "100%",
height: "100%",
bar: {
gap:2,
groupWidth: "95%"
}
};
chart.draw(data, options);
Related
I use these codes but I couldn't make transparent background. Also, I couldn't make loop for data. I tried loop by using data.addColumn(ar[i],ar2[i]) but it wouldn't be succeed.
function drawPaLoChart() {
var data = google.visualization.arrayToDataTable([
['Hours', 'Seconds'],
['0', pageload[0]],
['1', pageload[1]],
['21', pageload[21]],
['22', pageload[22]],
['23', pageload[23]]
]);
var options = {
chart: {
legend: { position: 'none' },
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
backgroundColor: {fill: 'transparent'},
chartArea: {
backgroundColor: 'transparent'
}
}
};
var chart = new google.charts.Bar(document.getElementById('palochart'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
first, only the title and subtitle options should be inside the chart key,
as follows...
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
legend: { position: 'none' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" },
backgroundColor: {fill: 'transparent'},
chartArea: {
backgroundColor: 'transparent'
}
};
as for the loop, use an array to build the data in a loop...
var chartData = [
['Hours', 'Seconds']
];
for (var i = 0; i < pageload.length; i++) {
chartData.push([i.toString(), pageload[i]]);
}
var data = google.visualization.arrayToDataTable(chartData);
I want to change that graph color and hide y-axis values but how can I do this. Please help me. Here is my code-
var view = new google.visualization.DataView(datas);
view.setColumns([0, 1,
{
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2]);
var options2 = {
width: 555,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
isStacked: true,
vAxis: {
baselineColor:'Black',
textPosition: 'none',
gridlines: {
color: 'transparent'
}
}
};
Bar color change:
var options= {colors: ['red','green'],}
Hide Y Axis:
vAxis:{
baselineColor: '#fff',
gridlineColor: '#fff',
textPosition: 'none'
}
I have problem with google charts. I am using ColumnChart to show my data. I wan t to implement pagination on charts.
This is my chart:
I want to implement something like this:
This is my option for chart
var options = {
width: '100%',
height: '100%',
chartArea: {
width: '90%',
height: '90%',
},
bar: { groupWidth: '75%' },
backgroundColor: 'transparent',
titleTextStyle: {
color: 'white'
},
isStacked: true,
series: $scope.series,
legend: $scope.legendStyleDesktop,
hAxis: $scope.hAxis,
vAxis: $scope.vAxisPercentageRate,
showRowNumber: true,
page: 'enable',
pageSize: 2,
pagingSymbols: {
prev: 'prev',
next: 'next'
},
pagingButtonsConfiguration: 'auto'
};
var data = google.visualization.arrayToDataTable(dataToVisualize);
var chart = new google.visualization.ColumnChart(document.getElementById('top_x_div'), document.getElementById("selectParams").style.display = "none", document.getElementById("showExport").style.display = "inline");
chart.draw(data, options);
When I put to show data in table, pagination works, but in chart doesn't work.
Any idea, and thank you for help.
I have three pie charts being generated using Google Charts API. I want to compress this function further as there is a lot of duplication. Is there a loop I can make for it etc.
if (data) {
var myVar = [];
var myVar1 = [];
var myVar2 = [];
myVar.push(['Label', 'Value']);
myVar1.push(['Label', 'Value']);
myVar2.push(['Label', 'Value']);
myVar.push(['Car Sales Today', data.salesToday, ]);
myVar1.push(['Car Sales Yesterday', data.salesYesterday]);
myVar2.push(['Car Sales Last Week', data.salesLastWeek]);
var build1 = {
package: 'PieChart',
data: myVar,
customTooltips: [
data.salesToday,
],
container: 'today-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e6dc39'],
pieSliceText: 'none'
}
};
var build2 = {
package: 'PieChart',
data: myVar1,
customTooltips: [
data.salesYesterday,
],
container: 'yesterday-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#33bb18'],
pieSliceText: 'none'
}
};
var build3 = {
package: 'PieChart',
data: myVar2,
customTooltips: [
data.salesLastWeek
],
container: 'lastweek-sales-chart',
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e06e29'],
pieSliceText: 'none'
}
};
charts.push(build1, build2, build3);
google.setOnLoadCallback.drawCharts(build1.container);
google.setOnLoadCallback.drawCharts(build2.container);
google.setOnLoadCallback.drawCharts(build3.container);
}
I tried to do the following for example:
var myVar, myVar1, myVar2 = [];
but I get an error. Any help would be great.
I took some time to optimize your code, but I didn't test it. make sure all the variable names are ok, and don't make a conflict on your code
if (data) {
var allData = [{
arr : [['Label', 'Value'], ['Car Sales Today', data.salesToday]],
container : 'today-sales-chart',
customTooltips: data.salesToday
}
,{
arr : [['Label', 'Value'], ['Car Sales Yesterday', data.salesYesterday]],
container : 'yesterday-sales-chart',
customTooltips: data.salesYesterday
}
,{
arr : [['Label', 'Value'], ['Car Sales Last Week', data.salesLastWeek]],
container : 'lastweek-sales-chart',
customTooltips: data.salesLastWeek
}
];
var options = {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: ['#e6dc39'],
pieSliceText: 'none'
}
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: [ allData[index].customTooltips ],
container: allData[index].container,
options: options
});
}
for(var index in builds) {
charts.push(builds[index]);
google.setOnLoadCallback.drawCharts(builds[index].container);
}
}
Update
to add the possibility to change the color, in this case you don't need to use options as an independent variable :
var builds = [];
for (var index in allData) {
builds.push({
package: 'PieChart',
data: allData[index].arr,
customTooltips: [ allData[index].customTooltips ],
container: allData[index].container,
options: {
width: 'auto',
height: 300,
chartArea: { width: '50%', height: '80%' },
yAxis: { textPosition: 'none' },
legend: { position: "bottom" },
tooltip: { isHtml: true },
colors: allData[index].color, // <--- you set the color here
pieSliceText: 'none'
}
});
}
I am using google api line chart with annotation. How can I change the font size and font format?
<script type="text/javascript">
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', '');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn('number', '');
data.addRows([['2010', '67', 67]]);
data.addRows([['2011', '69', 69]]);
data.addRows([['2012', '68', 68]]);
data.addRows([['2013', '67', 67]]);
var options = {
width: 350,
height: 250,
pointSize: 5,
legend: {position: 'none'},
chartArea: {
left: 0,
top: 60,
width: 300,
height: 75},
vAxis: {
baselineColor: '#fff',
gridlines: {color: '#fff'},
minValue: 64,
maxValue: 71
},
tooltip: {trigger: 'none'},
enableInteractivity: false,
annotation: {
1: {
style: 'default'
}
},
series: {0: {color: '#4D7AD3'}, 1: {color: '#4D7AD3'}}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<body>
<h2>Line Charts</h2>
<div id="chart_div"></div>
</body>
Try this
var options = {
annotations: {
textStyle: {
fontName: 'Times-Roman',
fontSize: 18,
bold: true,
italic: true,
color: '#871b47', // The color of the text.
auraColor: '#d799ae', // The color of the text outline.
opacity: 0.8 // The transparency of the text.
}
}
};
https://developers.google.com/chart/interactive/docs/gallery/linechart