Google chart pagination - javascript

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

Is it possible to use the Google charts api to create charts without using html elements for rendering?

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.

how to change stacked bar chart color and hide y-axis?

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'
}

Gap on right and left sides in areaChart

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/

Changing colour of Google Pie Charts next page indicator

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 want to make this Javascript function more efficient?

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'
}
});
}

Categories

Resources