Adding a custom tooltip to a bubble chart / highchart - javascript

I am trying to customize the tooltip in a highcharts bubble chart. Rather than having just the figures appear in the tooltip, I'd like to add context based on the x,y and z titles (ex, "50 fatalities, 100 injured, 150 total victims" instead of the current "(50,150) Size: 150" display). I'm able to make this happen in scatter plot charts using the following, but no dice in bubbles. Any ideas? Thanks. :)
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} fatalities, {point.y} injured, {point.z} total'
}


Hope I understand your question correctly, is this what you are looking for.
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy'
},
plotOptions: {
bubble: {
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} fatalities, {point.y} injured, {point.z} total'
}
}
},
title: {
text: 'Highcharts Bubbles'
},
series: [{
data: [
[97, 36, 79],
[94, 74, 60],
[68, 76, 58],
[64, 87, 56],
[68, 27, 73],
[74, 99, 42],
[7, 93, 87],
[51, 69, 40],
[38, 23, 33],
[57, 86, 31]
]
}, {
data: [
[25, 10, 87],
[2, 75, 59],
[11, 54, 8],
[86, 55, 93],
[5, 3, 58],
[90, 63, 44],
[91, 33, 17],
[97, 3, 56],
[15, 67, 48],
[54, 25, 81]
]
}, {
data: [
[47, 47, 21],
[20, 12, 4],
[6, 76, 91],
[38, 30, 60],
[57, 98, 64],
[61, 17, 80],
[83, 60, 13],
[67, 78, 75],
[64, 12, 10],
[30, 77, 82]
]
}]
});
});
DEMO


You should use tooltip formatter http://api.highcharts.com/highstock#tooltip.formatter
EDIT:
http://jsfiddle.net/7nqB5/

Related

hAxis title text position in Google line chart

An example is here: https://jsfiddle.net/beo4qjsg/1/
It's essentially the same code used for "Multiple line types" example in Google Charts documentation, with one change. Specifically, I have the following in options:
var options = {
width: 1000, height: 850,
chartArea: {left:75, top:75, height:450, width:550},
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
The output image looks like this:
As can be seen here, the title for X-axis "Time" is quite far from the axis itself. Is there any way to bring it closer? It is important that I keep the chartArea.height set to a specific value, so that's something I cannot change.

in the option for chartArea, add an option for bottom
chartArea: {left:75, top:75, width:550, bottom: 40, height: '100%'},
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'line']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
width: 1000, height: 850,
chartArea: {left:75, top:75, width:550, bottom: 40, height: '100%'},
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Why does the chartArea configuration option hide hAxis ticks?

I'm a beginner in the Apps Script environment.
While testing to learn about methods and configuration options, I came across a problem for which I couldn't find a solution.
After changing the chartArea option, depending on the value, the hAxis ticks disappear.
As an example taken directly from the google guide page, I have this snippet:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
If I modify the given example, including the following configuration: chartArea: {left: 70, width:'90%', height:'90%'}, the hAxis ticks just disappear, as we can see in the next snippet.
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time'
},
chartArea: {left: 70, width:'90%', height:'90%'},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Depending on the value of the height parameter, the ticks appear again and I couldn't understand why increasing the graph area implies omitting the hAxis ticks.
Can someone help me?
Thanks.

Default chartArea.height = 200
Default height = chartArea.height = 200
chartArea.height: 90% -> 180
200- 180 = 20px is not enough for the hAxis that it is out of the display region.
You should reduce chartArea.height or increase height.

Rotate an entire Google chart

I wanted to show my graph but in a vertical way not horizontal like show on the following image and also hide the legend if possible.
Thanks in advance for your help.
Charts horizontal to vertical
Symmetry of the rotation
google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
hAxis: {
textPosition:"none"
},
vAxis: {
textPosition:"none"
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'))
chart.draw(data, options);
}

