can we use tool-tip and annotations both in same chart in google bar chart? please share your experiences. thanks
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
fontWeight: 'bold',
format: 'short',
},
alwaysOutside: true
},
tooltip: {
isHtml: true,
trigger: 'selection'
},
yes, you can use both tooltips and annotations in same chart
to do so, you use both annotation & tooltip column roles
in the data table, or data view, add the role after each data column it represents
data table
X, Y, annotation role, tooltip role
in the following example, a data view is used, so the tooltip can be built dynamically
in order to have html tooltips, two things must by in place.
the chart options must include...
tooltip: {
isHtml: true
}
and the column role must include a property...
p: {html: true}
however, there is a bug in google charts,
column properties are ignored when using a data view,
so we convert the data view to a data table when drawing...
chart.draw(view.toDataTable(), options); // <-- convert to data table
see following working snippet...
google.charts.load('current', {
packages:['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Element", "Density"],
["Copper", 8.94],
["Silver", 10.49],
["Gold", 19.30],
["Platinum", 21.45]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}, {
type: 'string',
role: 'tooltip',
calc: function (dt, row) {
return '<div class="ggl-tooltip"><div><span>' + dt.getValue(row, 0) + '</span></div><div>' + dt.getColumnLabel(1) + ': <span>' + dt.getValue(row, 1) + '</span></div>';
},
p: {html: true}
}]);
var options = {
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
fontWeight: 'bold',
},
alwaysOutside: true
},
tooltip: {
isHtml: true,
trigger: 'selection'
}
};
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(view.toDataTable(), options);
});
.ggl-tooltip {
background-color: #ffffff;
border: 1px solid #e0e0e0;
font-family: Arial, Helvetica;
font-size: 14px;
padding: 8px;
}
.ggl-tooltip div {
margin-top: 6px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>
Related
I'm using a Google Charts API Area Chart to display a simple Google Spreadsheet: Column 0 stores dates and Column 1 values. Actually the chart is displaying all values in annotation by default. But I only want to display the min and max value of column 1 in annotation.
I can't find the solution for my problem and maybe you can help me with my sourcecode.
Thanks Mags
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
function initialize() {
var opts = {sendMethod: 'auto'};
var query = new google.visualization.Query('https://docs.google.com/spreadsheets/MYSPREADSHEET', opts);
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: 'stringify'
}]);
var options = {
title: '',
curveType: 'function',
legend: {position: 'none'},
lineWidth: 4,
backgroundColor: '#2E4151',
colors:['white'],
fontSize: '26',
fontName: 'Open Sans',
animation:{
"startup": true,
duration: 800,
easing: 'inAndOut',
},
hAxis: {
gridlines: {color: 'transparent', count: 4},
textStyle: {color: '#FFF'}
},
vAxis: {
gridlines: {color: 'white', count: 5},
viewWindow: {min: 87, max: 101},
textStyle: {
color: '#FFF',
fontSize: 18
},
},
trendlines: {
0: {
type: 'polynomial',
color: 'yellow',
lineWidth: 5,
opacity: 0.7,
showR2: true,
visibleInLegend: true
}
}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="chart_div" style="width:100%; height:100%"></div>
</body>
</html>
you can use data table method --> getColumnRange(columnIndex)
this will return an object with the min & max values of the column.
then you can use the calc function on the data view,
to determine if the value matches either the min or max,
and return the formatted value for the annotation.
return null if it does not, see following snippet...
var data = response.getDataTable();
var range = data.getColumnRange(1);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: 'string',
role: 'annotation',
sourceColumn: 1,
calc: function (dt, row) {
var value = dt.getValue(row, 1);
if ((value === range.min) || (value === range.max)) {
return dt.getFormattedValue(row, 1);
}
return null;
}
}]);
I want to create chart like that in highcharts:
IOT Central Chart
this is what i get until now:
Highcharts.setOptions({
colors: ['#3399CF', '#F9BA06', '#65AF35', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
// Get the data. The contents of the data file can be viewed at
$.getJSON(
'https://cdn.rawgit.com/highcharts/highcharts/057b672172ccc6c08fe7dbb27fc17ebca3f5b770/samples/data/activity.json',
function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data.splice(1, 10), function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
type: "spline",
marginLeft: 40, // Keep all charts left aligned
marginTop: 7,
marginBottom: 7
},
title: {
text: null,
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
visible: false,
labels: {
format: '{value} km'
}
},
yAxis: {
visible: true,
title: {
text: null
},
tickAmount: 2,
minPadding: 0,
lineWidth:1,
gridLineColor: "transparent"
},
series: [{
data: dataset.data,
name: dataset.name,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
}
);
.chart {
min-width: 320px;
max-width: 800px;
height: 150px;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
but the problem is that i cant export or zoom do normal legend to this chart.
The problem here is that you create three separate charts instead of one.
Highstock allows you to position and resize axes (height & top properties):
yAxis: [{
height: '50%'
}, {
top: '50%',
height: '50%'
}],
API references:
https://api.highcharts.com/highstock/yAxis.height
https://api.highcharts.com/highstock/yAxis.top
In fact it's going to work in Highcharts too (even though it's not documented).
Live demo: http://jsfiddle.net/BlackLabel/gb3jhq75/
I am using ChartJS and need a chart like this: https://tppr.me/OE08p
Meaning it should ignore 4 of the labels (flexibility, external, stability, internal) and connect the dots from the other 4 labels (like the red lines show on the screenshot).
Can I ignore these 4 labels data-wise somehow, but keep them?
Other chart packages/solutions are welcome, if it is not possible in chartjs.
You can use highchart.js library, see:
docs: https://www.highcharts.com/docs/chart-and-series-types/polar-chart
example: https://www.highcharts.com/demo/polar-spider
with these options:
plotOptions: {
series: {
connectNulls: true
}
}
and filtering data with map function like below (just for example):
data.map(filter)
<omissis>
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
here is a jsfiddle showing this approach: http://jsfiddle.net/beaver71/w6ozog1c/
or a snippet here:
// original data
var data1 = [43000, 19000, 60000, 35000, 17000, 10000],
data2 = [50000, 39000, 42000, 31000, 26000, 14000];
var chart = Highcharts.chart('container', {
chart: {
polar: true,
type: 'line'
},
title: {
text: 'Budget vs spending',
x: -80
},
pane: {
size: '80%'
},
xAxis: {
categories: ['Sales', 'Marketing', 'Development', 'Customer Support',
'Information Technology', 'Administration'],
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
tooltip: {
shared: true,
pointFormat: '<span style="color:{series.color}">{series.name}: <b>${point.y:,.0f}</b><br/>'
},
legend: {
align: 'right',
verticalAlign: 'top',
y: 70,
layout: 'vertical'
},
series: [{
name: 'Allocated Budget',
data: data1.map(filter), // filtered data
pointPlacement: 'on',
color: 'red'
}, {
name: 'Actual Spending',
data: data2,
pointPlacement: 'on',
color: 'green'
}],
plotOptions: {
series: {
lineWidth: 2,
connectNulls: true // connects also null value (bypassing)
}
}
});
var filterOn = true;
$('#button').click(function () {
filterOn = !filterOn;
if (filterOn)
chart.series[0].setData(data1.map(filter));
else
chart.series[0].setData(data1);
});
// filter function with your criteria
function filter(item, index) {
if (index==2)
return null;
else
return item;
}
.highcharts-grid-line {
stroke-width: 2;
}
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<button id="button">Toggle filter (ignoring a point in red serie)</button>
<div id="container" style="min-width: 400px; max-width: 600px; height: 400px; margin: 0 auto"></div>
My google bar chart options variable is:
var Baroptions = {
legend: {position: 'none'},
hAxis: {
textPosition: 'none',
gridlines: {
color: "#FFFFFF"
},
baselineColor: '#FFFFFF'
},
bars: 'horizontal',
animation:{
duration: 500,
easing: 'out',
}
};
But axis line and text are still being displayed.
I need to remove that 0 and 50k text.
Regards
instead of --> textPosition: 'none'
try...
textStyle: {
color: "#FFFFFF"
},
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['bar']
});
function drawChart() {
var chart = new google.charts.Bar(document.getElementById('chart_div'));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', '');
dataTable.addColumn('number', 'Value');
dataTable.addRows([
['18-25', 25],
['26-35', 46],
['36-45', 30],
['46-55', 10],
['55 Above', 7]
]);
var Baroptions = {
legend: {position: 'none'},
hAxis: {
textStyle: {
color: "#FFFFFF"
},
gridlines: {
color: "#FFFFFF"
},
baselineColor: '#FFFFFF'
},
bars: 'horizontal'
};
chart.draw(dataTable, google.charts.Bar.convertOptions(Baroptions));
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
also, not sure from the question, but if using a material chart as in the above example
animation.* is among the several options that don't work on material charts
I've Google combo chart and like to add a Tooltip. The icCube documention has an example how to add a HTML tooltip but this will not work for series, only the last item in the serie gets the tooltip. I found an answer how to do this, see this post.
But how can I achieve this in icCube?
for google charts, you can reference the Data Format of the specific chart
for most, the tooltip follows the series column
to have multiple series, each with it's own custom html tooltip,
add a column after each series column
NOTE: for custom html tooltips to work, the following must be in place...
the column must have property --> html: true
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
and the configuration options must include...
tooltip: {isHtml: true}
see following working snippet, the tooltip columns are loaded initially as null
then the tooltip is built based on the values in the series columns
google.charts.load('current', {
callback: function () {
var container = document.getElementById('chart_div');
var chart = new google.visualization.ComboChart(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', label: 'Year'});
// series 0
dataTable.addColumn({type: 'number', label: 'Category A'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// series 1
dataTable.addColumn({type: 'number', label: 'Category B'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// series 2
dataTable.addColumn({type: 'number', label: 'Category C'});
dataTable.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
dataTable.addRows([
['2014', 1000, null, 2000, null, 3000, null],
['2015', 2000, null, 4000, null, 6000, null],
['2016', 3000, null, 6000, null, 9000, null],
]);
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
dataTable.setValue(i, 2, getTooltip(i, 1));
dataTable.setValue(i, 4, getTooltip(i, 3));
dataTable.setValue(i, 6, getTooltip(i, 5));
}
function getTooltip(rowIndex, columnIndex) {
return '<div class="ggl-tooltip"><span>' +
dataTable.getValue(rowIndex, 0) + ': </span>' +
dataTable.getFormattedValue(rowIndex, columnIndex) + '</div>';
}
chart.draw(dataTable, {
legend: {
position: 'bottom'
},
pointSize: 4,
seriesType: 'area',
series: {
2: {
pointSize: 12,
pointShape: {
type: 'star',
sides: 5,
dent: 0.6
},
type: 'scatter'
}
},
tooltip: {isHtml: true}
});
},
packages: ['corechart']
});
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>