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.
Related
I used this code to render some charts in my html page.
function drawChart(id, arrayPrice) {
let dataChart = [
['', 'Price']
];
for (let index = 0; index < arrayPrice.length; index++) {
dataChart.push(['', arrayPrice[index]])
}
const firstPrice = dataChart[1][1];
const lastPrice = dataChart[dataChart.length - 1][1];
var data = google.visualization.arrayToDataTable(dataChart);
var options = {
width: 130,
height: 50,
colors: (firstPrice < lastPrice) ? ['#50afb2'] : ['#ab5780'],
legend: 'none',
tooltip: {
trigger: 'none'
},
enableInteractivity: false,
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
},
baselineColor: 'transparent'
},
hAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
},
baselineColor: 'transparent'
},
backgroundColor: { fill: 'transparent' }
};
var chart = new google.visualization.LineChart(document.getElementById(id));
chart.draw(data, options);
}
I was wondering if it was possible to do this server-side with NodeJS without using html elements in which to do the rendering.
My goal is to generate chart images to download locally to the server.
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 am using Google Charts to visualize some data. When drawing full width chart in bordered container I can see small gaps on the left and right side. Is it possible to remove it? The chart area width is set to 100%.
JS:
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales'],
['2013', 1000],
['2014', 1170],
['2015', 660],
['2016', 1030]
]);
var options = {
hAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
vAxis: {
textPosition: 'none',
gridlines: {
color: 'transparent'
}
},
legend: { position: 'none' },
chartArea: {
'width': '100%',
'height': '100%',
'backgroundColor': '#fff'
},
colors: ['#ddd'],
height: 50,
lineWidth: 0,
areaOpacity: 1,
annotations: {
stemColor : 'none'
},
tooltip : {
trigger: 'none'
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart'));
chart.draw(data, options);
}
HTML:
<div class="row">
<div class="col-md-3">
<div id="chart"></div>
</div>
</div>
FIDDLE: https://jsfiddle.net/5m6fLckw/5/
In a Google Pie chart, I want to change the colour of the indicator in the legend to go to the next results. This is now blue, and I can't seem to change that, although I can change the colour of the pie slices (done) or even of the text (not necessary). Here is a screenshot: Google pie chart.
Here is the code:
var options1 = {
legend: 'none',
pieSliceText: 'label',
width: '85%',
height: '85%',
chartArea: {'width': '80%', 'height': '80%'},
legend: {'position': 'bottom'},
backgroundColor: {fill:'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
you can use the following options...
text: legend.pagingTextStyle
arrows: legend.scrollArrows
e.g.
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['', 'Views'],
['dat', 40],
['nom', 10],
['gen', 10],
['hid1', 2],
['hid2', 3]
]);
var options = {
legend: 'none',
pieSliceText: 'label',
width: 200,
height: 200,
chartArea: {'width': '80%', 'height': '80%'},
legend: {
position: 'bottom',
// style paging text and arrows
pagingTextStyle: {
color: '#616161'
},
scrollArrows:{
activeColor: '#616161',
inactiveColor:'#e0e0e0'
}
},
backgroundColor: {fill: 'transparent'},
pieSliceBorderColor: 'transparent',
colors: ['#41ac89', '#2b9b38', '#b3b300', '#D9C022', '#bab673']
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
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'
}
});
}