Can we show a different graph say pie chart in the tooltip hover in the bar chart using nvd3?
Here is one sample which is doing the job. The logic behind this approach is the following:
Disable the default tooltip
Prepare helper chart(donut chart in the example) which is going to be used as a tooltip
In the callback of the main chart (bar chart) register event listeners on the bar elements
mousemove - to show and position the custom donut chart tooltip
mouseleave - to hide the tooltip
var donutContainer = document.getElementById('donut-chart');
var chartDonut;
var chartBar;
nv.addGraph(function() {
chartBar = nv.models.discreteBarChart()
.x(d => d.label)
.y(d => d.value)
.margin({left: 80})
.showValues(true)
.duration(250);
// Disable the default tooltip
chartBar.tooltip.enabled(false);
d3.select('#main-chart svg')
.datum(historicalBarChart)
.call(chartBar);
nv.utils.windowResize(chartBar.update);
return chartBar;
}, () => {
// After the chart is loaded register some listeners
// to determine when to show/hide the custom tooltip chart
var bars = d3.selectAll('.nv-bar');
bars.on('mousemove', function(bar) {
// When the mouse is moved across bar
// show the tooltip chart and update tooltip position
d3.select('#donut-chart svg')
.datum(bar.details)
.call(chartDonut);
nv.utils.windowResize(chartDonut.update);
var e = window.event;
donutContainer.style.display = 'block';
donutContainer.style.left = e.clientX + "px";
donutContainer.style.top = e.clientY - 50 + "px";
});
// When the mouse leaves a bar then hide the tooltip
bars.on('mouseleave', e => donutContainer.style.display = 'none');
});
// Prepare the donut chart for the tooltip
nv.addGraph(function() {
// Note here that duration(0) is used. This is done
// because when you move the cursor between bars with different
// child group count( e.g. OS and Shoes) error is thrown
chartDonut = nv.models.pieChart()
.x(d => d.name)
.y(d => d.value)
.width(150)
.height(150)
.donut(true)
.duration(0)
.showLegend(false);
chartDonut.tooltip.enabled(false);
return chartDonut;
});
// Sample data
const historicalBarChart = [{
key: 'Cumulative Return',
values: [{
label: 'Cars',
value: 1500000,
details: [{
name: 'Audi',
value: 500000
}, {
name: 'Mercedes',
value: 700000
}, {
name: 'Ford',
value: 300000
}]
}, {
label: 'Mobile',
value: 1000000,
details: [{
name: 'iPhone',
value: 500000
}, {
name: 'Samsung',
value: 410000
}, {
name: 'Lenovo',
value: 90000
}]
}, {
label: 'OS',
value: 1500000,
details: [{
name: 'OSX',
value: 500000
}, {
name: 'Windows',
value: 500000
}, {
name: 'Linux',
value: 500000
}]
}, {
label: 'Shoes',
value: 1400000,
details: [{
name: 'Addidas',
value: 500000
}, {
name: 'Nike',
value: 500000
}, {
name: 'Puma',
value: 100000
}, {
name: 'Something',
value: 300000
}]
}]
}];
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html,
body,
#main-chart,
svg {
height: 100%;
width: 400px;
}
#donut-chart {
position: absolute;
height: 150px;
width: 150px;
background-color: white;
z-index: 1;
pointer-events: none;
display: none;
border: 1px solid black;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.js"></script>
<div id="main-chart"> <svg></svg></div>
<div id="donut-chart"><svg></svg></div>
Related
I would like to simply show/hide the labels of the edges of my vis.js-network - is this possible?
I have tried to update the edges in the vis.js-data structure:
Delete the label property - doesn't work
Set the label to undefined - doesn't work
Set the label to '' - doesn't work
Set the label to ' ' - works
I would prefer a network-wise toggle of some kind, but I haven't found one.
Is there a better way of doing this?
An alternative to updating the label property on each edge is to change the font color to be transparent for all edges. The setOptions() method can be used to update the options and will apply all edges in the network. The options edges.font.color and edges.font.strokeColor should both be updated, then returned to their original values to display the edges.
Example below and also at https://jsfiddle.net/rk9s87ud/.
var nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);
var edges = new vis.DataSet([
{ from: 1, to: 2, label: 'Edge 1' },
{ from: 2, to: 3, label: 'Edge 2' },
{ from: 3, to: 4, label: 'Edge 3' },
{ from: 4, to: 5, label: 'Edge 4' },
]);
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = {
nodes: {
// Set any other options, for example node color to gold
color: 'gold'
},
edges: {
font: {
// Set to the default colors as per the documentation
color: '#343434',
strokeColor: '#ffffff'
}
}
}
var hiddenEdgeTextOptions = {
edges: {
font: {
// Set the colors to transparent
color: 'transparent',
strokeColor: 'transparent'
}
}
};
var network = new vis.Network(container, data, options);
var displayLabels = true;
document.getElementById('toggleLabels').onclick = function() {
if(displayLabels){
// Apply options for hidden edge text
// This will override the existing options for text color
// This does not clear other options (e.g. node.color)
network.setOptions(hiddenEdgeTextOptions);
displayLabels = false;
} else {
// Apply standard options
network.setOptions(options);
displayLabels = true;
}
}
#mynetwork {
width: 600px;
height: 160px;
border: 1px solid lightgray;
}
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<button id="toggleLabels">Toggle labels</button>
<div id="mynetwork"></div>
I'm using c3 js for generating categories bar chart
Here is code
var obj = {
size: {
height: 200,
},
bindto: '#grBarChart',
data: {
columns: data.columns,
type: "bar"
},
color: {
pattern: ['#c90000', '#008cba', '#FAAC3D','#427322', '#9ead9b', '#ffa500']
},
axis: {
x: {
type: 'category',
categories: data.categories,
label: {
text: 'Scanned Groups',
position: 'outer-center'
}
},
y: {
label: {
text: 'Count (Rules)',
position: 'outer-middle'
}
}
},
bar: {
width: {
ratio: 0.5,
}
},
grid: {
y: {
show: true
}
}
};
var chart = c3.generate(obj);
This code is generating the following graph
Now my problem is I'm not able to add click event on X Axis Category Names ( Logging 11, Data Protection 13 ...)
I referred C3 Documentation but not able to solve my problem.
Please give me your thought?
I have created a bar graph using the echarts library. How can I highlight the bar graph when the user clicks on a bar, or else apply the bar border when a bar is clicked?
Is there a way to highlight a bar when the click event is triggered for the bar?
Yes, there is a way to highlight a bar when click.
When the click event is triggered, you can get the exactly data(single bar) be clicked from the parameter, then you only need to change color(For example, decrease alpha) of this data to achieve the 'highlight' goal.
And don't forget recovery color of other data(not clicked) at same time.
check this demo
let echartsObj = echarts.init(document.querySelector('#canvas'));
option = {
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [{
value: 10,
itemStyle: {
color: 'hsl(200,60%,45%)'
}
}, {
value: 52,
itemStyle: {
color: 'hsl(200,60%,45%)'
}
}, {
value: 200,
itemStyle: {
color: 'hsl(60,60%,45%)'
}
}, {
value: 334,
itemStyle: {
color: 'hsl(150,60%,45%)'
}
}, {
value: 390,
itemStyle: {
color: 'hsl(220,60%,45%)'
}
}, {
value: 330,
itemStyle: {
color: 'hsl(200,60%,45%)'
}
}, {
value: 220,
itemStyle: {
color: 'hsl(150,60%,45%)'
}
}]
}]
};
echartsObj.setOption(option)
echartsObj.on('click', function(params) {
console.log(params)
option.series[0].data.forEach((data, index) => {
if (index === params.dataIndex) {
if (!data.isChecked) {
data.itemStyle.color = getHighLightColor(data.itemStyle.color);
data.isChecked = true;
}
} else {
if (data.isChecked) {
data.itemStyle.color = getOrigColor(data.itemStyle.color);
data.isChecked = false;
}
}
})
echartsObj.setOption(option)
});
function getHighLightColor(color) {
return color.replace(/(\d+)%\)/, (...args) => {
return 20 + Number(args[1]) + '%)'
});
}
function getOrigColor(highlightColor) {
return highlightColor.replace(/(\d+)%\)/, (...args) => {
return Number(args[1]) - 20 + '%)'
});
}
<html>
<header>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script>
</header>
<body>
<div id="canvas" style="width: 100%; height: 200px">
</div>
</body>
</html>
Can be highlight like this:
chart.on('click', (params) => {
chart.dispatchAction({
type: 'highlight',
seriesIndex: params.seriesIndex,
dataIndex: params.dataIndex
})
})
The highlight style can be set using emphasis.itemStyle
The document can be found here: https://echarts.apache.org/en/api.html#action.highlight
I have a structure of chart like this:-
data: {
cols: [
{
id: 'Type',
type: 'string'
},
{
id: 'percentage',
type: 'number'
},
{
id: 'tooltip',
role: 'tooltip',
type: 'string',
p: { html: true }
}
],
rows: [
{
c: [
{
v: typeA
},
{
v: 20
},
{
v: 'my Tooltip content'
}
]
},
{
c: [
{
v: 'typeB'
},
{
v: 80
}
]
}
]
},
I want to disable the tooptip only for typeB and but should work with typeA. Is this possible in google charts? (tooptip trigger:none option disable it for whole chart)
when using custom tooltips, if the tooltip column is null or ''
the chart will replace with the default tooltip
to avoid, provide a custom tooltip that is hidden with css
see following working snippet...
google.charts.load('current', {
callback: function () {
var data = google.visualization.arrayToDataTable([
['Type', 'Percent'],
['typeA', 20],
['typeB', 80]
]);
// add tooltip column
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
// build tooltip
for (var i = 0; i < data.getNumberOfRows(); i++) {
switch (data.getValue(i, 0)) {
// set visible tooltip
case 'typeA':
data.setValue(i, 2,
'<div class="ggl-tooltip"><div><span>' +
data.getValue(i, 0) + '</span></div><div>' +
data.getValue(i, 1) + '</div></div>'
);
break;
// set hidden tooltip
case 'typeB':
data.setValue(i, 2, '<div class="hdn-tooltip"><div>');
break;
}
}
var container = document.getElementById('chart_div');
var pieChart = new google.visualization.PieChart(container);
pieChart.draw(data, {
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.hdn-tooltip {
display: none;
visibility: hidden;
}
.ggl-tooltip {
border: 1px solid #E0E0E0;
font-family: Arial, Helvetica;
font-size: 10pt;
padding: 12px 12px 12px 12px;
}
.ggl-tooltip div {
padding-top: 6px;
}
.ggl-tooltip span {
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I'm using angular-nvd3 directive for making a custom line chart display counting number of guest in specific period time range as follow :
current Time - 2 --> current Time : will be display as straight line
current Time --> current Time + 2 : will be display as dotted line .
Here is my implementation code with only straight line:
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'lineChart',
tooltips: false,
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 55
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
useInteractiveGuideline: false,
dispatch: {
stateChange: function(e){ console.log("stateChange"); },
changeState: function(e){ console.log("changeState"); },
tooltipShow: function(e){ console.log("tooltipShow"); },
tooltipHide: function(e){ console.log("tooltipHide"); }
},
xAxis: {
axisLabel: 'Time (ms)'
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: 30
},
callback: function(chart){
console.log("!!! lineChart callback !!!");
}
},
title: {
enable: true,
text: 'Title for Line Chart'
}
};
$scope.data = sinAndCos();
/*Random Data Generator */
function sinAndCos() {
var sin = [],sin2 = [],
cos = [];
//Data is represented as an array of {x,y} pairs.
for (var i = 0; i < 100; i++) {
sin.push({x: i, y: Math.sin(i/10)});
sin2.push({x: i, y: i % 10 == 5 ? null : Math.sin(i/10) *0.25 + 0.5});
cos.push({x: i, y: .5 * Math.cos(i/10+ 2) + Math.random() / 10});
}
//Line chart data should be sent as an array of series objects.
return [
{
values: [{x:7,y:100},{x:8,y:40},{x:9,y:70}],
key: 'Sine Wave', //key - the name of the series.
color: '#ff7f0e', //color - optional: choose your own line color.
strokeWidth: 2
},
{
values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
key: 'Cosine Wave',
color: '#2ca02c'
},
{
values: [{x:7,y:300},{x:8,y:240},{x:9,y:270},{x:10,y:220},{x:11,y:280}],
key: 'Another sine wave',
color: '#7777ff'
}
];
};
});
Here is the plunker for this : http://plnkr.co/edit/lBKFld?p=preview
Anyone can provide some help that would get my great appreciate.
Thanks
{
values: [{x:7,y:200},{x:8,y:140},{x:9,y:170},{x:10,y:120},{x:11,y:180}],
key: 'Cosine Wave',
color: '#2ca02c',
classed: 'dashed' // <-- Now use CSS to make the line dashed
}
STYLE!!!
.dashed {
stroke-dasharray: 5,5;
}