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);
As shown in codepen below, text value for trace 1 is being trimmed as it is close to chart border.
Need to show these numbers above everything else. Have tried setting z-index. Didn't worked.
https://codepen.io/satishvarada/pen/yLVoqqo
var trace1 = {
x: [1, 2, 3, 4],
y: [16, 16, 16, 16],
type: 'scatter',
text:[16, 16, 16, 16],
textposition:'top',
mode:'lines+markers+text'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode:'lines+markers+text'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
I'm not a plotly user, but here is my try:
The problem:
Plotly has a default height of 450px and it also uses some default values regarding its layout settings which can be found at the documentation here. Since you are trying to plot something with smaller height (350px), you can adjust a little bit the default layout values to make the text fit better. Below, I have just set smaller margin values, for example 40 instead of 80,80,80,100 which are the defaults and it seems to work.
Solution:
var layout = {
autosize: true,
height: 350,
margin: {
l: 40,
r: 40,
b: 40,
t: 40,
pad: 0
},
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);
(notice that I set the height at the layout object and I have removed it from the style property of your div)
Working example:
var trace1 = {
x: [1, 2, 3, 4],
y: [16, 16, 16, 16],
type: 'scatter',
text:[16, 16, 16, 16],
textposition:'top',
mode:'lines+markers+text'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode:'lines+markers+text'
};
var data = [trace1, trace2];
// var data = [trace1];
var layout = {
autosize: true,
height: 350,
margin: {
l: 40,
r: 40,
b: 40,
t: 40,
pad: 0
},
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);
<head>
<!-- Load plotly.js into the DOM -->
<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>
try this.
.plot { clip-path: none; }
So, the problem and question is in title. I just can't find a way, to disable the tooltips, that appear on the axis on hover. Maybe I'm missing something? Thanks in advance!
You can set hoverinfo to show only the information you are interested in.
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [10, 15, 13, 17, 8],
type: 'scatter',
hoverinfo: 'y'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
hoverinfo: 'x+y'
};
var trace3 = {
x: [0, 2, 3, 4],
y: [16, 4, 12, 7],
type: 'scatter',
hoverinfo: 'all'
};
var data = [trace1, trace2, trace3];
Plotly.newPlot('myDiv', data, {});
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
Here is the picture of my problem. As you can see, my modebar is appearing as a grouped set of icons and is placing it over the legend. I just copy and pasted some example code from their site using example data. I have no other css affecting this at all. Below is the blob of code I am using.
The similar post here shows what it SHOULD look like, they are all in a single row and out of the way of the legend.
How do I make my modebar look like the one in the second link?
<div id="myDiv"></div>
<script>
var trace1 = {
x: [0, 1, 2],
y: [10, 11, 12],
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [100, 110, 120],
yaxis: 'y2',
type: 'scatter'
};
var trace3 = {
x: [3, 4, 5],
y: [1000, 1100, 1200],
yaxis: 'y3',
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {
yaxis: {domain: [0, 0.33]},
legend: {traceorder: 'reversed'},
yaxis2: {domain: [0.33, 0.66]},
yaxis3: {domain: [0.66, 1]}
};
Plotly.newPlot('myDiv', data, layout, {displaylogo: false});
</script>
Official "answer" for acceptance: this is usually due to external CSS.
I am using Gooble Material ScatterChart (since I need dual-Y chart). So I load it with:
google.load('visualization', '1.1', {packages: ['scatter']});
But now it seems that it is impossible to set lineWidth and PointSize options of such charts. Seems that it does not affect anything:
var options = {
width: 900,
height: 500,
}
What am I doing wrong? Documentation (https://google-developers.appspot.com/chart/interactive/docs/gallery/scatterchart#configuration-options) says there are these properties for ScatterChart. No refinement is given for Material chart. But I do not see any affect and no errors are thrown.
Here is the full code of JS function and a piece of HTML. I have commented out non-Material test portion of code, which is working fine.
1: https://github.com/leoKiddy/google_charts/blob/master/dual-Y_Scatter_PointSize.html "link to GitHub".
Indeed, it seems pointSize & lineWidth properties could not be applied to google.charts.Scatter object.
But you could consider the following approach for adjusting the chart.
As an alternative for pointSize property,the point size could be specified via CSS:
#chart_div circle {
r: 3;
}
Regarding lineWidth property, points could be connected using line element once the chart is generated as demonstrated below.
Complete example
google.load('visualization', '1.1', { packages: ['scatter'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Student ID');
data.addColumn('number', 'Hours Studied');
data.addColumn('number', 'Final');
data.addRows([
[0, 0, 67], [1, 1, 88], [2, 2, 77],
[3, 3, 93], [4, 4, 85], [5, 5, 91],
[6, 6, 71], [7, 7, 78], [8, 8, 93],
[9, 9, 80], [10, 10, 82], [11, 0, 75],
[12, 5, 80], [13, 3, 90], [14, 1, 72],
[15, 5, 75], [16, 6, 68], [17, 7, 98],
[18, 3, 82], [19, 9, 94], [20, 2, 79],
[21, 2, 95], [22, 2, 86], [23, 3, 67],
[24, 4, 60], [25, 2, 80], [26, 6, 92],
[27, 2, 81], [28, 8, 79], [29, 9, 83]
]);
var options = {
chart: {
title: 'Students\' Final Grades',
subtitle: 'based on hours studied'
},
width: 900,
height: 500,
axes: {
y: {
'hours studied': { label: 'Hours Studied' },
'final grade': { label: 'Final Exam Grade' }
}
},
series: {
0: { axis: 'hours studied' },
1: { axis: 'final grade' }
},
//pointSize: 10,
//lineWidth: 1
};
var chart = new google.charts.Scatter(document.getElementById('chart_div'));
chart.draw(data, google.charts.Scatter.convertOptions(options));
google.visualization.events.addListener(chart, 'ready', configureChart);
}
function configureChart()
{
var chartContainer = document.getElementById('chart_div');
var options = {
pointSize: 3,
lineWidth: 1
};
drawLines(chartContainer,options);
}
function drawLines(chartContainer,options)
{
var points = chartContainer.getElementsByTagName('circle');
var area = {};
for(var i = 0; i < points.length;i++){
if(i > 0){
area.start = {'x': points[i-1].getAttribute('cx'), 'y': points[i-1].getAttribute('cy')};
area.end = {'x': points[i].getAttribute('cx'), 'y': points[i].getAttribute('cy')};
if(points[i].getAttribute('fill') == points[i-1].getAttribute('fill'))
drawLine(chartContainer,area,points[i].getAttribute('fill'),'1');
}
}
}
function drawLine(chartContainer,area,color,width)
{
var line = document.createElementNS('http://www.w3.org/2000/svg','line');
line.setAttribute('x1',area.start.x);
line.setAttribute('y1',area.start.y);
line.setAttribute('x2',area.end.x);
line.setAttribute('y2',area.end.y);
line.setAttribute('stroke-width',width);
line.setAttribute('stroke',color);
var svg = chartContainer.getElementsByTagName('svg')[0];
svg.appendChild(line);
}
#chart_div circle {
r: 3;
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>