Im using google chart for my application. I need a chart like
Expected
and i used this code to get the expected chart.
google.load("visualization", "1", {packages: ["corechart"]});
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['numbers', 'Austria', 'Bulgaria'],
[2003, 1336060, 400361],
[2004, 1538156, 366849],
[2005, 1576579, 440514],
[2006, 1600652, 434552],
[2007, 1968113, 393032],
[2008, 1901067, 517206]
]);
var hAxisTick = [{v: '2003', f: "3-4"}, {v: '2004', f: "5-9"}, {v: '2005', f: "9-13"}, {v: '2006', f: "13-14"}, {v: '2007', f: "14-24"}, {v: '2008', f: "24-84"}];
var vAxisTick = [0, 1968113];
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('chart_div')).
draw(data,
{width: 600, height: 250,
colors: ['706C6B', 'D6D3D3'],
legend: {position: 'none'},
vAxis: {ticks: hAxisTick, gridlines: {color: 'FFFFFF'}},
hAxis: {gridlines: {color: 'FFFFFF'}, ticks: vAxisTick, baselineColor: '#FFFFFF'},
enableInteractivity: false}
);
}
google.setOnLoadCallback(drawVisualization);
but,
Actual
how to get the x-axis line to the top and also i need to show the tick mark for the given points.
Related
I'm using a standard bar chart based on Google's code description
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350]
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
bars: 'horizontal' // Required for Material Bar Charts.
};
The problem is that I have more data, like the variation in Sales in 2014, that I would like to get included in the chart = maybe as whisker lines or an additional number that overlay when you mouseover a bar. Is this even possible? If so, how is it done?
It turns out you can do this (it's a bit more complicated with html because you have to find the classic graph options)
add specific tooltip to arraytoDataTable
How can i display different labels under each column and also have another label for the entire group?
As you can see in the picture below i want to use fontawesome icons for each column but another label for the main group. I found other answers how to use fa icons but don't know how to position them under each bar.
The trendlines which connect distinct columns are not so important but would be great if i can find out how to add them also.
Also the chart needs to be scrollable as it can hold lots of data and the labels need to be shown. I found some examples with scroll as well.
Any info is highly appreciated. Or are there any other open source chart frameworks in which i could implement this or something similar to fit my needs?
using google charts...
on the chart's 'ready' event,
you can use chart method --> getChartLayoutInterface()
var chartLayout = chart.getChartLayoutInterface();
the interface has a method --> getBoundingBox()
which will return the position of requested chart element
to get the position of a bar...
var barBounds = chartLayout.getBoundingBox('bar#0#0');
where the first #0 is the series, and the second is the row,
'bar#0#0' would get the first bar on the first row
we can also get the position of the axis label...
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#0');
we can use a combination of the bar and label bounds to position the icon
we want the left position from the bar, and the top position from the label
see following working snippet,
a column property is used to store the icon name,
the x-axis labels are used for the group
once the icon is in position, the axis label is moved down to make room
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'file', type: 'number', p: {icon: 'fa-file'}},
{label: 'database', type: 'number', p: {icon: 'fa-database'}},
{label: 'random', type: 'number', p: {icon: 'fa-random'}},
],
rows: [
{c:[{v: 'Label 1'}, {v: 11}, {v: 6}, {v: 15}]},
{c:[{v: 'Label 2'}, {v: 8}, {v: null}, {v: 12}]},
{c:[{v: 'Label 3'}, {v: 6}, {v: 8}, {v: 18}]},
{c:[{v: 'Label 4'}, {v: null}, {v: 1}, {v: 16}]},
]
});
var options = {
bar: {
groupWidth: '50%',
width: 20
},
colors: ['#ffc107', '#d32f2f', '#00bcd4'],
height: 600,
legend: 'none',
title: 'Capacities',
width: 1000,
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
// initialize bounds variables
var axisLabels = container.getElementsByTagName('text');
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var containerBounds = container.getBoundingClientRect();
var labelIndex;
// add icons
for (var r = 0; r < data.getNumberOfRows(); r++) {
var barBounds;
var icon;
var iconBounds;
var labelBounds = chartLayout.getBoundingBox('hAxis#0#label#' + r);
for (var c = 1; c < data.getNumberOfColumns(); c++) {
barBounds = chartLayout.getBoundingBox('bar#' + (c - 1) + '#' + r);
if (barBounds !== null) {
icon = container.appendChild(document.createElement('i'));
icon.className = 'fa ' + data.getColumnProperty(c, 'icon');
icon.style.position = 'absolute';
iconBounds = icon.getBoundingClientRect();
icon.style.top = (containerBounds.top + labelBounds.top) + 'px';
icon.style.left = (barBounds.left + containerBounds.left + (barBounds.width / 2) - (iconBounds.width / 2)) + 'px';
}
}
// move axis label down
labelIndex = -1;
Array.prototype.forEach.call(axisLabels, function(label) {
if (label.getAttribute('text-anchor') === 'middle') {
labelIndex++;
if (labelIndex === r) {
label.setAttribute('y', (parseFloat(label.getAttribute('y')) + (iconBounds.height * 2)));
}
}
});
}
});
chart.draw(data, options);
});
i {
color: #00bcd4;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am playing around with Google Chart to look a certain way. In this situation I have a combo chart a line and column chart.
I have stumble upon a view "layout" problems
How do replace the show2r legend with just some custom text? At
the moment says: y = 2.032E-4 * x - 8.203 r^2 = 7.005E-3 and I want
to replace it with "Trendline (Lineair)
2/ Also the legend gets a
1/2 and Arrows left and right. I like the legend to always be
visible?
3/ The x axis doesn't display all dates, how can I set that
as a default?
4/ How do I add vertical line in say month June??
Regards
to change the trendline label in the legend, use option --> labelInLegend
there are no standard options to change the value in the tooltip,
but it can be changed manually using event --> onmouseover
when the legend's position is top,
you can use option --> legend.maxLines
to increase the number of lines available and prevent the arrows...
to ensure all dates are shown on the x-axis,
allow enough room by using option --> chartArea.bottom
see following working snippet for examples of each...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', 'y1'],
[new Date(2017, 11, 28), 175, 10],
[new Date(2017, 11, 29), 159, 20],
[new Date(2017, 11, 30), 126, 35],
[new Date(2017, 11, 31), 129, 40],
[new Date(2018, 0, 1), 108, 60],
[new Date(2018, 0, 2), 92, 70]
]);
var options = {
chartArea: {
bottom: 72
},
hAxis: {
slantedText: true
},
height: 400,
legend: {
maxLines: 2,
position: 'top'
},
tooltip: {
isHtml: true
},
trendlines: {
0: {
labelInLegend: '0-Linear Trend',
showR2: true,
type: 'linear',
visibleInLegend: true
},
1: {
labelInLegend: '1-Linear Trend',
showR2: true,
type: 'linear',
visibleInLegend: true
}
},
width: 400
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'onmouseover', function (props) {
var tooltipLabels = container.getElementsByTagName('span');
for (var i = 0; i < tooltipLabels.length; i++) {
if (tooltipLabels[i].innerHTML.indexOf('y =') > -1) {
tooltipLabels[i].innerHTML = 'CUSTOM TEXT:';
}
}
});
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am trying to format a cell in a google chart table as a percentage field.
For a column it works with :
var flow_format2 = new google.visualization.NumberFormat( {suffix: '%', negativeColor: 'red', negativeParens: true, fractionDigits: 0} );
But as far as I can read there is no possibility for a row, therefore I would like to do it on cell level - is that possible?
Is it with setProperty I need to do it and what is the formatting syntax.
you can use the formatValue method of NumberFormat to get the formatted string
rather than applying to the entire column
then you can manually setFormattedValue on the DataTable cell
to change the color, use setProperty to change the cell's 'style' property
the chart must be drawn afterwards
--or--
when the chart's 'ready' event fires, you can change the cell value using the DOM
the Table chart produces a normal set of html <table> tags
following is a working snippet, demonstrating both approaches...
google.charts.load('current', {
callback: function () {
var dataTable = new google.visualization.DataTable({
cols: [
{label: 'Name', type: 'string'},
{label: 'Amount', type: 'number'},
],
rows: [
{c:[{v: 'Adam'}, {v: -1201}]},
{c:[{v: 'Mike'}, {v: 2235}]},
{c:[{v: 'Stephen'}, {v: -5222}]},
{c:[{v: 'Victor'}, {v: 1288}]},
{c:[{v: 'Wes'}, {v: -6753}]}
]
});
var container = document.getElementById('chart_div');
var tableChart = new google.visualization.Table(container);
var patternFormat = {
suffix: '%',
negativeColor: '#FF0000',
negativeParens: true,
fractionDigits: 0
};
// create the formatter
var formatter = new google.visualization.NumberFormat(patternFormat);
// format cell - first row
dataTable.setFormattedValue(0, 1, formatter.formatValue(dataTable.getValue(0, 1)));
if (dataTable.getValue(0, 1) < 0) {
dataTable.setProperty(0, 1, 'style', 'color: ' + patternFormat.negativeColor + ';');
}
google.visualization.events.addOneTimeListener(tableChart, 'ready', function () {
// format cell via DOM - third row
var tableCell = container.getElementsByTagName('TR')[3].cells[1];
tableCell.innerHTML = formatter.formatValue(dataTable.getValue(2, 1));
if (dataTable.getValue(2, 1) < 0) {
tableCell.style.color = patternFormat.negativeColor;
}
});
tableChart.draw(dataTable, {
allowHtml: true
});
},
packages: ['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I am using Google Line Charts(Material) and want to specify the Y-Axis and X-Axis with fix intervals(increment of 1). Referring to the diagram, I want my Y-Axis values to be 1,2,3. I am unable to figure out what are the options to be set for the chart. Appreciate any help on this - Thanks
I think Material LineCharts don't yet support ticks.
But you can try insert in options - vAxis and try with changing value max:
var options = {
vAxis: {
viewWindow: {
max: 5
},
...
and call convertOptions:
chart.draw(data, google.charts.Line.convertOptions(options));
Like in this example on JSFiddle.
First of all, the Material Charts are still in beta and the material charts don't yet support many of the options supported by the
corecharts.
Regarding explicit setting ticks option, looks like it is not supported yet. If you want the material style (at least the fonts and colors) with the corecharts, you can add this:
option: { theme: 'material' }
Example
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addRows([
[1, 7.8],
[2, 3.9],
[3, 2.4],
[4, 1.7],
[5, 1.9],
[6, 8.8],
[7, 7.6],
[8, 2.3],
[9, 6.9],
[10, 2.8],
[11, 5.3],
[12, 6.6],
[13, 4.8],
[14, 4.2]
]);
var options = {
title: 'Box Office Earnings in First Two Weeks of Opening',
width: 900,
height: 500,
vAxis: {
viewWindow: {
min: 0,
max: 10
},
ticks: [0,1,2,3,4,5,6,7,8,9,10]
},
hAxis: {
viewWindow: {
min: 1,
max: 14
},
ticks: [1,2,3,4,5,6,7,8,9,10,11,12,13,14]
},
theme: 'material'
};
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="linechart_material"></div>