I am using nvd3 bubble chart. I want to hide the bubble which contains size:0;
I have two data :-
var data = [];
data.push({key: 'Male(Yes)', values: []});
data['0'].values.push({
x: 1
, y: 1
, size: 0
});
data.push({key: 'Male(No)', values: []});
data['1'].values.push({
x: -1
, y: -1
, size: 20
});
I don't want to show bubble which has size:0;.
How can i hide the bubble?
You can do that by applying a CSS style (visibility:hidden/display:none/opacity:0) to the individual data point. One way of doing this is to select all svg objects of the type point - depending on your names used and then filter them according to size, then apply the new style to them.
svg.selectAll("#yourname svg")
.filter(function (l) {
return l.size== 0;
})[0].forEach(function (d){
d.style("visibility","hidden")
})
Related
I am using LightningChartJs and I'm adding a UIElement textbox I would like to place this above the lineseries but when I give the scale of the lineseries to the addUIElement it does not show up.
chart.addUIElement(UIElementBuilders.TextBox,myseries.scale).setText('test')
When you use a scale of another series, then the positioning for the UIElement is done using the coordinates of the series. By default the UIElement will be positioned to 0,0 coordinate. If your line series doesn't show this coordinate then the UIElement will be out of view.
So if you have a line from 10,10 to 20,20 and you don't set the position of the UIElement, then you most likely will not see the UIElement as it's positioned to 0,0 position. You should in that case set the position of the UIElement to something in the range of 10,10-20,20. uiElement.setPosition({x: 12, y:12 })
See the code snippet below for a working example.
const {
lightningChart,
UIElementBuilders
} = lcjs
const chart = lightningChart().ChartXY()
const series = chart.addLineSeries()
series.addArrayY([1, 2, 1, 3, 2, 2, 3, 2, 1])
// add text box on the chart, using series scale
const textOverLine = chart.addUIElement(UIElementBuilders.TextBox, series.scale)
.setText('My Text')
// position the text, this is in the line series coordinates
.setPosition({ x: 4.5, y: 2.1 })
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
I would like to hide certain data points on click event of my grid. How can I achieve this ?
I have series with circle, triangle and square shape and would like to hide series using separate grid showing these symbols.
You can dispose and restore series as long as you have reference to them.
// Use PointSeries with Triangle shaped points as example and cache it.
const triangleSeries = chart.addPointSeries( { pointShape: PointShape.Triangle } )
// Add a checkbox to the chart for this example
const button = chart.addUIElement( UIElementBuilders.CheckBox )
// Set up the checkbox
button.setText('Click to hide/show series')
.setPosition( {x: 95, y: 95 } )
// Define the behavior when the button is clicked (changing its state)
.onSwitch( (_, state) => {
// The checkbox is in 'on' state, so restore series.
if (state)
// Restore the series to the chart, so it'll show in the chart again.
triangleSeries.restore()
else
// Dispose the series from the chart, effectively 'hiding' it.
triangleSeries.dispose()
})
You can modify the checkbox shapes using the setPictureOff or setPictureOn methods of the UIElementBuilder:
// Create a checkbox
const checkBox = chart.addUIElement( UIElementBuilders.CheckBox
// Modify the shape of the checkbox
.setPictureOff(UIButtonPictures.Rectangle)
.setPictureOn(UIButtonPictures.Rectangle)
)
Using Highcharts to display a bar chart, is there a built-in way to link legend items to categories rather than to series? As such I would see a chart with a bunch of bars, and when I click a legend item it would show or hide just the bar(s) associated with a single category.
Thanks
There is not a built in way.
You can fake it in a number of ways, however.
One way is to use a separate series for each category, set grouping to false, dummy the x values to hover around the actual category value.
plotOptions: {
series: {
grouping: false,
pointRange: 0.2
}
},
series: [{
name: 'Group A',
data: [[-0.25,5],[0,7],[0.25,6]]
}]
Example:
http://jsfiddle.net/jlbriggs/x1cdz54r/
In the end, I found no out-of-the-box way to do this. But I found a solution that works, as follows:
correlate each bar with a single series (see fiddle referenced above)
in legendItemClick:
manually show or hide the series associated with the clicked-on legend item
given visibility of each category, recompute the indices of each visible category and update each visible bar series data[0].x with the new index of the category with which it is associated (use point.update())
call xAxis.setCategories with a list of the categories you want to be currently visible
call xAxis.setExtremes with the new extremes for the category indices
Here is a very simple example of the above:
legendItemClick = function (e) {
var seriesClicked = e.currentTarget;
var chart = seriesClicked.chart;
var axis = chart.xAxis[0]
if (seriesClicked.visible) {
seriesClicked.hide();
chart.series[2].data[0].update( { x: 1 });
axis.setCategories(['Group A', 'Group C'], false)
axis.setExtremes(0, 1, true)
} else {
seriesClicked.show();
chart.series[2].data[0].update( { x: 2 });
axis.setCategories(['Group A', 'Group B', 'Group C'], false)
axis.setExtremes(0, 2, true)
}
return false;
}
And a fiddle: http://jsfiddle.net/dkent600/e6357a22/17/
I have a c3.js line graph that represents the evolution of 2 values. I need that the tooltip of the line graph to be a pie chart (tooltip = another c3.js graph).
Here is what I succeeded:
http://jsfiddle.net/owhxgaqm/80/
// c3 - custom tooltip
function generateGraph(data1,data2) {
console.log(data1.name + '\t' + data1.value + '\t' + data2.name + '\t' + data2.value);
var chart1 = c3.generate(
{
bindto: "#t",
data: {columns : [[data1.name, data1.value],[data2.name, data2.value]],
type : 'pie'}
});
}
var chart = c3.generate({
data: {
columns: [
['data1', 1000, 200, 150, 300, 200],
['data2', 400, 500, 250, 700, 300], ]
},
tooltip: {
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
generateGraph(d[0], d[1]);
var divt = document.getElementById("t");
return '';
}
}
});
As you can see I'm binding the "tooltip" with an already existing div so this is not really what I want from c3.js.
Any idea is welcome.
Thanks.
Adding a Chart inside a C3 Tooltip
You can use the tooltip element that c3 already has. In your contents function call the generateGraph function (see next step). Pass in the tooltip element available in this.tooltip in addition to the data.
...
tooltip: {
contents: function (d) {
// this creates a chart inside the tooltips
var content = generateGraph(this.tooltip, d[0], d[1])
// we don't return anything - see .html function below
}
}
...
Your generateGraph function basically creates a c3 chart in your tooltip element (bindto supports a d3 element). We do a bit of optimization (if the data is same, the chart is not recreated) and cleanup (when a chart is recreated it is destroyed and removed from the DOM)
function generateGraph(tooltip, data1, data2) {
// if the data is same as before don't regenrate the graph - this avoids flicker
if (tooltip.data1 &&
(tooltip.data1.name === data1.name) && (tooltip.data1.value === data1.value) &&
(tooltip.data2.name === data2.name) && (tooltip.data2.value === data2.value))
return;
tooltip.data1 = data1;
tooltip.data2 = data2;
// remove the existing chart
if (tooltip.chart) {
tooltip.chart = tooltip.chart.destroy();
tooltip.selectAll('*').remove();
}
// create new chart
tooltip.chart = c3.generate({
bindto: tooltip,
size: {
width: 200,
height: 200
},
data: {
columns: [[data1.name, data1.value], [data2.name, data2.value]],
type: 'pie'
}
});
// creating a chart on an element sets its position attribute to relative
// reset it to absolute (the tooltip was absolute originally) for proper positioning
tooltip.style('position', 'absolute');
}
Note that we set the chart size so that it's more like tooltip content instead of a subchart.
The last bit is a bit hacky - since c3 requires that we set a HTML (which we don't want to do) and because we don't have any other callbacks we can easily hitch onto after the content handler, we have to disable the function that c3 uses to set the html content on the tooltip (this will affect only this chart's tooltip) i.e. .tooltip.html
// MONKEY PATCHING (MAY break if library updates change the code that sets tooltip content)
// we override the html function for the tooltip to not do anything (since we've already created the tooltip content inside it)
chart.internal.tooltip.html = function () {
// this needs to return the tooltip - it's used for positioning the tooltip
return chart.internal.tooltip;
}
Fiddle - http://jsfiddle.net/muuqvf1a/
Tooltip Positioning
Instead of using c3's tooltip positioning you could also size and position the tooltip at the bottom of the chart. Just style .c3-tooltip-container.
Alternatives
Note that c3 also support subcharts (http://c3js.org/reference.html#subchart-show) and data.mouseover (http://c3js.org/reference.html#data-onmouseover) which could also be a cleaner avenues worth exploring.
I'm using nvd3.js to create a line graph that displays ratings that I have calculated over time. I have more information for each individual data point (rating) and would like to have each data point on the graph link to a unique page with more information about that specific data point.
For example: I would like to be able to hover over the first data point on the graph (x: 1345457533, y: -0.0126262626263) and click on it to go to a specific page (http://www.example.com/info?id=1) that provides more information about that rating or data point. Each data point has a unique id and unique url that I would like to link to.
Here is the code that I am using to generate the graph:
nv.addGraph(function() {
var chart = nv.models.lineChart();
chart.xAxis
.axisLabel('Time')
.tickFormat(d3.format('r'));
chart.yAxis
.axisLabel('Rating')
.tickFormat(d3.format('.2f'));
d3.select('#chart svg')
.datum(data())
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
function data() {
var data = [ { x: 1345457533, y: -0.0126262626263 },
{ x: 1345457409, y: 0.0224089635854 },
{ x: 1345457288, y: 0.0270935960591 },
{ x: 1345457168, y: -0.0378151260504 },
{ x: 1345457046, y: -0.115789473684 } ]
return [
{
values: data,
key: "Sample1",
color: "#232066"
}
];
}
The HTML:
<div id="chart">
<svg></svg>
</div>
And here is a working example.
Here is an working solution http://jsfiddle.net/66hAj/7/
$('#chart svg').on('click', function(e){
var elem = $(e.target),
currentItem, currentUrl;
if(elem.parent('.nv-point-paths').length) {
currentItem = e.target.getAttribute('class').match(/\d+/)[0];
currentUrl = _data[0].urls[ currentItem ];
$('#log').text(currentUrl);
//window.location = currentUrl
}
})
I've used jQuery to bind a click handler on the canvas and then get the data based on the element clicked on the graph.
currentItem gives you the id of the current item that you clicked on
currentUrl gives the url related to the currently clicked item.
You can see the url change in the div below the chart as you click on each point over the graph.