We Keep Coding

How do you code a grand total on each stacked column chart (Google Charts)?

I have a Stacked Column chart to which I want to add a "Grand Total" label at the top as the sum of each year. The temporary solution I found was to add it in as another { role: 'annotation' } and delete the background color, but it leaves a gap above the actual data.
Is there to code for a function to get the sum of each stacked column to display?
Here is what the code looks like so far:
function drawChart() {
// Define the chart to be drawn.
var data = google.visualization.arrayToDataTable([
['Year',
'Gangs', { role: 'annotation' },
'No Gangs', { role: 'annotation' },
'Total', { role: 'annotation' },
],
['2012', 110,110, 488,488, 590,590],
['2013', 110, 110,488,488,598,598],
['2014', 114,114, 522,522,590,590],
['2015', 85,85, 521,521,590,590],
['2016', 82,82, 590,590,590,590],
['2017', 79, 79, 548, 548,590,590],
['2018', 49, 49, 432,432,590,590],
['2018', 41, 41, 524, 524,590,590],
]);
var options = {title: 'Violent Crimes by Gang Rates',
vAxis: {title: 'Violent Deaths'},
vAxis:{maxValue: 800},
seriesType: 'bars',
//series: {2: {type: 'line'}},
colors: ['#1586DB', '#E37D24', '#fff'],
legend: {position: 'bottom', maxLines: 3},
isStacked:true};
//test
var totalSeries;
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(data, options);
}
google.charts.setOnLoadCallback(drawChart);

I don't know if this is quite what you're looking for (and it is a bit of a hack), but you can take advantage of calculated columns to automatically sum the elements in each row. You can see the full working example in this JSFiddle.
In the example, I've replaced your duplicate entries with calculated columns using view.setColumns to generate annotations (to avoid redundant data). I've used this same technique to generate a calculated column that provides a "grand total" annotation. In order for this column to display correctly, I've added an empty series (i.e., 0) at the end of each row that simply provides a "buffer" between the annotation for series 1 and the "grand total" annotation (if this isn't inserted, the "grand total" annotation tries to associate with column 2, which ruins the formatting). I've generated the grand total using a calculated column that sums values from the previous two.
With the "dummy" column on the end, your data now looks like this:
var data = google.visualization.arrayToDataTable([
['Year',
'Gangs',
'No Gangs',
'' // our "dummy" column
],
['2012', 110, 488, 0],
['2013', 110, 488, 0],
['2014', 114, 522, 0],
['2015', 85, 521, 0],
['2016', 82, 590, 0],
['2017', 79, 548, 0],
['2018', 49, 432, 0],
['2018', 41, 524, 0],
]);
To "hide" the "dummy" column as best I can, I've added the following to your options object:
series: {
2: {
enableInteractivity: false,
visibleInLegend: false,
annotations: {
stem: {
length: 0
}
}
}
}
Also, you'll want to change the "dummy" column's color (since it's the color in which the annotation will display) to something other than white (I picked black in my example).
Lastly, you'll need to use a DataView to take advantage of calculated columns. The DataView then becomes the object passed to draw, as follows:
var view = new google.visualization.DataView(data);
view.setColumns([
0, 1, // Displays columns 0 and 1 normally
{ // "Calculates" an annotation for column 1 and displays immediately after that column
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},
2, // Displays column 2 normally
{
calc: "stringify",
sourceColumn: 2,
type: "string",
role: "annotation"
}, // "Calculates" column 2 annotation
3, // Displays our dummy column for the purposes of preventing the following annotation from associating with column 2
{ // Computes a "grand total" by summing the values from columns 1 and 2
calc: (table, row) => (table.getValue(row, 1) + table.getValue(row, 2)).toString(),
type: "string",
role: "annotation"
},
]);
// Instantiate and draw the chart.
var chart = new google.visualization.ColumnChart(document.getElementById('container'));
chart.draw(view, options);

Add custom icons to Google Charts

Is there a way to use custom icons/shapes with google charts. I don't want to use the default pointShapes, rather i want to use custom icons say from font awesome, bootstrap icons or google material design.
There used to be a way to do this in the now deprecated google image charts by changing a property named 'd' of the path attribute. Can we do something similar for google charts?
If i inspect the code of the generated scattered chart as in jsFiddle code, i can notice that each point has path tags with d properties which i believe can be replaced with the raw values of svg icons. But these elements don't have any id associated with them so no way of editing picking them via javascript and editing them.
Scattered chart's snippet here:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Age', 'Weight'],
[ 8, 12],
[ 4, 5.5],
[ 11, 14],
[ 4, 5],
[ 3, 3.5],
[ 6.5, 7]
]);
var options = {
title: 'Age vs. Weight comparison',
hAxis: {title: 'Age', minValue: 0, maxValue: 15},
vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
legend: 'none',
pointSize: 20,
pointShape: 'star'
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

How to create a line chart with median line series in Google Charts

I need to create a Line Chart using Google Charts API or any JS plugin like this:

Google charts has a trendlines option:
https://developers.google.com/chart/interactive/docs/gallery/trendlines
Example from their docs:
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Diameter', 'Age'],
[8, 37], [4, 19.5], [11, 52], [4, 22], [3, 16.5], [6.5, 32.8], [14, 72]]);
var options = {
title: 'Age of sugar maples vs. trunk diameter, in inches',
hAxis: {title: 'Diameter'},
vAxis: {title: 'Age'},
legend: 'none',
trendlines: { 0: {} } // Draw a trendline for data series 0.
};
var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
I've used this with their LineChart without any problems.

