i'm exploring c3.js, i have created an donut chart, which was very simple to do, next thing i wanted to do is on mouser-over i wanted to expand/zoom/popout that focused segment, this functionality we can see in d3pai., but i'm trying to achieve this effect purely using c3.js.
can some one please suggest me how to proceed and how to create such poping-up of segment effect.
var init = function() {
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['Coin1', 30, 200, 100, 400, 150, 250],
['Coin2', 130, 100, 140, 200, 150, 50],
['Coni3', 50, 100, 130, 240, 200, 150],
['Coin4', 130, 100, 140, 200, 150, 50],
['Coin5', 130, 150, 200, 300, 200, 100]
],
type: 'donut',
onclick: function(e) {
//console.log(e);
// console.log(d3.select(this).attr("stroke-width","red"));
},
onmouseover: function(d, i) {
},
onmouseout: function(d, i) {
}
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d',
centered: true,
position: 'inner-right'
}
}
},
bindto: '#dash',
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
},
pie: {
expand: true,
},
tooltip: {
grouped: false,
contents: function(data, defaultTitleFormat, defaultValueFormat, color) {
// console.log("Containt");
// console.log(data, defaultTitleFormat, defaultValueFormat, color);
return "<p style='border:1px solid red;'>" + data[0].value + "</p>";
}
}
});
};
inti();
p {
line-height: 1;
font-weight: bold;
padding: 5px 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 4px;
line-height: 15px;
font-size: 12px;
min-width: 91px;
}
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.js"></script>
</head>
<body>
<div id="dash"></div>
</body>
</html>
In the c3 config object, you can define onmouseover and onmouseout callback functions. The DOM node corresponding to the events is passed in as the second argument, so you can use it in the logic.
You can use that to apply things such as transformations. So on mouseover, you could scale it up, and on mouseout, scale it down. This is just a nudge in the right direction. You can play with other transformations to get the effect you want.
onmouseover: function (d, i) {
// 'i' is the dom node.
d3.select(i).attr("transform", "scale(1.1)")
},
onmouseout: function (d, i) {
d3.select(i).attr("transform", "scale(1)")
}
http://jsfiddle.net/ggamir/eqkrr5j0/
If you want the transformation to persist until the next mouse event, then you can keep track of the last item hovered over, and only "de-transform" it on the next mouseover:
http://jsfiddle.net/ggamir/79qhy9hn/
// Somewhere outside before defining your c3 config object:
var currentSlice;
// Inside your c3 config object:
onmouseover: function (d, i) {
if(currentSlice !== void 0) {
currentSlice.attr("transform","scale(1)")
}
currentSlice = d3.select(i).attr("transform", "scale(1.1)");
}
Related
I want to create a gauge diagram with amcharts 5 with persian text on it. All the code sample I found is working correctly with english text on it. But when I want to use persian or arabic text (rtl languages), it doesn't show texts correct. How can I solve this problem?
Here is my code:
<script>
var root = am5.Root.new("chartdiv");
root.setThemes([
am5themes_Animated.new(root)
]);
var chart = root.container.children.push(am5radar.RadarChart.new(root, {
panX: false,
panY: false,
startAngle: 160,
endAngle: 380
}));
var axisRenderer = am5radar.AxisRendererCircular.new(root, {
innerRadius: -40
});
axisRenderer.grid.template.setAll({
stroke: root.interfaceColors.get("background"),
visible: true,
strokeOpacity: 0.8
});
var xAxis = chart.xAxes.push(am5xy.ValueAxis.new(root, {
maxDeviation: 0,
min: -40,
max: 100,
strictMinMax: true,
renderer: axisRenderer
}));
var axisDataItem = xAxis.makeDataItem({});
var clockHand = am5radar.ClockHand.new(root, {
pinRadius: am5.percent(20),
radius: am5.percent(100),
bottomWidth: 40
})
var bullet = axisDataItem.set("bullet", am5xy.AxisBullet.new(root, {
sprite: clockHand
}));
xAxis.createAxisRange(axisDataItem);
var label = chart.radarContainer.children.push(am5.Label.new(root, {
fill: am5.color(0xffffff),
centerX: am5.percent(50),
textAlign: "center",
centerY: am5.percent(50),
fontSize: "3em"
}));
axisDataItem.set("value", 50);
bullet.get("sprite").on("rotation", function () {
var value = axisDataItem.get("value");
var text = Math.round(axisDataItem.get("value")).toString();
var fill = am5.color(0x000000);
xAxis.axisRanges.each(function (axisRange) {
if (value >= axisRange.get("value") && value <= axisRange.get("endValue")) {
fill = axisRange.get("axisFill").get("fill");
}
})
label.set("text", Math.round(value).toString());
clockHand.pin.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
clockHand.hand.animate({ key: "fill", to: fill, duration: 500, easing: am5.ease.out(am5.ease.cubic) })
});
var i = 0;
var a = setInterval(function() {
if (i === 9) {
axisDataItem.animate({
key: "value",
to: Math.round(28),
duration: 100,
easing: am5.ease.out(am5.ease.cubic)
});
}
else if (i === 25) {
clearInterval(a);
}
else {
axisDataItem.animate({
key: "value",
to: Math.round(Math.random() * 140 - 40),
duration: 2000,
easing: am5.ease.out(am5.ease.cubic)
});
i++;
}
}
, 100);
var bandsData = [{
title: "لاغری مفرط",
direction: "rtl",
position: "right",
orientation: "rtl",
color: "#ee1f25",
lowScore: -40,
highScore: -20
}, {
title: 'لاغر',
color: "#f04922",
lowScore: -20,
highScore: 0
}, {
title: "نرمال",
color: "#fdae19",
lowScore: 0,
highScore: 20
}, {
title: "اضافه وزن",
color: "#f3eb0c",
lowScore: 20,
highScore: 40
}, {
title: "چاق",
color: "#b0d136",
lowScore: 40,
highScore: 60
}, {
title: "چاقی زیاد",
color: "#54b947",
lowScore: 60,
highScore: 80
}, {
title: "چاقی مفرط",
color: "#0f9747",
lowScore: 80,
highScore: 100
}];
am5.array.each(bandsData, function (data) {
var axisRange = xAxis.createAxisRange(xAxis.makeDataItem({}));
axisRange.setAll({
value: data.lowScore,
endValue: data.highScore
});
axisRange.get("axisFill").setAll({
visible: true,
fill: am5.color(data.color),
fillOpacity: 0.8
});
axisRange.get("label").setAll({
text: data.title,
inside: true,
radius: 15,
fontSize: "0.9em",
fill: root.interfaceColors.get("background")
});
});
chart.rtl = true;
chart.appear(1000, 100);
chart.rtl = true;
</script>
Final result is like this image:
amcharts5 result
I also searched about it in documentation of amcharts 5 but I couldn't find the answer.
I have created a chart with Chart.js, and I now need to show the data in the legend differently per the two different datasets.
How do I show the first dataset 'Low/High Range Limit' in the classic rectangle/fill style and the dataset 'Patient Results' in the point style?
(Bonus: Currently, I'm showing the second dataset near-correctly. I also want to completely fill the circle with the solid 'steelblue' color, not with transparency.)
(I would provide an image but I need at least 10 reputation to post them.)
<style>
.chart-container { width: 550px }
</style>
<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
type: 'line',
data: {
labels: ['(A)', '(B)', '(C)', '(D)'],
datasets: [
{
label: 'Patient Results',
data: [40, 230, 30, 60],
borderColor: 'steelblue',
borderWidth: 2,
pointBackgroundColor: 'steelblue',
fill: false,
spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
},
{
data: [0, 30, 20, 20], // representing the low range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#fff'
},
{
label: 'Low/High Range Limit',
data: [60, 150, 50, 40], // representing the high range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#c2e8f5'
}
]
},
options: {
elements: {
line: {
tension: 0 // disables bezier curves
}
},
legend: {
labels: {
boxWidth: 6,
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 1) {
return false;
}
return true;
},
usePointStyle: true
},
position: 'right',
reverse: true // shows 'Low/High Range Limit' first
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>
I'm creating a pie chart using nvd3 and angular-nvd3. I've got my legend displayed but it's in a row across the top.
I'd like to display it in a column down the left side.
I found http://embed.plnkr.co/TJqjjkHaD2S0VjsGmN3c/preview but when I use the options found in the .js file then all that does is change the look of the legend, not the placement.
The css file is empty and there doesn't seem to be inline css in the html. So I'm unsure how they placed the position of the legend on the right in a column.
I do see legendPosition: 'right' but when I use legendPosition: 'left' then the entire pie chart disappears.
So at the least how do I display in a column, and it would be great if I could change it to the left.
Options object:
$scope.patientsChart = {
chart: {
type: 'pieChart',
height: 500,
x: function (d) {
var PatientStatuses = ["Unknown", "Green- Healthy", "Yellow - Fair", "Red - Unhealthy"];
return PatientStatuses[d.Key -1];
},
y: function (d) { return d.Value.length; },
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
showLegend: false,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie: {
dispatch: {
//elementClick: function (e) { console.log(e) }
}
},
color: function (d) {
var colors = ['#4066b9', '#009446', '#eba323', '#ee2726'];
return colors[d.Key - 1];
}
}
};
Directive for angular-nvd3:
<nvd3 options="FEV1Chart" data="patients"></nvd3>
If you want to rotateLabels in xAxis just add "rotateLabels: -45"
For example,
xAxis: {
axisLabel: 'Hours',
axisLabelDistance: 20,
showMaxMin: false,
rotateLabels: -45
},
I am using joint.js to generate a services flowchart. And I use the below code snippet to create my custom element.
// Create a custom element.
// ------------------------
joint.shapes.custom = {};
// The following custom shape creates a link out of the whole element.
joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
// Note the `<a>` SVG element surrounding the rest of the markup.
markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
defaults: joint.util.deepSupplement({
type: 'custom.ElementLink'
}, joint.shapes.basic.Rect.prototype.defaults)
});
// Create JointJS elements and add them to the graph as usual.
// -----------------------------------------------------------
var supply = new joint.shapes.custom.ElementLink({
position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
attrs: {
rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', cursor: 'pointer' },
text: { text: 'Supply Chain \nManagement', fill: 'white' }
}
});
Problem is that on a single left click on the supply element, the hyperlink does not open. Only when I drag and and release the element, the link opens in a new tab. Kindly suggest me what can be done to overcome this issue. I have disabled user dragging of elements using the
var paper = new joint.dia.Paper({ el: $('#paper'), width: 1040, height: 1000, gridSize: 1, model: graph, interactive: false });
Thanks in advance!
Here is your answer...
you didn't add xlink:show': 'new'. That's why it's not getting open.
create custom shap...
joint.shapes.custom = {};
joint.shapes.custom.ElementLink = joint.shapes.basic.Rect.extend({
// Note the `<a>` SVG element surrounding the rest of the markup.
markup: '<a><g class="rotatable"><g class="scalable"><rect/></g><text/></g></a>',
defaults: joint.util.deepSupplement({
type: 'custom.ElementLink'
}, joint.shapes.basic.Rect.prototype.defaults)
});
You Data:
var supply = new joint.shapes.custom.ElementLink({
position: { x: 200, y: 110 }, size: { width: 250, height: 60 },
attrs: {
rect: { fill: '#3366ff', stroke: '#1d3d9e', 'stroke-width': 5 },
a: { 'xlink:href': 'http://www.aamrofreight.net/supply-chain-management/', 'xlink:show': 'new', cursor: 'pointer' },
text: { text: 'Supply Chain \nManagement', fill: 'white' }
}
For more information..check here:
[http://jointjs.com/tutorial/hyperlinks
I hope, it should work for you.
How can I create scroll when I drag jsplumb connections to the top of the browser?
I searched through the net but couldn't find a solution to create scrolls.
Click here to check the Demo
JSPlumb or JQuery
<script>
var targetDropOptions = {
};
connectorHoverStyle = {
lineWidth: 7,
strokeStyle: "#2e2aF8",
cursor: 'pointer'
}
//Setting up a Target endPoint
var targetColor = "#316b31";
var targetEndpoint = {
anchor: "LeftMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: targetColor },
//isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: targetColor, lineWidth: 8 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: 1,
isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
//Setting up a Source endPoint
var sourceColor = "#ff9696";
var sourceEndpoint = {
anchor: "RightMiddle",
endpoint: ["Dot", { radius: 8}],
paintStyle: { fillStyle: sourceColor },
isSource: true,
scope: "green dot",
connectorStyle: { strokeStyle: sourceColor, lineWidth: 4 },
connector: ["Flowchart", { curviness: 63}],
maxConnections: 1,
// isTarget: true,
dropOptions: targetDropOptions,
connectorHoverStyle: connectorHoverStyle
};
jsPlumb.bind("ready", function () {
jsPlumb.animate($("#A"), { "left": 50, "top": 100 }, { duration: "slow" });
jsPlumb.animate($("#B"), { "left": 300, "top": 100 }, { duration: "slow" });
var window = jsPlumb.getSelector('.window');
jsPlumb.addEndpoint(window, targetEndpoint);
jsPlumb.addEndpoint(window, sourceEndpoint);
jsPlumb.draggable(window);
});
</script>
HTML
<div id="A" class="a window"
style="width: 100px; height: 100px; border: solid 1px;">
<strong>A</strong>
</div>
<div id="B" class="b window"
style="width: 100px; height: 100px; border: solid 1px;">
<strong>B</strong>
</div>
In my case I have one div with the properties position:relative and overflow:scroll and all shapes inside of this one make scroll up and down. I hope can help you.