I need to add multiple y-axis to my cumulative Nvd3 chart, does anyone know what part of the library's code I'll need to modify?
Even better would be if you have done this yourself and could provide a Jsfiddle.
Any suggestions would be appreciated.
There are only specific chart types that have multi Y-axis functionality.
This isn't available for the Cumulative Line Chart.
It is however available for the Multi-chart.
There is an example on the Angluar NVD3 home page here but it shows the example with bars and lines.
I forked the plunker example from the home page and changed the series types to all line to show you how you could use the multi to achieve the same result as the cumulative line chart.
( I also changed the data set to simplify the example)
Pluker Example
The first thing is to add the options for the multiple axis:
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
transitionDuration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis1: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
},
yAxis2: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
}
}
};
Define your data:
$scope.data = [{key: 'series1', type: "line", yAxis: 1, values:[{x: 10, y: 20}, {x: 20, y: 35}, {x: 30, y:18}]},
{key: 'series2', type: "line", yAxis: 1,values:[{x: 10, y: 12}, {x: 20, y: 26}, {x: 30, y: 15}]},
{key: 'series3', type: "line", yAxis: 2,values:[{x: 10, y: 0.75}, {x: 20, y: 0.9}, {x: 30, y: 0.8}]},
{key: 'series4', type: "line", yAxis: 2,values:[{x: 10, y: 0.2}, {x: 20, y: 0.3}, {x: 30, y: 0.4}]}]
Note the type and yAxis keys are set here against each series.
Set your <div> as normal:
<nvd3 options="options" data="data"></nvd3>
And that's it!
You will get the same chart as you would with a Cumulative Line Chart but the ability to set multiple axis.
If you are referring to adding multiple y axis to single chart that is already available in NVD3 line and bar chart. Partial code snippet shown below.
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) { return '$' + d3.format(',f')(d) });
Related
I want to plot two axis (bar + scatter) on a plotly chart with javascript, but I can't get the zero baseline of the second y-axis to align with the first axis.
Here is the result of the current version:
The Zero-line of the right y-axis (the scatter line) is higher than the zero-line of the left y-axis. I would want to have them on the same height in the plot, basically overlapping.
I create the Plotly object like this:
const trace1 = { x: dates, y: y1, name: 'item', type: 'bar' };
const trace2 = { x: dates, y: y1_cumsum, name: 'Total', yaxis: 'y2', type: 'scatter' };
Plotly.newPlot(MYDIV, [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
I tried to change position in the config, but this does only affect the x-position, not where the y-axis starts. I can't find any suitable attribute in the docs (https://plotly.com/javascript/reference/layout/yaxis/) that would achieve that.
How can I set the position of the second y-axis to be the same as the first one?
Thanks.
Assuming you don't have negative values in your data, you can set layout.yaxis.rangemode = 'tozero'for one or both of your axes.
const trace1 = {
x: [3, 4, 5],
y: [0, 15, 13],
mode: 'markers+lines',
type: 'scatter',
yaxis: 'y2'
};
const trace2 = {
x: [3, 4, 5],
y: [1, 0, 3],
type: 'bar'
};
Plotly.newPlot('myDiv', [trace1,trace2], {
margin: {t: 0},
barmode: 'group',
hovermode: 'x unified',
yaxis: {title: 'item', dtick: 1},
yaxis2: {
title: 'total',
overlaying: 'y',
side: 'right',
rangemode: 'tozero'
},
showlegend: true,
legend: {
x: 0.25,
xanchor: 'right',
y: 1
}
});
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-2.11.1.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
I have created a barchart that works properly the way I want. Right now, I'm trying to add a linegraph to overlap the bars, but when I run the code, the linegraph appears, but the bars disappear. It seems pretty simple to add the linegraph, but for some reason it's not working. I'm not getting any mistakes in console either.
var x_text = ["Comodities","Consumer Discretionary","Utilities",
"Health & Biotech","Global Real Estate","Financials",
"Emerging Market Bonds","Technologies","Industrials",
"Oil & Gas","China Equities","S&P500"];
//
var trace1 = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var trace2 = {
x: x_text,
y: [-0.1,-0.1,2.3,3.3,1.0,0.4,0.9,3.0,-0.1,-1.4,3.0,0.2],
mode: 'lines',
line:{
color:'black'
},
type: 'scatter'
};
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: arrow(),
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv',data,layout);
Oh dam, my trace1 had braces+curly braces around the values, which worked for only the bar, but made it dissappear when the linegraph was called.
From the example of c3.js, a scatterplot is generated by
data: {
x: 'setosa_x',
columns: [
["setosa_x", ...SOME DATA...],
["setosa", ...SOME OTHER DATA...],
],
type: 'scatter'
},
and google and stackoverflow taught me that i can change the radius of bubbles of scatterplot with this manner:
point: {
r: function(d) { // <- d has x, value, and index
return d.x+d.value+d.index;
}
}
in this way, i can access all information (x, value, index) given the data column has only x and value data for changing the radius. But I'd like to append additional data for the radius, and access the data via this radius function r: function(d) {}. Thanks in advance!
Do you mean like this?
var otherData = [17, 11, 4, 8, 12, 34]
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
type: 'scatter',
},
point: {
r: function(d) { return otherData[d.index]; },
}
});
I have a basic plot.ly 3D scatter graph with various paths specified in three dimensions. After three days of reading documentation, I still haven't found a way to define the tick interval of my axes. It seems to be auto-generating them based on my data, which I don't want. In effect, I need my three axes to be in a 1:1:1 ratio, is this possible?
<style>html, body { height: 100%; }</style>
<div id="myDiv" style="width: 100%; height: 100%"></div>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script>
var data = [
{
x: [-886, -719],
y: [-4785, -5192],
z: [527, 501],
type: 'scatter3d'
},
{
x: [-1782, -92],
y: [1740, -5172],
z: [18, 252],
type: 'scatter3d'
},
{
x: [3844, -450],
y: [35, -5185],
z: [20, 219],
type: 'scatter3d'
},
{
x: [2770, 761],
y: [2360, -5122],
z: [246, 96],
type: 'scatter3d'
},
{
x: [3800, 546],
y: [-3419, -5215],
z: [57, 311],
type: 'scatter3d'
},
{
x: [-340, 775],
y: [-3893, -5189],
z: [573, 135],
type: 'scatter3d'
},
{
x: [-3141, -41],
y: [3677, -5205],
z: [18, 383],
type: 'scatter3d'
},
{
x: [19, -546],
y: [261, -5181],
z: [74, 93],
type: 'scatter3d'
},
{
x: [3, 789],
y: [394, -5165],
z: [112, 421],
type: 'scatter3d'
}
];
var layout = {
// height: 700,
// width: 700,
xaxis: {
range: [-5000, 5000]
},
yaxis: {
range: [-5000, 5000]
}
};
Plotly.newPlot('myDiv', data, layout);
</script>
Code demonstration: https://rocket-league-replays.github.io/3d-hitmaps/
I am less familiar with the javascript plotly api, this answer was written with python in mind. Hopefully it also helps in your situation.
If I understand your question properly you want to set the tickmode for the axis, and depending on the mode you pick you also want to set either nticks; tick0 and dticks; or tickvals.
the following is taken from: https://plot.ly/python/reference/#layout-scene-xaxis-tickmode a difficult to effectively search, but very useful page. The javascript version of the page is: https://plot.ly/javascript/reference/#layout-scene-xaxis-tickmode
tickmode (enumerated: "auto" | "linear" | "array" )
Sets the tick mode for this axis. If "auto", the number of ticks is set via nticks. If "linear", the placement of the ticks is determined by a starting position tick0 and a tick step dtick ("linear" is the default value if tick0 and dtick are provided). If "array", the placement of the ticks is set via tickvals and the tick text is ticktext. ("array" is the default value if tickvals is provided).
Again this is for python, but in the scene option there is a way to set the range of the x, y, or z axis using the range(list) option in the xaxis (or yaxis or zaxis) below is an example code.
scene = dict(xaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minX,maxX)),
yaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minY, maxY)),
zaxis=dict(gridcolor='rgb(0, 0, 0)',
zerolinecolor='rgb(0, 0, 0)',
showbackground=False,
range = (minZ, maxZ)))
fig['layout'].update(scene)
here is the documentation: https://plot.ly/python/reference/#layout-xaxis-range and for java https://plot.ly/javascript/reference/#layout-xaxis-range
Yes, sure. That information is possible to be seen in Plotly's documentation on how to format axes for 3d charts.
Code wise, what you want is something like this
var layout = {
scene:{
aspectmode: "manual",
aspectratio: {
x: 1, y: 1, z: 1,
},
xaxis: {
nticks: 100,
range: [-5000, 5000],
},
yaxis: {
nticks: 100,
range: [-5000, 5000],
},
zaxis: {
nticks: 100,
range: [-5000, 5000],
}},
};
I have a Highcharts chart which uses panning: true and sets min and max on the xAxis to provide the initial view together with historical data in the past as part of the data-series.
Initially panning works fine and I can go back in time, nice. However when I pan back to "now", it only allows to pan back to the last data-point, but not back to max, which is set higher on purpose here as I also have plotLines in the chart.
Relevant parts from the JS as follows, see http://jsfiddle.net/centic/efej646r/
There is a line for "Now" and you can pan to the left, but when you pan back to the right, the plotLine does not appear again.
Is there a way I can get this to work or is it a bug/limitation in highcharts?
chart: {
type: 'scatter',
panning: true
},
xAxis: {
type: 'datetime',
min: 1417161437595,
max: 1418435999999,
...
series: [
{
marker: {
enabled: true
},
data: [
{ x: 1410444900022, y: 0},
{ x: 1410786746435, y: 0},
{ x: 1410788673693, y: 0},
{ x: 1410945014300, y: 0},
{ x: 1410945194162, y: 0},
{ x: 1410952366889, y: 0},
{ x: 1410954169041, y: 0},
{ x: 1410966771659, y: 0},
{ x: 1411144973005, y: 0},
{ x: 1411371815266, y: 0},
...
You could add invisible series that will be disabled from mouse tracking.
Example: http://jsfiddle.net/efej646r/2/
Added series:
{data:[{ x: 1418435999999, y: 0}], color: 'rgba(0,0,0,0)',enableMouseTracking:false}