use chart options...
orientation: 'vertical'
and...
legend.position: 'none'
see the following working snippet...
it also demonstrates increasing the size of the chartArea to fill the container
which the chart will not do by default...
chartArea: {
top: 6,
right: 6,
bottom: 6,
left: 6,
height: '100%',
width: '100%'
},
google.charts.load('current', {
callback: drawBasic,
packages:['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
chartArea: {
top: 6,
right: 6,
bottom: 6,
left: 6,
height: '100%',
width: '100%'
},
hAxis: {
textPosition: 'none'
},
height: 800,
legend: {
position: 'none'
},
orientation: 'vertical',
vAxis: {
textPosition: 'none'
},
width: 200
};
var chart0 = new google.visualization.LineChart(document.getElementById('chart_div0'));
chart0.draw(data, options);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
calc: function (dt, row) {
return {
v: dt.getValue(row, 1) * -1,
f: dt.getFormattedValue(row, 1),
};
},
label: data.getColumnLabel(1),
type: data.getColumnType(1)
}]);
var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(view, options);
}
div {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>
<div id="chart_div1"></div>

you can achieve this with css (and add legend: {position: 'none'} in the options to hide the legend)
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
hAxis: {
textPosition:"none"
},
vAxis: {
textPosition:"none"
},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'))
chart.draw(data, options);
}
#chart_div{
transform-origin: 80% 50%;
transform:rotate(-90deg);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Highcharts age stacking

I want to make a stacked column chart with age intervals.
I have a two-dimensional array containing an age key and a value.
The idea is: every single age is stacked on top of each other within their interval, and thereby represent the accumulated number of people within the age interval in a single column.
I want to approach this solution with highcharts' stacked column chart example.
This is my code so far:
// Age stacked column chart.
var ageData = [
[0, 0], [1, 0], [2, 0], [3, 0], [4, 0], [5, 0], [6, 0], [7, 0], [8, 4], [9, 3],
[10, 24], [11, 33], [12, 31], [13, 21], [14, 61], [15, 42], [16, 43], [17, 87], [18, 64], [19, 120],
[20, 134], [21, 142], [22, 184], [23, 221], [24, 234], [25, 211], [26, 198], [27, 94], [28, 79], [29, 34],
[30, 24], [31, 27], [32, 32], [33, 21], [34, 4], [35, 7], [36, 11], [37, 5], [38, 3], [39, 6],
[40, 3], [41, 4], [42, 13], [43, 6], [44, 4], [45, 3], [46, 1], [47, 2], [48, 2], [49, 0],
[50, 0], [51, 34]]
$('#container_stackedColumn').highcharts({
chart: {
type: 'column'
},
title: {
text: 'User age distribution'
},
xAxis: {
categories: [
'0-12',
'13-18',
'19-23',
'24-28',
'29-35',
'36-42',
'43-50',
'>50'
]
},
yAxis: {
min: 0,
title: {
text: 'Number of users'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black, 0 0 3px black'
}
}
}
},
series: [{ /* --- What to do here?! --- */ }]
});
So, with my two-dimensional array in consideration, how do I visualize this stacked column chart?
Any help is greatly appreciated. :)

