Related
I am trying a 3D Scatter plot with plotly js. is there any way I can add a color scale to the widget as in the below screenshot
When I tried to create I am only able to render 3D chart with some colors. I am not able to achieve a color scale and the legend as in attached screenshot
https://codepen.io/rudi8292/pen/RRxBrQ
<head>
<!-- Plotly.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv" style="width:100%;height:100%"></div>
<button type="button" class="button" id="this_button">Click here for update</button>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
var trace1 = {
x : [3],
y: [4],
z : [6],
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace5 = {
x : [2],
y: [5],
z : [6],
mode: 'markers',
marker: {
size: 11,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace4 = {
x : [1],
y: [3],
z : [4],
mode: 'markers',
marker: {
size: 8,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
mode : 'markers',
opacity: 0.8
},
type: 'scatter3d'
};
var trace2 = {
x : [2],
y: [2],
z : [2],
mode: 'markers',
marker: {
size: 15,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var trace3 = {
x : [1],
y: [1],
z : [1],
mode: 'markers',
marker: {
size: 12,
line: {
color: 'rgba(217, 217, 217, 0.14)',
width: 0.5
},
opacity: 0.8
},
type: 'scatter3d'
};
var data = [trace1, trace2,trace3,trace4,trace5];
var layout = {
margin: {
l: 0,
r: 0,
b: 0,
t: 0
},
xaxis : {
title : "This",
},
yaxis : {
title : "That"
},
zaxis : {
title : "where"
}};
Plotly.newPlot('myDiv', data, layout);
$("#this_button").click(function(){
console.log("clicked");
var update = {
x : [[1,2,3,4,5]],
y : [[1,2,3,4,5]],
z : [[1,2,3,4,5]],
size :[[12,13,14,15,16]],
'marker.color' : [["#001","#005","#0f0","#f00","#00f"]],
text : "size"
}
Plotly.restyle('myDiv', update,[0,1,2,3,4]);
});
I have found a similar sammple
https://codepen.io/etpinard/pen/mWQNrq
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>
Plotly.plot('graph', {
data:[{
marker: {
showscale: true,
colorbar: {
x: 0
},
size: [28.666666666666668, 20.666666666666668, 15.333333333333334, 17.666666666666668, 19.0, 17.666666666666668, 26.0, 21.0, 21.666666666666668, 27.0, 21.666666666666668, 16.666666666666668, 27.0, 14.0, 29.666666666666668, 22.0, 16.0, 28.0, 27.0, 25.333333333333332],
cmax: 14,
cmin: 20,
color: [28.666666666666668, 20.666666666666668, 15.333333333333334, 17.666666666666668, 19.0, 17.666666666666668, 26.0, 21.0, 21.666666666666668, 27.0, 21.666666666666668, 16.666666666666668, 27.0, 14.0, 29.666666666666668, 22.0, 16.0, 28.0, 27.0, 25.333333333333332],
colorscale: 'Viridis'
},
mode: "markers",
x: [630, 310, 260, 566, 566, 400, 515, 630, 151, 400, 515, 176, 230, 260, 151, 648, 648, 176, 230, 310],
y: [200, 100, 200, 100, 200, 100, 100, 100, 200, 200, 200, 200.1234, 200, 100, 100, 200, 100, 100, 100, 200],
z: [495, 18, 104, 33, 33, 615, 10, 495, 420, 615, 10, 232, 515, 104, 420, 327, 327, 232, 515, 18],
text: [
"vav-01-01",
"vav-01-02",
"vav-01-03",
"vav-01-04",
"vav-01-05",
"vav-01-06",
"vav-01-07",
"vav-01-08",
"vav-01-09",
"vav-01-10",
"vav-02-01",
"vav-02-02",
"vav-02-03",
"vav-02-04",
"vav-02-05",
"vav-02-06",
"vav-02-07",
"vav-02-08",
"vav-02-09",
"vav-02-10",
],
hoverinfo: "name+text",
type: "scatter3d",
name: "Floor 1",
showlegend: true,
showscale: true
}],
layout: {
showlegend: false,
showscale: true
}
});
I'm using C3 js to generate a chart. In my chart, I'm currently using stack bars to showing the data.
My code,
<div id="chart"></div>
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250]
],
type: 'bar',
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
According to the above code, chart generate as,
Now I need to add an additional 3 line to that chart, as below image,
How can I add Lines to chart using C3 JS? Its document has some line chart with a bar chart. But I can understand how to use it's for my requirement.
You can use data.types to set a chart for each data, Read this: https://c3js.org/reference.html#data-types .And this is a sample code for your problem.
<script>
var chart = c3.generate({
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 150, 160, 140, 145, 250, 100],
['Pink', 50, 50, 50, 50, 50, 50],
['Red', 400, 200, 150, 20, 300, 120]
],
types:{
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue', 'Orange','Green']
]
}
});
</script>
Here is how you can achieve it instead of type use types
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['Blue', 30, 200, 200, 400, 150, 250],
['Orange', 130, 100, 100, 200, 150, 50],
['Green', 230, 200, 200, 300, 250, 250],
['Black', 30, 200, 200, 400, 150, 250],
['Pink', 130, 100, 100, 200, 150, 50],
['Red', 230, 200, 200, 300, 250, 250]
],
types: {
Blue : 'bar',
Orange : 'bar',
Green : 'bar',
Black : 'line',
Pink : 'line',
Red : 'line'
},
groups: [
['Blue','Orange', 'Green', 'Black','Pink', 'Red']
],
axes: {
Black: 'black',
Pink: 'pink',
Red: 'red',
}
},
color: {
pattern: ['#1f77b4', '#ff7f0e', '#2ca02c','#00000', '#ff69b4', '#ff0000']},
axis: {
black: {
show: true
},pink: {
show: true
},red: {
show: true
}
}
});
<!-- Load c3.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.7/d3.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.2/c3.js"></script>
<div id="chart"></div>
I am new to C3 chart. I found the zoom functionality in the documentation for C3 . It will work for the mouse wheel scroll. But what I want is to implement the zoomin and zoomout in two seperate buttons. Can anyone direct me to the right track.
Thanks in advance.
Here below is an example of zoom in/out managed with buttons.
However unlike mouse wheel you have to decide which starting point to use.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom = 1;
var zoom_factor = 1.1;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
if (zoom<5) zoom *= zoom_factor;
console.log("zoom-in", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-out").click(function() {
if (zoom>1) zoom /= zoom_factor;
console.log("zoom-out", min, max, zoom);
chart.zoom([min, max/zoom]);
});
$("#zoom-reset").click(function() {
zoom = 1;
console.log("zoom-reset", min, max, zoom);
chart.zoom([min, max/zoom]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<link href="https://rawgit.com/masayuki0812/c3/master/c3.css" rel="stylesheet"/>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>
Here is a a solution to this that works in conjonction with mouse whell and preserves current scroll position.
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
rescale: true,
onzoom: function (domain) {
console.log("zoom", domain);
}
}
});
var zoom_factor = 3;
var min = 0;
var max = chart.data()[0].values.length;
$("#zoom-in").click(function() {
const zoom = chart.zoom();
const newZoom = [zoom[0] + zoom_factor , zoom[1] - zoom_factor];
if (newZoom[1] - newZoom[0] > 0) chart.zoom(newZoom);
});
$("#zoom-out").click(function() {
const zoom = chart.zoom();
// Bound zoom to min and max
chart.zoom([Math.max(zoom[0] - zoom_factor, min), Math.min(zoom[1] + zoom_factor , max)]);
});
$("#zoom-reset").click(function() {
console.log("zoom-reset", min, max);
chart.zoom([min, max]);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.css" media="screen" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.7.13/c3.min.js" type="text/javascript"></script>
<button id="zoom-in">zoom-in</button>
<button id="zoom-out">zoom-out</button>
<button id="zoom-reset">zoom-reset</button>
<div id="chart"></div>
Please help me add rounded corner for stacked chart(grouped bar chart) in c3.js.
I have found something similar here How to get rounded columns in c3.js bar chart
but this is the normal bar chart.
It is not working for stacked chart.
I'm not familiar with d3.js.
Thank you :)
This is my code.
var chart = c3.generate({
bindto: "#id",//element
padding: {
left: 50,
right: 50,
top: 20,
bottom: 20
},
data: {
// x : 'x',
columns: [//Data Arry
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, 200, 150, 400, 400, 400, 400, 400, 400, 400],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']//grouping data to get stacked chart
],
},
bar: {
width: {
ratio: .6 //setting width of bar
},
spacing: 2//setting space between bars
},
grid: {
y: {//grid lines
show: true,
color:'red'
}
},
axis: {
x: {
type: 'category',
tick: {
rotate: -90,
multiline: false,
format: "%b" //format: "%e %b %y"
},
height: 50,
categories: ['2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017', '2016', '2017'] //Xaxis labels
},
y2: {
show: false
},
y: {
tick: {
format: d3.format("s")//format y axis
}
}
},
color: {
pattern: ['#fc7f86', '#34dfe2', '#dc92fa', '#43daa1'] //color code
}
});
Set Data order as null
data: {
columns: [
['data1', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data2', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
['data3', 30, 200, 200, 400, 150, 250, 30, 200, 200, 400, 150, 250, 0, 100, 100, ],
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: null
},
I am currently trying to have a fixed range for categorical box plots in plotly.js, in order to always have the same graph size and layout even if some traces have no data.
If you look at this CodePen based on a example of the docs, the "David West" trace still appears because it's in the middle, but the "Demar Derozan" on the right is not seen, because it's at the end, and the graph size is computed with the data extremas.
Is it possible in plotly.js to have a fixed categorical axis for box plots?
HTML:
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
/* JAVASCRIPT CODE GOES HERE */
</script>
</body>
Javascript:
var xData = ['Carmelo<br>Anthony', 'Dwyane<br>Wade',
'Deron<br>Williams', 'Brook<br>Lopez',
'Damian<br>Lillard', 'David<br>West',
'Blake<br>Griffin', 'David<br>Lee',
'Demar<br>Derozan'];
function getrandom(num , mul)
{
var value = [ ]
for(i=0;i<=num;i++)
{
rand=Math.random() * mul;
value.push(rand);
}
return value
}
var yData = [
getrandom(30 ,10),
getrandom(30, 20),
getrandom(30, 25),
getrandom(30, 40),
getrandom(30, 45),
getrandom(30, NaN),
getrandom(30, 20),
getrandom(30, 15),
getrandom(30, NaN)
];
var colors = ['rgba(93, 164, 214, 0.5)', 'rgba(255, 144, 14, 0.5)', 'rgba(44, 160, 101, 0.5)', 'rgba(255, 65, 54, 0.5)', 'rgba(207, 114, 255, 0.5)', 'rgba(127, 96, 0, 0.5)', 'rgba(255, 140, 184, 0.5)', 'rgba(79, 90, 117, 0.5)', 'rgba(222, 223, 0, 0.5)'];
var data = [];
for ( var i = 0; i < xData.length; i ++ ) {
var result = {
type: 'box',
y: yData[i],
name: xData[i],
boxpoints: 'all',
jitter: 0.5,
whiskerwidth: 0.2,
fillcolor: 'cls',
marker: {
size: 2
},
line: {
width: 1
}
};
data.push(result);
};
layout = {
title: 'Points Scored by the Top 9 Scoring NBA Players in 2012',
yaxis: {
autorange: true,
showgrid: true,
zeroline: true,
dtick: 5,
gridcolor: 'rgb(255, 255, 255)',
gridwidth: 1,
zerolinecolor: 'rgb(255, 255, 255)',
zerolinewidth: 2
},
margin: {
l: 40,
r: 30,
b: 80,
t: 100
},
paper_bgcolor: 'rgb(243, 243, 243)',
plot_bgcolor: 'rgb(243, 243, 243)',
showlegend: false
};
Plotly.newPlot('myDiv', data, layout);
you could add a fixed range to your xaxis in the layout-object.
xaxis:{range: [-1,9]}
To have a more dynamic way you can use the amount of different data, so its dynamic if you have less data (e.g. Top 3 instead Top 9):
xaxis:{range: [-1,data.length]}
I added it to your codepen: http://codepen.io/anon/pen/MbppBN
Hope it helps:-)