I wanted to make a google chart which shows the dual y axis , but both should represents the same bar.
See this fiddle
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Car', 'Distance travelled'],
["mercedes", 44],
["lamborgh", 31],
["porsche", 12],
["aston martin", 10]
]);
var options = {
title: 'Car distance',
width: 500,
legend: { position: 'none' },
chart: { subtitle: 'money spent in distance travelled' },
axes: {
x: {
0: { side: 'top', label: 'Car stats'} // Top x-axis.
}
},
bar: { groupWidth: "20%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
// Convert the Classic options to Material options.
chart.draw(data, google.charts.Bar.convertOptions(options));
};
I have shown the Cars distance traveled , thats actually in kms, now i wanted to show the cars money spent in fuel
like a car traveled 1km and it spends $2 in fuel
now looking at the fiddle suppose we have mercedes car traveled 44km then it costs around $88 which should be depicted by the 2nd y-axis
How it can be done?
each series (y-value) in the chart represents a column in the data
"series 0" = column 1 in the data
"series 1" = column 2 in the data
then use the options to map each series to an axis...
series: {
0: { axis: 'distance' },
1: { axis: 'fuel' }
},
axes: {
y: {
distance: {label: 'Distance'},
fuel: {side: 'right', label: 'Fuel'}
}
}
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['bar']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Car', 'Distance travelled', 'Fuel'],
['mercedes', 44, 88],
['lamborgh', 31, 62],
['porsche', 12, 24],
['aston martin', 10, 20]
]);
var options = {
title: 'Car distance',
height: 500,
legend: { position: 'none' },
chart: { subtitle: 'money spent in distance travelled' },
bar: { groupWidth: "20%" },
series: {
0: { axis: 'distance' },
1: { axis: 'fuel' }
},
axes: {
x: {
0: { side: 'top', label: 'Car stats'} // Top x-axis.
},
y: {
distance: {label: 'Distance'},
fuel: {side: 'right', label: 'Fuel'}
}
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
to remove the second bar but keep the axis requires a bit of manipulation
and use of options not available to material charts
see following working snippet using a core chart...
google.charts.load('current', {
callback: drawChart,
packages:['bar', 'corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Car', 'Distance travelled'],
['mercedes', 44],
['lamborgh', 31],
['porsche', 12],
['aston martin', 10]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
label: 'Fuel',
type: 'number',
calc: function () {
return null;
}
}]);
var options = {
title: 'Car distance',
height: 500,
legend: { position: 'none' },
chart: { subtitle: 'money spent in distance travelled' },
bar: { groupWidth: "20%" },
// center bar with x-axis label
isStacked: true,
// material chart theme
theme: 'material',
// y-axis settings
vAxes: {
0: {
ticks: [0, 10, 20, 30, 40, 50],
title: 'Distance'
},
1: {
ticks: [0, 20, 40, 60, 80, 100],
title: 'Fuel'
}
},
// map series
series: {
0: {
targetAxisIndex: 0
},
1: {
targetAxisIndex: 1
}
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
};
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note
material charts --> packages:['bar'] -- google.charts.Bar
core charts --> packages:['corechart'] -- google.visualization.ColumnChart
Related
I have attached snippet for a dual Y axis chart.
The orange dot for Ontime% Goal corresponds with the blue bar for Ontime %. Both have been assigned to targetAxisIndex: 0
Can I shift/move the dot to align above the blue bar? (see attached picture for desired position).
Thank you as always to the experts out there!
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawStuff);
function drawStuff() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions = {
width: 900,
series: {
0: {targetAxisIndex: 0, type: 'bars'},
1: {targetAxisIndex: 1, type: 'bars'},
2: {targetAxisIndex: 0, type: 'line', pointSize: 8, pointShape: { type: 'circle' } },
},
title: 'Ontime % on the left, Count on the right',
bar:{
width: "60%"
},
vAxis: {
minValue: 0
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Ontime %'},
1: {title: 'Count'}
}
};
function drawClassicChart() {
var classicChart = new google.visualization.ColumnChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawClassicChart();
};
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div" style="width: 800px; height: 500px;"></div>
nothing out of the box will allow you to adjust the position of the point.
you can move it manually, on the chart's ready event.
but the chart will move it back when the user hovers the point.
you can use a MutationObserver to move the point when the chart moves it back,
but this will just cause it to blink from one spot to the other while it is being hovered.
not much you can do, unless you disable tooltips.
see following working snippet,
hover the point to see it move...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
//var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = google.visualization.arrayToDataTable([
['Type', 'Ontime%', 'Count', 'Ontime% Goal'],
['AE', 90, 500, 100]
]);
var classicOptions = {
width: 900,
series: {
0: {targetAxisIndex: 0, type: 'bars'},
1: {targetAxisIndex: 1, type: 'bars'},
2: {
targetAxisIndex: 0,
type: 'line',
pointSize: 8,
pointShape: {type: 'circle'},
},
},
title: 'Ontime % on the left, Count on the right',
bar:{
width: "60%"
},
vAxis: {
minValue: 0
},
vAxes: {
0: {title: 'Ontime %'},
1: {title: 'Count'}
}
};
function drawClassicChart() {
var classicChart = new google.visualization.ColumnChart(chartDiv);
google.visualization.events.addListener(classicChart, 'ready', function () {
var chartLayout = classicChart.getChartLayoutInterface();
var bounds = chartLayout.getBoundingBox('bar#0#0');
var observer = new MutationObserver(function () {
var circles = chartDiv.getElementsByTagName('circle');
if (circles.length > 1) {
circles[1].setAttribute('cx', (bounds.left + (bounds.width / 2)));
}
});
observer.observe(chartDiv, {
childList: true,
subtree: true
});
});
classicChart.draw(data, classicOptions);
//button.innerText = 'Change to Material';
//button.onclick = drawMaterialChart;
}
drawClassicChart();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
best case, you could disable the chart's tooltips,
then add your own custom tooltips,
for both the point and columns, etc...
the chart does provide mouseover and mouseout events,
not sure its worth the effort...
I have chart configured like in working jsfiddle.
I have configured labels(basing on google doc documentation: https://developers.google.com/chart/interactive/docs/gallery/barchart#labeling-bars)
But they aren't visible. When I change chart type to google.visualization.BarChart, then labels appear but bars structure is destroyed. How to add labels to my configuration?
Replicated:
https://jsfiddle.net/41fmq37j/
JS:
google.charts.load('current', {'packages':['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
[{label: 'Year', id: 'year', type: 'number'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{ role: 'annotation' }],
[2014, 10, 400 ,'label1'],
[2014, 800, 100 ,'label2'],
[2015, 200, 460 ,'label3'],
[2015, 110, 660 ,'label4'],
[2016, 100, 300 ,'label5'],
[2016, 600, 120 ,'label6'],
[2017, 360, 540 ,'label7'],
[2017, 300, 500 ,'label8']
]);
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT:
It is possible to configure yAxis like below? Because current format can be confusing.
I would like to create more, a little different graphs, for example which will group bars by string. So another question is: how we can archive grouping yAxis by string? Maybe we should create any comparator?
material charts do not support columns roles, such as 'annotation',
along with several other options
and, it's not possible to have multiple stacks per label in classic charts
as such, we can use a material chart,
and add our own annotations manually,
on the chart's 'ready' event
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[
{label: 'Year', id: 'year', type: 'number'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{role: 'annotation', type: 'string'}
],
[2014, 10, 400, 'label1'],
[2014, 800, 100, 'label2'],
[2015, 200, 460, 'label3'],
[2015, 110, 660, 'label4'],
[2016, 100, 300, 'label5'],
[2016, 600, 120, 'label6'],
[2017, 360, 540, 'label7'],
[2017, 300, 500, 'label8']
]);
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
vAxis: {
format: '0'
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
// add annotations
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var copyLabel;
var coordsBar;
var coordsLabel;
var labels;
var svg;
// get svg
svg = container.getElementsByTagName('svg')[0];
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
if (label.textContent === data.getValue(0, 0).toString()) {
copyLabel = label;
}
});
// find top bars, add labels
bars = svg.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar, index) {
coordsBar = bar.getBBox();
annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
coordsLabel = annotation.getBBox();
annotation.textContent = data.getValue(index, 3);
annotation.setAttribute('fill', '#000000');
annotation.setAttribute('x', coordsBar.x + coordsBar.width - 16);
annotation.setAttribute('y', coordsBar.y + coordsBar.height - (coordsLabel.height / 2));
annotation.style.zIndex = -1;
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
EDIT
the annotation script finds the first y-axis label,
and uses it as a clone for the annotations.
if the values for the y-axis change,
then the script to find the label needs to change.
updated here...
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
// find first y-axis label
if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
annotation = label;
}
});
see following working snippet...
google.charts.load('current', {
packages:['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
[
{label: 'Date', id: 'string', type:'date'},
{label: 'Sales', id: 'Sales', type: 'number'},
{label: 'Expenses', id: 'Expenses', type: 'number'},
{role: 'annotation', type: 'string'}
],
[new Date('2011-12-20'), 10, 400, 'User1'],
[new Date('2011-12-20'), 800, 100, 'User2'],
[new Date('2011-12-21'), 200, 460, 'User3'],
[new Date('2011-12-21'), 200, 460, 'User3'],
]);
var dateFormat = 'YYYY/MM/dd';
var options = {
chart: {
title: 'Sales and Expenses',
subtitle: 'Some descr',
},
bars: 'horizontal',
height: 400,
isStacked: true,
vAxis: {
format: dateFormat,
}
};
var container = document.getElementById('chart_div');
var chart = new google.charts.Bar(container);
var formatDate = new google.visualization.DateFormat({
pattern: dateFormat
});
// add annotations
google.visualization.events.addListener(chart, 'ready', function () {
var annotation;
var bars;
var copyLabel;
var coordsBar;
var coordsLabel;
var labels;
var svg;
// get svg
svg = container.getElementsByTagName('svg')[0];
// find label to clone
labels = svg.getElementsByTagName('text');
Array.prototype.forEach.call(labels, function(label) {
// find first y-axis label
if (label.textContent === formatDate.formatValue(data.getValue(0, 0))) {
copyLabel = label;
}
});
// find top bars, add labels
bars = svg.getElementsByTagName('path');
Array.prototype.forEach.call(bars, function(bar, index) {
coordsBar = bar.getBBox();
annotation = copyLabel.parentNode.insertBefore(copyLabel.cloneNode(true), copyLabel);
coordsLabel = annotation.getBBox();
annotation.textContent = data.getValue(index, 3);
annotation.setAttribute('fill', '#ffffff');
annotation.setAttribute('text-anchor', 'start');
annotation.setAttribute('x', coordsBar.x + coordsBar.width);
annotation.setAttribute('y', coordsBar.y + (coordsBar.height / 2) + (coordsLabel.height / 2));
annotation.style.zIndex = -1;
});
});
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I have a google scatter chart that has some significant thresholds in it. How do I visualise them?
Do I push some extra ticks on chart axis? If so how do I add just one and how do I style it?
I am aiming for something like this.
I am using React Google charts
add another column, or series, with the same value for all rows...
this can be added using a data view with calculated columns,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 165],
[1, 175],
[2, 185]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{
calc: function () {
return 150;
},
label: 'min',
type: 'number'
},
{
calc: function () {
return 175;
},
label: 'avg',
type: 'number'
},
{
calc: function () {
return 200;
},
label: 'max',
type: 'number'
}
]);
var options = {
vAxis: {
viewWindow: {
min: 125,
max: 225
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
EDIT
here's another example...
add additional columns to the data table,
use getColumnRange for find the min and max x-axis values
google.charts.load('current', {
callback: drawChart,
packages:['corechart']
});
function drawChart() {
var data = google.visualization.arrayToDataTable([
['x', 'y0'],
[0, 165],
[1, 175],
[2, 185]
]);
var xAxisRange = data.getColumnRange(0);
data.addColumn({label: 'min', type: 'number'});
data.addColumn({label: 'avg', type: 'number'});
data.addColumn({label: 'max', type: 'number'});
data.addRows([
[xAxisRange.min, null, 150, 175, 200],
[xAxisRange.max, null, 150, 175, 200]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, {
series: {
1: {
color: 'cyan'
},
2: {
color: 'cyan'
},
3: {
color: 'cyan'
}
}
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
I have data in the form of
[[X, Y, {role: "annotation"}], [1,2, "something"], ...,...]
that I pass to
var data = google.visualization.arrayToDataTable(dataPattern); and plot with
var material = new google.charts.Bar(document.getElementById('distribution-over-range'));
material.draw(data, google.charts.Bar.convertOptions(options));
The annotations fail to appear. Any idea why?
google.charts.Bar component does not support annotations role but you could utilize google.visualization.BarChart from corechart package for that purpose as demonstrated below:
//google.load("visualization", "1.1", {packages:["bar"]});
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage', { role: "style" }, { role: 'annotation' }],
["King's pawn (e4)", 44, "#b87333",'43%'],
["Queen's pawn (d4)", 31, "silver", '31%'],
["Knight to King 3 (Nf3)", 12, "gold", '12%'],
["Queen's bishop pawn (c4)", 10, "color: #e5e4e2", '10%'],
['Other', 3, "green", '3%']
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
//var chart = new google.charts.Bar(document.getElementById('top_x_div'));
var chart = new google.visualization.BarChart(document.getElementById("top_x_div"));
chart.draw(data, options);
};
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div" style="width: 640px; height: 480px;"></div>
I created an horizontal bar chart with Google Charts and I want to change the color of the bars that belongs to a certain range, I tried to do it by many ways
but in vain, here is my code :
google.load("visualization", "1.1", {packages:["bar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['Agents', 'Percentage' ],
<?php
for($i=0;$i<sizeof($name);$i++){
echo '[\''.$name[$i].'\','.$count[$i].'],';
}
?>
]);
var options = {
title: 'EKMS Usage per agent',
width: 900,
legend: { position: 'none' },
chart: { title: 'EKMS Usage per agent',
subtitle: 'By percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var chart = new google.charts.Bar(document.getElementById('top_x_div'));
chart.draw(data, options);
};
$name and $count are two arrays that I retrieved from my database and that has the same length, I tried to add a column { role: "style" } in the variable data and to
assign colors using a test like this :
var data = new google.visualization.arrayToDataTable([
['Agents', 'Percentage', { role: "style" } ],
<?php
for($i=0;$i<sizeof($name);$i++){
if($count[$i]<50)
echo '[\''.$name[$i].'\','.$count[$i].',\'red\'],';
else
echo '[\''.$name[$i].'\','.$count[$i].',\'blue\'],';
}
?>
]);
I tried also to add colors : ['blue','red'] and it changes the color of all the bars.
P.S : Note that the chart that I used is : Top X Chart Here is its link :
https://google-developers.appspot.com/chart/interactive/docs/gallery/barchart#top-x-charts
It seems that google.charts.Bar component does not support style role, but you could utilize google.visualization.BarChart component from corechart package instead to customize bar styles as demonstrated below.
Example
//google.load("visualization", "1.1", {packages:["bar"]});
google.load("visualization", "1.1", {packages:["corechart"]});
google.setOnLoadCallback(drawStuff);
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Opening Move', 'Percentage', { role: "style" }],
["King's pawn (e4)", 44, "#b87333"],
["Queen's pawn (d4)", 31, "silver"],
["Knight to King 3 (Nf3)", 12, "gold"],
["Queen's bishop pawn (c4)", 10, "color: #e5e4e2"],
['Other', 3,"green"]
]);
var options = {
title: 'Chess opening moves',
width: 900,
legend: { position: 'none' },
chart: { title: 'Chess opening moves',
subtitle: 'popularity by percentage' },
bars: 'horizontal', // Required for Material Bar Charts.
axes: {
x: {
0: { side: 'top', label: 'Percentage'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
//var chart = new google.charts.Bar(document.getElementById('top_x_div'));
var chart = new google.visualization.BarChart(document.getElementById("top_x_div"));
chart.draw(data, options);
};
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="top_x_div" style="width: 900px; height: 500px;"></div>