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).
Related
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 have a c3js line graph of type timeseries.
My axis tables are currently like this:
11/10.....05/11.....11/11.....05/12.....11/12.....05/13.....11/13
and it want it to be
.12/10.....06/11.....12/11.....06/12.....12/12.....06/13.....
where each dot indicates a month, note that the datapoint at 11/10 is still kept and displayed, only the axis labelling has changed. FYI, The increment is not set directly but hacked using culling.
Is there any way to alter the starting label to 12/10 (with all subsequent labels increasing in 6-months intervals)?
UPDATE (14NOV14): I have added a working jsFiddle for you to tinker with. Any help is appreciated!
UPDATE (14NOV14): I have tried using functions for this. But I want the 'pop-up' box to show the grey heading all the time.
This was a painfully long learning process, for a very badly-documented library. But I had to use a function for the format option for the tick, and then format the title again for the tooltip. Here's the final, working copy.
HTML (Include the d3.js, c3.js, and c3.css scripts too)
<body>
<div id="chartContainer"></div>
</body>
JS
var chart = c3.generate({
bindto: '#chartContainer',
data: {
x: 'x',
columns: [
['x', '2013-04-01', '2013-05-02', '2013-06-03', '2013-07-04', '2013-08-05', '2013-09-06'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: function (x) {
if((x.getMonth()+1) % 6 === 0) {
return ('0' + (x.getMonth()+1)).slice(-2) + '/' + x.getFullYear().toString().substr(2,2);
}
}
}
}
},
tooltip: {
format: {
title: function (d) {
var format = d3.time.format('%m/%y');
return format(d)
}
}
}
});
N.B. Also be aware that culling might interfere with this. I had to set culling: {max: 100} to ensure any built in incrementations are not applied.
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();
}
});
});
Iam using the waypoints plugin, but am open for others.
so far i have managed to get the div to fadeIn when iam scrolling down and its rached 30%:
element.waypoint(function(){
$(this).animate({ opacity: 1 }, 500);
},{
offset: '30%'
});
But iam not able to make it fadeout again, when its getting out of view again.
Thanks for the help.
is this a too hard question for mighty stackoverflow? ...
You can do different things depending on the direction you are scrolling when you cross that waypoint trigger spot using the direction parameter that is passed to the function:
element.waypont(function(direction) {
if (direction === 'down') { ... }
else { ... }
}, { offset: '30%' });
You can also create multiple waypoints with different offsets, so you can react to the element hitting different parts of the page:
element
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '10%' })
.waypoint(function(direction) {
$(this).toggleClass('visible');
}, { offset: '90%' });