You need to itearate on you arrays, compare with the limits which you have (categories) and push to correct series array.
See the parser (http://jsfiddle.net/W6AFY/3/) hope that it is correct.

Or another solution, using different series for each part of bar: http://jsfiddle.net/s9qHH/48/
var ranges = [12, 18, 23, 28, 35, 42, 50, 1000],
rangesLen = ranges.length,
series = [];
$.each(ranges, function(i, e){
series.push({ //create series' containers for legend
id: e+'index',
name: e
});
});
$.each(ageData, function(i, e){
var x = e[0],
y = e[1],
index = 0;
while(ranges[index] < x){ // get category index
index ++;
}
series.push({
showInLegend: false,
linkedTo: ranges[index] +'index', // link to container series
data: [ [index, y] ] //add point at specific category
})
});
Still, I think that's Sebastian's solution is faster.

How to remove double grid lines and force y to the origin

First as you can see in the image, the Y-axis gridlines are double. Is there any way to remove them from either the y1 or y2 axis?
Second question how to force the Y axis to start at 0? I tried this:
chart.bars1.forceY([0]);
chart.lines1.forceY([0]);
But that did not work, any thoughts on the issues?
Javascript code
var data = graphData();
nv.addGraph(function() {
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.color(d3.scale.category10().range());
chart.xAxis.tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d].x || 0;
return d3.time.format('%x')(new Date(d))
});
chart.yAxis1
.tickFormat(d3.format(',.f'));
chart.yAxis2
.tickFormat(d3.format(',.f'));
d3.select('#chart svg')
.datum(data)
.transition().duration(500).call(chart);
return chart;
});
function graphData() {
return <? echo json_encode($graph, JSON_NUMERIC_CHECK) ?>
.map(function(series) {
series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
return series;
});
}
The result
The data
[{
"key" : "Tweets",
"type" : "bar",
"yAxis" : 1,
"values" : [[1380499200000, 41], [1380585600000, 220], [1380672000000, 270], [1380758400000, 195], [1380844800000, 160], [1380931200000, 202], [1381017600000, 194], [1381104000000, 177], [1381190400000, 155], [1381276800000, 219], [1381363200000, 203], [1381449600000, 193], [1381536000000, 252], [1381622400000, 134], [1381708800000, 238], [1381795200000, 233], [1381881600000, 271], [1381968000000, 336], [1382054400000, 257], [1382140800000, 241], [1382227200000, 126], [1382313600000, 159], [1382400000000, 180], [1382486400000, 293], [1382572800000, 212], [1382659200000, 187], [1382745600000, 181]]
}, {
"key" : "Retweets",
"type" : "bar",
"yAxis" : 1,
"values" : [[1380499200000, 16], [1380585600000, 70], [1380672000000, 101], [1380758400000, 66], [1380844800000, 61], [1380931200000, 92], [1381017600000, 73], [1381104000000, 70], [1381190400000, 50], [1381276800000, 84], [1381363200000, 76], [1381449600000, 89], [1381536000000, 118], [1381622400000, 55], [1381708800000, 81], [1381795200000, 76], [1381881600000, 82], [1381968000000, 132], [1382054400000, 85], [1382140800000, 104], [1382227200000, 48], [1382313600000, 55], [1382400000000, 59], [1382486400000, 106], [1382572800000, 73], [1382659200000, 78], [1382745600000, 78]]
}, {
"key" : "Replies",
"type" : "bar",
"yAxis" : 1,
"values" : [[1380499200000, 7], [1380585600000, 33], [1380672000000, 47], [1380758400000, 29], [1380844800000, 19], [1380931200000, 29], [1381017600000, 30], [1381104000000, 25], [1381190400000, 25], [1381276800000, 33], [1381363200000, 26], [1381449600000, 22], [1381536000000, 33], [1381622400000, 15], [1381708800000, 26], [1381795200000, 19], [1381881600000, 33], [1381968000000, 46], [1382054400000, 37], [1382140800000, 36], [1382227200000, 21], [1382313600000, 32], [1382400000000, 27], [1382486400000, 43], [1382572800000, 19], [1382659200000, 19], [1382745600000, 17]]
}, {
"key" : "Cumulatief",
"type" : "line",
"yAxis" : 2,
"values" : [[1380499200000, 41], [1380585600000, 261], [1380672000000, 531], [1380758400000, 726], [1380844800000, 886], [1380931200000, 1088], [1381017600000, 1282], [1381104000000, 1459], [1381190400000, 1614], [1381276800000, 1833], [1381363200000, 2036], [1381449600000, 2229], [1381536000000, 2481], [1381622400000, 2615], [1381708800000, 2853], [1381795200000, 3086], [1381881600000, 3357], [1381968000000, 3693], [1382054400000, 3950], [1382140800000, 4191], [1382227200000, 4317], [1382313600000, 4476], [1382400000000, 4656], [1382486400000, 4949], [1382572800000, 5161], [1382659200000, 5348], [1382745600000, 5529]]
}
]

That pull request resolves your problem, and other problems like hiding line graph on multichart as well.
https://github.com/novus/nvd3/pull/379

Categories