We Keep Coding

jqPlot: Define labels for a bar chart with multiple series

In the jqPlot documentation for Data Point Labels it gives an example (see third example) for defining custom point labels for a bar chart with one series.
I need to do this, but for a bar chart with multiple series. Here is what I tried. I used the documentation here.
var line1 = [14, 32, 41];
var line2 = [15, 33, 42];
var plot3 = $.jqplot('chart1', [line1, line2], {
title: 'Bar Chart with Point Labels',
seriesDefaults: {renderer: $.jqplot.BarRenderer},
series:[{
pointLabels: {
show: true,
labels: [
['fourteen', 'thirty two', 'forty one'],
['fifteen', 'thirty three', 'forty two']
]
}
}],
axes: {
xaxis: { renderer: $.jqplot.CategoryAxisRenderer },
yaxis: { padMax: 1.3 } }
});
The documentation says "one array for each series," which I have. But the graph looks like this. My desired result is for the point labels to be (from left to right): fourteen, fifteen, thirty two, thirty three, forty one, forty two

How to resize charts to fit the parent container with Google API

So I created a combo chart using the visualization API from Google, but im having problems resizing said chart to fit its parent container
That's how it looks on the website, The parent container's width is the one hovered. And i want the chart to fill the entire parent's width.
I have a panel system, in which each tab will have a different chart. the first one works like a charm, I dont have a problem with that one it fills the parent's container width correctly, but the second one is the one im having problems with.
Here's the HTML
<div class="tab-pane fade in active" id="anuales">
<div id ="anual-bar-chart" height ="500px" ></div>
</div>
<div class="tab-pane fade in" id="semestre-1">
<div id ="semester-1-chart" height="500px"></div>
</div>
And here's the js file to draw the charts
google.load("visualization", "1", {packages:["corechart", 'bar']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
The one that's named char2 at the bottom is the chart that im having problems with. I put the other one for u to see that I'm using the same configuration, but somehow it's displaying the charts different.
Can someone tell me what can I do, cause I've been looking around and there's nothing. I tried resizing the "chartArea" configuration that the api mentioned, but that only takes out the labels, but doesn't fit the parents container.

Google Charts don't resize automatically. They have to be redrawn when things resize (and showing/hiding is a resize).
I believe the code below, which I ripped off this question should solve your problem (you will need jquery too):
//create trigger to resizeEnd event
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
//redraw graph when window resize is completed
$(window).on('resizeEnd', function() {
drawChart(data);
});

I wonder if my suggestion will solve your problem... Shouldn't you make two separate calls to draw the graphics? Perhaps your first bar chart is influencing your second because you have them bundled into one function call. For one of my projects I needed to deliver a piechart and a geochart and so I created a separate function to call them individually.
Please try this:
function drawCharts(){
anualBarChart();
semester1Chart();
}
function anualBarChart(){
var data = google.visualization.arrayToDataTable([
['Año', 'Nacimiento', 'Reconocimiento', 'Adopción Simple', 'Matrimonios', 'Divorcios', 'Defunciones', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['1997', 39520,732,39,10332,489,6033,88,0,7154],
['1998', 39113,728,61,9908,607,6261,82,0,7095],
['1999', 41007,825,58,10476,611,6103,74,0,7394],
['2000', 40337,898,30,10479,685,6198,80,0,7338],
['2001', 38132,847,10,9856,849,6288,78,0,7008],
['2002', 36933,856,7,9532,826,6425,96,0,6834],
['2003', 38688,858,63,9600,915,6731,139,0,7124],
['2004', 39612,919,40,9088,962,6674,199,0,7187],
['2005', 40985,1053,6,8785,1037,6874,215,0,7369],
['2006', 38863,1031,28,9023,1063,6954,164,0,7141],
['2007', 42757,1226,0,9318,1177,7169,3,0,8596],
['2008', 41310,1268,1,8842,1224,7676,1,0,7540],
['2009', 41155,1227,4,8185,1136,7757,5,0,7434],
['2010', 10867,1258,3,8268,1200,8250,3,330,7522],
['2011', 41760,1314,2,8977,1356,8077,5,987,7810],
['2012', 41553,1386,4,9240,1400,8622,7,782,7874],
['2013', 40953,1415,0,9726,1603,9107,11,622,7930],
['2014', 40981,1305,0,9713,1516,9349,5,619,7936],
['2015', 27017,887,0,6342,1227,3085,3,398,5245],
]);
var options = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart = new google.visualization.ComboChart(document.getElementById('anual-bar-chart'));
chart.draw(data, options);
}
function semester1Chart(){
var data2 = google.visualization.arrayToDataTable([
['Mes', 'Nacimiento', 'Defunciones', 'Matrimonios', 'Divorcios', 'Reconocimientos', 'Adopción Simple', 'Sentencias', 'Actas Foráneas', 'Promedio'],
['Ene-15',3865,897,586,130,138,0,0,38,0],
['Feb-15',3322,793,818,166,143,0,0,62,0],
['Mar-15',3314,802,745,156,88,0,0,52,0],
['Abr-15',3289,714,653,159,106,0,1,35,0],
['May-15',3153,718,662,155,20,0,0,37,0],
['Jun-15',3349,728,901,162,103,0,0,42,0],
['Jul-15',3254,697,797,168,10,0,2,70,0],
['Ago-15',3462,736,1182,131,123,0,0,62,0],
]);
var options2 = {
titleTextStyle: {color:'white'},
backgroundColor: {fill: 'transparent'},
chartArea: {width:'85%',height:'65%'},
vAxis: {textStyle:{color:'white'}},
legend:{textStyle: {color: 'white'}, position: 'bottom'},
height: 350,
hAxis: {textStyle:{color:'white'}},
seriesType: 'bars',
series: {8 : {type: 'line'}}
};
var chart2 = new google.visualization.ComboChart(document.getElementById('semester-1-chart'));
chart2.draw(data2, options2);
}
google.load("visualization", "1", {packages:["corechart","bar"]});
google.setOnLoadCallback(drawCharts);
The more I think about it, this shouldn't make a difference. Let me know if it is a bust and I'll remove it rather than copping down votes.

How do I show x axis labels in a Google LinChart

I'm trying out Google charts for rendering a line chart for my app. Things mostly work, I get the following:
The one remaining issue I have is that I am only getting a single x-axis label. (The 12:00).
I'd like to show more x-axis labels, so I tried adding a gridlines property:
// Line chart visualization
var myLine = new google.visualization.ChartWrapper({
'chartType': 'LineChart',
'containerId': 'line_div'
});
myLine.setOptions({
'title': 'My Chart',
lineWidth: 1,
colors: ['#006600', '#FF0000'],
vAxes: [
{title: 'AAA', titleTextStyle: {color: '#000000'}}, // Left axis
{title: 'BBB', titleTextStyle: {color: '#000000'}} // Right axis
],
hAxis: {
format: 'hh:mm',
gridlines: {count: 20}
},
series: [
{targetAxisIndex: 1},
{targetAxisIndex: 0}
]
});
But no luck, it still only displays one label and no x-axis gridlines.
How do I get more x-axis labels?

The problem turned out to be how I was populating my DataTable. I was using:
dataTable.addColumn({type: 'date', label: 'Date'})
because in my thinking a new Date() is a date. Google charts has a different opinion, so what I needed to do was:
dataTable.addColumn({type: 'datetime', label: 'Date'})
and that sorted it.

Google Annotation Chart background color [duplicate]

I'm styling a google chart using the javascript api. I want to change the background of the area where the data is plotted. For some reason when I set background options like so:
chart.draw(data, { backgroundColor: { fill: "#F4F4F4" } })
It changes the the background of the whole chart and not the area where the data is plotted. Any ideas on how to only change the background of the plotted area?
Thanks

pass the options like this
var options = {
title: 'title',
width: 310,
height: 260,
backgroundColor: '#E4E4E4',
is3D: true
};

add this to your options:
'chartArea': {
'backgroundColor': {
'fill': '#F4F4F4',
'opacity': 100
},
}

The proper answer is that it depends if it is classic Google Charts or Material Google Charts. If you use classic version of the Google Charts, multiple of the above suggestion work. However if you use newer Material type Google charts then you have to specify the options differently, or convert them (see google.charts.Bar.convertOptions(options) below). On top of that in case of material charts if you specify an opacity for the whole chart, the opacity (only) won't apply for the chart area. So you need to explicitly specify color with the opacity for the chart area as well even for the same color combination.
In general: material version of Google Charts lack some of the features what the Classic has (slanted axis labels, trend lines, custom column coloring, Combo charts to name a few), and vica versa: the number formating and the dual (triple, quadruple, ...) axes are only supported with the Material version.
In case a feature is supported by both the Material chart sometimes requires different format for the options.
<body>
<div id="classic_div"></div>
<div id="material_div"></div>
</body>
JS:
google.charts.load('current', { 'packages': ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540],
['2009', 1120, 580],
['2010', 1200, 500],
['2011', 1250, 490],
]);
var options = {
width: 1000,
height: 600,
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017'
},
// Accepts also 'rgb(255, 0, 0)' format but not rgba(255, 0, 0, 0.2),
// for that use fillOpacity versions
// Colors only the chart area, simple version
// chartArea: {
// backgroundColor: '#FF0000'
// },
// Colors only the chart area, with opacity
chartArea: {
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.1
},
},
// Colors the entire chart area, simple version
// backgroundColor: '#FF0000',
// Colors the entire chart area, with opacity
backgroundColor: {
fill: '#FF0000',
fillOpacity: 0.8
},
}
var classicChart = new google.visualization.BarChart(document.getElementById('classic_div'));
classicChart.draw(data, options);
var materialChart = new google.charts.Bar(document.getElementById('material_div'));
materialChart.draw(data, google.charts.Bar.convertOptions(options));
}
Fiddle demo: https://jsfiddle.net/csabatoth/v3h9ycd4/2/