Highcharts - How to set custom colors for the series

I'm using Highcharts to render some charts for a project. My problem is that when I try to set colors array in plotOptions.column, it doesn't work. Although, it works fine for plotOptions.pie.
What I need to do is to set different color presets for different series types. So when I add series of same type, they have colors picked up from their colors array. But now, for some weird reason, the default colors are showing although I have defined my own colors array for each series type.
Here is the fiddle to better understand what I mean:
http://jsfiddle.net/c5nhd/1/
And here is the link to official documentation:
http://api.highcharts.com/highcharts#plotOptions.column.colors

DEMO of different color for different series of the column chart from our customized array of colors thus overriding the default colors of the highcharts.
code:
var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'];
$( '#container' ).highcharts({
plotOptions: {
pie: { //working here
colors: colors
}
},
colors:colors,
series: [{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}]
});

The trick is to set the series color and not global options colors or point colors.
Global options colors is an applied set for all charts on the page. It will be ok if you apply it to another chart.
Also, colorByPoint will need to be false. This is default false, so you can exclude.
Also make sure to set color and not color(s) if you wish to include a legend. The legend will not know what color to use if you set multiple colors and will just default.
$( '#container' ).highcharts({
plotOptions: {
column: {
//colorByPoint: false,
//stacking: 'percent',
},
pie: {
colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']
}
},
series: [{
type: 'column',
color: '#FF530D',
data: [25, 34, 15, 17, 19]
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}, {
type: 'column',
color: '#333333',
data: [15, 27, 10, 23, 21]
}]
});
Here is an update to your js fiddle.
http://jsfiddle.net/c5nhd/4/
This also works if you wish to stack by percent.

In fact, You should use the latest highcharts.js (Highcharts JS v6.1.4 (2018-09-25)).
I have fixed this using version 6x.

How to get the vaxis line in column chart of google api chart?

I am using column chart of corechart package in google api chart. In this chart i need for vertical axis line(yaxis line). How to get vertical axis line in columnchart.
I reffered this link for creating this chart
Actual
Expected

Make Y-axis number not String.
here is the code : Copy and paste this is google Code Playground.
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Bulgaria' ],
[12, 133, 400],
[21, 153, 366],
[20, 155, 240],
[27, 160, 134],
[10, 196, 393],
[8, 190, 232]
]);
// Create and draw the visualization.
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:600, height:400,
vAxis: {title: "Year",ticks: [{v:100, f:"100$"},{v:150, f:"150$"},{v:200, f:"200$"},{v:300, f:"300$"}]},
hAxis: {title: "Cups",ticks: [{v:4, f:"3-4"},{v:8, f:"5-9"},{v:10, f:"9-13"},{v:14, f:"13-14"},{v:20, f:"15-20"}]} }
);
}