I need to have a pie chart that will have disable tooltip and another that will have a tooltip enabled. I have tried to enable the tooltip per series but it didn't work.
{
category: "Asia",
value: 53.8,
color: "#9de219",
tooltip: {
visible: true
}
}
Here is the dojo
http://dojo.telerik.com/OKOLE
I have made it through series hover event.
seriesHover: e => {
if(e.category == 'disabledCategory') {
e.preventDefault();
}
}
Related
I have a slick-carousel that a have some accordion tabs inside.
I need to be able to react to the bootstrap accordion collapse/expansion and adjust the height of the carousel.
It adjusts with the adaptive height correctly but only once done a full rotation.
How would I go about this.
so have established this so far. I are actually using velocityjs for the accordion.
if ($(this).hasClass('active')) {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', false).velocity('slideUp', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', false).removeClass('active');
} else {
toggleActivePanel.find('.content-collapse').attr('aria-expanded', true).velocity('slideDown', {
easing: 'easeOutQuad'
}, { complete: resize_slider() });
$(this).attr('aria-expanded', true).addClass('active');
}
function resize_slider() {
var sliderAdaptiveHeight = function () {
var heights = [];
let items = $('.slick-active')
items.each(function () {
heights.push($(this).height());
});
$('.slick-list').height(Math.max.apply(null, heights));
}
sliderAdaptiveHeight();
$('.slider').on('afterChange', function (event, slick, currentSlide, nextSlide) {
sliderAdaptiveHeight();
});
}
the resize_slider function is being triggered however the height adjustments are back to front.
ie when expanding the slick slider height retracts and when collapsing the slick slider expands.
any thoughts
I have a c3.js chart which has 4 datasets. Is it possible to set the tooltop only to display for 1 set of data?
From the code below I only want the tooltip to display for data4.
var chart = c3.generate({
bindto: '#chart3',
data: {
//x: 'x1',
xFormat: '%d/%m/%Y %H:%M', // how the date is parsed
xs: {
'data1': 'x1',
'data2': 'x2',
'data3': 'x3',
'data4': 'x4'
},
columns: [
x1data,
y1data,
x2data,
y2data,
x3data,
y3data,
x4data,
y4data,
],
types: {
data1: 'area',
},
},
legend: {
show: false
}
});
There is the tooltip option for show:false but that disables them all.
Can it display for just 1 dataset?
The tooltip.position() function can be used to control the position of the tooltip, and we can set the tooltip position way off the canvas as a quick hack to hide it when we do not want to see it. However, I do not know how to return the default which is not documented - maybe someone else can elaborate on that.
tooltip: {
grouped: false,
position: (data, width, height, element) => {
if (data[0].id === 'data2'){ // <- change this value to suit your needs
return { top: 40, left: 0 };
}
return { top: -1000, left: 0 };
}
}
EDIT: After digging around for a solution I found that Billboard.js (a fork of C3.js on github) provides a tooltip.onshow() function that the API docs say is 'a callback that will be invoked before the tooltip is shown'. So it would appear that Billboard.js already has the a potential solution where you could intercept the data and hide the tooltip.
I've been trying to get a telerik kendo ui column chart to display grouped data but where the groups might not have entries for all possible values and I don't want to show space/empty columns in these empty cases.
Telerik dojo of problem
Is anyone aware of anyway to get this to work more like the screenshot below
Excel has grouped the data but doesn't display a column at all if the data is null/zero
I couldn't find a built-in way to do this, so I ended up just placing the bars manually by overriding the visual function. In my case, I only needed to move one bar and that bar will always be the same category, which made it a whole lot easier in that I only had to identify it by matching the category. I could then move it with a transform. You cannot move it by setting the coordinates because the visual has already been created.
It would be more complex to do this dynamically, but it's certainly possible. This may give someone a start in the right direction.
One downside of this method is that you must also place the labels manually, which I have also done below. You can override the visual function of the labels, as well, but no references to any other elements are passed with the event data. Note how the documentation says the sender field may be undefined; in my experience, this is always the case.
It also does not move the tooltip or the highlight. You could use the same method to move the highlight (override the visual function, though on the series instead of the seriesDefaults) and draw the tooltip manually while moving the highlight -- similar to how the method below draws the label while moving the column.
Telerik Dojo Example
$(document).ready(function () {
$("#chart").kendoChart({
legend: { visible: false },
tooltip: { visible: false },
categoryAxis: {
name: "categoryAxis",
categories: ["1", "2", "3"],
},
series: [
{
data: [1, 2, 3],
highlight: { visible: false },
},
{
data: [1.5, null, 3.5],
highlight: { visible: false },
}
],
seriesDefaults: {
type: "column",
labels: { visible: false },
visual: function (e) {
if (e.value === null) return;
var visual = e.createVisual();
var axisRect = e.sender.getAxis("categoryAxis").slot("2");
var group = new kendo.drawing.Group();
var label = new kendo.drawing.Text(e.value, [0, 0], {
font: "20px sans-serif",
fill: { color: "black" }
});
var lbox = label.clippedBBox();
label.position([
e.rect.origin.x + e.rect.size.width / 2 - lbox.size.width / 2,
e.rect.origin.y - label.bbox().size.height * 1.5
]);
group.append(visual, label);
if (e.category === "2") {
var x = (axisRect.origin.x + axisRect.size.width / 2) - e.rect.size.width / 2;
group.transform(kendo.geometry.transform().translate(x - e.rect.origin.x, 0));
}
return group;
},
}
});
});
I am using Highmaps and I limit the zoom range by setting the minRange property in the xAxis property.
This limits the zoom in factor as expected, but when zooming in too much, it does not let you zoom out again until you drag the map. To be more precise, it lets you zoom out until the x-axis is completely visible, but if your viewport is too wide to display the whole y-range of the map at this particular zoom step, you only get a horizontal stripe.
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
// Initiate the chart
$('#container').highcharts('Map', {
title : {
text : 'Zoom in on country by double click'
},
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
xAxis: {
minRange: 5000 // <- prevent zooming in too much
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
}
}]
});
});
});
You can see a working demo here: http://jsfiddle.net/b9d0ry3t/
This is a standard Highmaps demo, where I simply added the minRange on the xAxis, nothing else.
This and many other problems have been fixed with the most recent Highmaps update (Feb. 2015).
I am using jqplots to show data graphically in my website. I am able to plot the chart as per our requirement. Now I need to place those graphs in jQuery UI tabs.
I am able to get the graph in the first tab which is active on page load.But I am not able to get the remaining graphs, which are present in other tabs, they are invisible.
I am not able to figure out the reason please help me in this regard.
from your questions there is no code attached, so compare your code with this on JSFiddle http://jsfiddle.net/meccanismocomplesso/9fdJm/1/
I hope this could be useful (It is an example of the book "Beginning JavaScript Charts with jqPlot, Highcharts and D3").
It is perfectly working. There are three different type of charts each in a different tab, and they are all visible.
.
Mention the jqPlot code first, followed by the tabs code. Even I faced the same issue, now fixed.
//$.jplot code
//$("#tabs").tabs();
#meccanismo.complesso Interesting! I am using your jsfiddle (http://jsfiddle.net/meccanismocomplesso/9fdJm/1/) to explore the possibility to run as well the jqplot objects into the jQuery UI tabs. As I was facing the same issue of only showing up only the content in one tab (The active initially), and seeing that the provided example has all the logic all together, thought this could help someone in the near future as well..
[http://jsfiddle.net/zpLxbue8/][1]
Rather than just executing the function as soon as it loads after or before the jQuery UI tabs, used the activate and create to trigger the jqplot
http://jsfiddle.net/zpLxbue8/ [jsFiddle working fine example... jQuery UI tabs displaying different types of graphs by using jQplot plugin][1]
The js content -- omitted due to platform abstraction layer.. script type="text/javascript
jQuery(document).ready(function($){
var $=$.noconflict();
function render(){
var bar1 = [['Apples',11],['Oranges',7],['Pears',3],['Bananas',9],['Lemons',5]];
var data1 = [3,1,2,3,5,4];
var data2 = [4,3,3,4,5,6];
var data3 = [9,10,8,7,4,6];
var data4 = [9,8,7,12,9,10];
var pie1 = [
['Black', 212],['White', 140], ['Red', 131],['Blue', 510]
];
var plot1 = $.jqplot ('chart1', [bar1],{
title: 'Example of a bar chart',
series:[{renderer:$.jqplot.BarRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: 0,
fontSize: '12px'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
var plot2 = $.jqplot ('chart2', [data1,data2,data3,data4],{});
var plot3 = $.jqplot ('chart3', [pie1],{
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
dataLabels: 'value',
fill: false,
sliceMargin: 6,
lineWidth: 5
}
}
});
}
$("#tabs").tabs({
collapsible: true,
//0 is the first tab´s content
active:1,
hide: { effect: "slideUp", duration: 'slow' },
show: { effect: "slideDown", duration: 'slow' },
create: function( event, ui ) {
return render();
},
activate: function( event, ui ) {
return render();
}
});
});