It is easier using the options.
drawChart() {
// Standard google charts functionality is available as GoogleCharts.api after load
const data = GoogleCharts.api.visualization.arrayToDataTable([
['Chart thing', 'Chart amount'],
['Na Meta', 50],
['Abaixo da Meta', 22],
['Acima da Meta', 10],
['Refugos', 15]
]);
let options = {
backgroundColor: {
gradient: {
// Start color for gradient.
color1: '#fbf6a7',
// Finish color for gradient.
color2: '#33b679',
// Where on the boundary to start and
// end the color1/color2 gradient,
// relative to the upper left corner
// of the boundary.
x1: '0%', y1: '0%',
x2: '100%', y2: '100%',
// If true, the boundary for x1,
// y1, x2, and y2 is the box. If
// false, it's the entire chart.
useObjectBoundingBoxUnits: true
},
},
};
const chart = new GoogleCharts.api.visualization.ColumnChart(this.$.chart1);
chart.draw(data, options);
}
I'm using polymer that's why i'm using this.$.cart1, but you can use selectedbyid, no problem.

Have you tried using backgroundcolor.stroke and backgroundcolor.strokewidth?
See Google Charts documentation.

If you want to do like this then it will help. I use stepped area chart in the combo chart from the Google library...
where the values for each stepped area is the value for ticks.
Here is the link for jsfiddle code

Simply add background option
backgroundColor: {
fill:'red'
},
here is the fiddle link https://jsfiddle.net/amitjain/q3tazo7t/

You can do it just with CSS:
#salesChart svg > rect { /*#salesChart is ID of your google chart*/
fill: #F4F4F4;
}

How to change Google Area Chart Overlap colour or opacity?

Regarding Google Charts, is there a way to adjust the colour or opacity between two or more overlapping areas of an area chart? I've been attempting to modify Google's sample code provided at the Area Chart development website. For convenience I have provided a copy of the sample code below. Note: If there isn't an officially supported way to do this I am interested in any dirty ways to go about it too.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0}
};
var chart = new
google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
To help clarify what I hope to accomplish please see the following image.

You can add series with different areaOpacity to your options:
...
vAxis: {minValue: 0},
series: {
0: { areaOpacity: 0.2},
1: { areaOpacity: 0.7}
}