First :
I have a problem with a dynamic modal-dialog with a diagram in it.
The code is pretty easy:
https://jsfiddle.net/c2abnhja/1/
As you can see, no diagram is in the created div container. But if you resize your window, the diagram is drawn correctly with the correct size of the modal-dialog. [Also it doesn't matter if I trigger the resize event in manual : https://jsfiddle.net/ywaoec3d/1/ ]
And in second:
If I set a size to the modal dialog of bootstrap, like here:
https://jsfiddle.net/aqs5fhha/1/
the diagram never get the correct height of the modal-content... but the documentation of c3.js says :
size.height
The desired height of the chart element.
If this option is not specified, the height of the chart will be
calculated by the size of the parent element it's appended to.
Any idea why the diagram is not drawn correctly?
Thanks in advance
I was able to fix your problem using this :
$('#myModal').on('shown.bs.modal', function() {
var chart = c3.generate({
bindto: '#diagramAppend',
data: {
x: 'x',
columns: [
['x', 30, 50, 100, 230, 300, 310],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 450]
]
}
});
});
Basically what is happening is that you try to generate your graph on a div with 0 width. Waiting the event shown.bs.modal allow you to have a width at this point.
Updated JSFiddle
Related
Programmatically control visibility (CSS and show / hide) of each point in C3 charts type Area Spline.
Here is the jsFiddle example.
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 150, 300, 200]
],
type: 'area-spline'
},
point: {
show: true
}
});
Points in the C3 configuration only allows for all or none, but afterwards the visibility of the points can be altered through selection of the circles via the c3 css classes. These circles are bound to the data points so then writing a function that picks out the data points you want can be used to control visibility as below:
var chart = c3.generate({
data: {
columns: [
['pete', 30, 200, 100, 400, 150, 250],
['steve', 50, 20, 10, 40, 15, 25]
]
},
point: {
show: true
}
});
var visx = d3.set([2,4]);
d3.selectAll(".c3-chart-line .c3-circles").selectAll(".c3-circle").style("display", function(d) {
//return visx.has(d.x) ? null : "none"; // show points at x values 2 and 4
return d.value > 150 ? null : "none"; // or show points when value is above 150
})
http://jsfiddle.net/ud8gyphw/
The simple answer to:
Is it possible to do through C3 configuration instead of writing code through D3.
Is yes this is because C3 is used to generate D3-based charts by wrapping the code required to construct the entire chart meaning we don't have to write D3 code any more.
You should be able to configure C3js without D3js because we don't have to write D3 code any more.
NOTE: C3 depends on D3, so please load D3 too.
You can read more about C3js over on the Official Website.
You can also check out the C3js Docs.
The auto-resizing behaviour is a bit unusual in handsontable. I just want to have fixed row height for all my rows that don't expand unless you click into it, or manually drag it down, like in excel. I also want to manually set that height to the same height for all the rows and not have it calculated based off of the tallest row.
I've tried:
Adding 'height' => 50 to my columns, adding manualRowResize: true, and adding in fixed heights for a few rows with manualRowResize: [50, 50, 50], but when my data spans multiple rows (for example, when rendered in html), it doesn't stay at a fixed height.
Handsontable - Resizing rows and columns
Maybe rowHeights is what you want.
var
container = document.getElementById('example1'),
hot;
hot = new Handsontable(container, {
data: Handsontable.helper.createSpreadsheetData(200, 10),
rowHeaders: true,
colHeaders: true,
colWidths: [55, 80, 80, 80, 80, 80, 80],
rowHeights: [50, 40, 100], // <-- this one sets fixed row height
manualColumnResize: true,
manualRowResize: true
});
Fiddle here.
Description of problem:
I'm attempting to make this image scale into view (centered), and then give the appearance that it's "bouncing" away from the screen briefly after reaching its maximum size of 100%. Unfortunately, it is moving down and to the right with each new effect chain. Why?
Note that the effect I'm attempting to achieve is completely different from the bounce effect.
Try 'scale': 'box' option for scale effect.
scale (default: "both")
Type: String
Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.
As yours box div doesn't actually have any content, probably, that's the reason of unwanted shifts...
Yours fiddle with modification.
Another fiddle variant.
Upd.
As you can see in second fiddle, you can use separate function for each animation phase (effect). So, just in outermost phase pick current box size, and in each next phase calc scale percentage with honored current/initial box size, like following:
var box = $('.box');
box.data('size', {'w': box.width(), 'h': box.height()});
box.show(scale_effect(box, 100, 250, function () {
box.stop().effect(scale_effect(box, 80, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
box.stop().effect(scale_effect(box, 90, 100, function () {
box.stop().effect(scale_effect(box, 100, 100, function () {
}));
}));
}));
}));
}));
function scale_effect(box, percent, duration, complete) {
box = $(box);
var size = box.data('size');
var absolutePercent = percent * size.w / box.width();
console.log(absolutePercent);
return {
'effect': "scale",
'percent': absolutePercent,
'scale': 'box',
'duration': duration,
'queue': false,
'complete': complete
};
}
See the fiddle for preview.
And here's some nifty variant with following syntax:
$('.box').bouncedScale([
{'percent': 100, 'duration': 250},
{'percent': 80, 'duration': 100},
{'percent': 100, 'duration': 100},
{'percent': 90, 'duration': 100},
{'percent': 100, 'duration': 100},
]);
I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});
As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}
Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...
I have a simple network diagram. It contains of circle elements and lines connecting them. Now sometimes there could be quite a lot of those circles and they go 'behind' the screen (see the image attached).
The image doesnt cut off the edges, its the edge of my screen :)
Its a force diagram (code used can be found in this fiddle ). Setting the width = 400;
height = 500; or changing these two variables doesn't really help.
What variable am I missing here. Id like them not to go 'behind' the screen or is it just how it should behave ?
Thanks,
Neil
DEMO
map.set('C1', {
fixed: true,
x: 100,
y: height / 2
});
problem is that your 'C1' is fixed at 100 in x axis change it to 200 or 250 according to your need
map.set('C1', {
fixed: true,
x: 250,
y: height / 2
});
OR
you can change fixed: false, to achieve the same DEMO2
map.set('C1', {
fixed: false,
x: 100,
y: height / 2
});
OR
set C1 width half DEMO3
map.set('C1', {
fixed: true,
x: width/2,
y: height / 2
});