Related
I want to control the legends of different traces all at once for particular range lets say x=0 to x=5. How can we do it?
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var trace3 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {showlegend: true,
legend: {"orientation": "h"}};
Plotly.newPlot('myDiv', data, layout);
For example, when we click a legend, the encircled portion should get hid.
Sample code: Codepen_Sample
Update 2: what if trace(curve) is defined by set of different sub-traces whose ranges of the legends to be controlled are different but trace[name] are same for all the curves. For e.g this is the pseudo code:
for(let i=0; i<5; i++){
initialise trace1;
trace2;
trace3;
}
You can break up each of your three traces into starting and ending segments, then assign the starting segments the same name, same legendgroup, and only display one of these in the legend using the showlegend attribute.
Since plotly.js will make each trace a new color by default, you probably want to make the starting and ending segments of each trace to be the same color. Fixing the xaxis range will avoid having the entire plot resize when you toggle the legend entry.
Here is the javascript and codepen sample:
var trace1_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 3, 6, 4, 5, 2],
type: 'scatter',
marker: {color: 'orange'},
name: 'start',
showlegend: true,
legendgroup: 'start'
};
var trace1_end = {
x: [5, 6, 7, 8],
y: [2, 3, 5, 4],
type: 'scatter',
marker: {color: 'orange'},
name: 'trace1',
};
var trace2_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 4, 7, 8, 3, 6],
marker: {color: 'steelblue'},
type: 'scatter',
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace2_end = {
x: [5, 6, 7, 8],
y: [6, 3, 3, 4],
type: 'scatter',
marker: {color: 'steelblue'}
};
var trace3_start = {
x: [0, 1, 2, 3, 4, 5],
y: [5, 7, 3, 2, 8, 6],
type: 'scatter',
marker: {color: 'forestgreen'},
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace3_end = {
x: [5, 6, 7, 8],
y: [6, 1, 9, 3],
type: 'scatter',
marker: {color: 'forestgreen'}
};
var data = [trace1_start, trace1_end, trace2_start, trace2_end, trace3_start, trace3_end];
var layout = {showlegend: true,
legend: {"orientation": "h"}, xaxis: {"range": [0,8]}};
Plotly.newPlot('myDiv', data, layout);
how can I do something with my columns value in highcharts? I have two values: "total" and "current". Total is always bigger becouse it contains current value. I write some example in js Fiddle:
link to example
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
stack: 'male'
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
}, {
name: 'Jane Total',
data: [8, 5, 9, 8, 9],
stack: 'female'
}, {
name: 'Jane Current',
data: [1, 0, 4, 4, 3],
stack: 'female'
}]
I want to dislplay chart where total value is a maxiumm value of column and current column as a part of total column. In my example in first column of "John Total" should be 8 and have part of "John Current" which is 3. In my code example values is summed and finish value is 11. How can I fix that and got columns like in picture?
This series have maxium values:
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
},
And this series have results as a part of total. How many points John get from Total:
{
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
},
So first column should have max value 8 and include 3 like in picture. Blue column on picture should have 8 becouse we have this in first array and black column should to have 3. How can I acheive this when I have got Maxium value and part of this value In one column?
As per your comment
How can I acheive this when I have got Maxium value and part of this value In one column?
In this case you cannot use
stacking: 'normal'
You have to use overlapping column charts
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4 //added padding to give some spacing between column
},
},
And series with
series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];
here x value represents the position of the column(if you don't define x in series, column will overlap each other)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4
},
},
series: [{
name: 'Jane Total',
data: [{
y: 8,
x: 0.20
}, {
y: 5,
x: 1.20
}, {
y: 9,
x: 2.20
}, {
y: 8,
x: 3.20
}, {
y: 9,
x: 4.20
}, ]
}, {
name: 'Jane Current',
data: [{
y: 1,
x: 0.20
}, {
y: 0,
x: 1.20
}, {
y: 4,
x: 2.20
}, {
y: 4,
x: 3.20
}, {
y: 3,
x: 4.20
}, ]
}, {
name: 'John Total',
data: [8, 9, 4, 7, 6],
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Update as per OP
I want to deliver array with values under variable to data: and I want fill only Y axis without writing {y:array1}, {y:array2} for every value in array
For this you can use array map function to update array of object
$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
Updated fiddle demo
i want to be able to reduce the margin between the yAxis title and the axis numbers, i cant find any property or function in plotly.js documentation mentioning it
an example of the code here
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
name: 'Name of Trace 1',
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
name: 'Name of Trace 2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Plot Title',
xaxis: {
title: 'x Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'y Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
}
};
Plotly.newPlot('myDiv', data, layout);
also here is a codepen link codepen
If someone's searching for this solution , then it's available now , use the 'standoff' property .
Something like this :
var layout = {
margin: {t:0,r:0,b:0,l:20},
xaxis: {
automargin: true,
tickangle: 90,
title: {
text: "Month",
standoff: 20
}},
yaxis: {
automargin: true,
tickangle: 90,
title: {
text: "Temprature",
standoff: 40
}}}
As far as I know you cannot do it directly but you have at least two possibilities, see the discussion here.
Move the axis label directly
document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1
or add an annotation to layout and specify its position
annotations: [
{
x: 0.5,
y: -0.15,
xref: 'paper',
yref: 'paper',
text: 'I am not an axis label',
showarrow: false,
}
]
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
name: 'Name of Trace 1',
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [1, 0, 3, 2, 5, 4, 7, 6, 8],
name: 'Name of Trace 2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Plot Title',
xaxis: {
title: 'x Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
yaxis: {
title: 'y Axis',
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f'
}
},
annotations: [
{
x: 0.5,
y: -0.15,
xref: 'paper',
yref: 'paper',
text: 'I am not an axis label',
showarrow: false,
}
]
};
Plotly.newPlot('myDiv', data, layout);
document.getElementsByClassName('ytitle')[0].y.baseVal[0].value *= 1.1
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 100%; height: 500px;"></div>
my line graph is not displaying decimal values instead it is rounding off the decimal values on y axis
var line1 = new RGraph.Line({
id: 'cvs',
data: [
[5.85, 5.86, 5.87, 5.88, 5.89, 5.90, 5.91, 5.92, 5.93, 5.94]
],
options: {
linewidth: 1,
backgroundGrid: false,
title: 'X-Chart',
colors: ['red'],
fillstyle: 'rgba(255,0,0,0.2)',
ymin: 5.75,
ymax: 6,
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
scale: 0.2,
textAccessible: true
}
}).draw();
thank you
You should add the scaleDecimals option to your configuration:
...
scaleDecimals: 2,
...
There's an example of it in a demo called line-us-prison-population.html and you can see that by downloading the RGraph archive here:
https://www.rgraph.net/download.html#stable
I am not sure if this is a bug. Take the case of multi series drill down. After a legend item has been clicked, the series for the item is hidden and then we drill down. From here, if one drills up then it should go to last active state, i.e. multi series but with one series hidden. Instead of going to last active state, drill up goes to initial series data.
To reproduce, please goto this fiddle. Reproducible steps below the code.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
});
Click on any legend item, say '2010'. It will hide the corresponding columns.
Drill down any xAxis category, say 'Republicans'. This will only show the chart for Republicans across for directions.
Click drillUpButton (Back to 2014). This will show the chart for both 2010 and 2014. Instead it should have shown only for 2014.