Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
​
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<title>Plotly test</title>
</head>
<body>
<p> So this is what we want for instance (This example with one x axis which has both T and 1000/T together (separated with a break character)) This works because all points are equally spaced on the number line (so plotly spaces them equally as strings) </p><br>
<div id="plotly1">
</div>
<p>However, I am not using equally spaced points, and I am trying to add differently sized functions. So, this is what happens if we have two or more sets of data with different increment values. As you can see there is a change of slope (which does not appear in the example code) and a misplaced 1.5 value.</p>
<div id="plotly2">
</div>
<p>So instead we want to try numbers (not strings)(works better), But with two axes perhaps? The issue being that the x axes move independantly This can cause confusion, as those values must be related, but the relation isn't shown. </p>
<div id="plotly3">
</div>
<p>Another solution I have tried, involves changing all of the tick values this works well, except that I cannot hide some of the values (and when we are talking about 80+ values it becomes very busy, but if I could show those values, and hide some of them (while keeping the information on hover it would be an acceptable alternative)) However the hiding all of them solution is unideal.
<div id="plotly4">
</div>
<script type="text/javascript">
var yrange = [0,1];
var layout = {
    xaxis: {
        title: 'xvalues',
        autorange: true,
        nticks: 4
    },
    showlegend:true,
    yaxis: {
        title: 'yvalues',
        range:yrange,
            autorange : true},
    width: 800,
    height: 800
};
var layout_2 = {
    xaxis: {
        title: 'xvalues',
        autorange: true,
        nticks: 4
    },
    xaxis2:{
        overlaying:"x",
        side:"top",
        anchor:"y"
    },
    showlegend:true,
    yaxis: {
        title: 'yvalues',
        range:yrange,
            autorange : true},
    width: 800,
    height: 800
};
var layout_3 = {
  xaxis: {
        title: 'xvalues',
        autorange: true,
        tickvals:[0,0.5,1,1.5,2,3,4,5,6,7,8,9,10],
        ticktext:['0<br>inf','0.5<br>2000','1<br>1000','1.5<br><br>666.7','2<br>500','3<br>333.3','4<br>250','5<br>200','6<br>166.7','7<br>142.9','8<br>125','9<br>111.1','10<br>100']
    },
    showlegend:true,
    yaxis: {
        title: 'yvalues',
        range:yrange,
            autorange : true},
    width: 800,
    height: 800
};
 
var data_1 = new Array();
var data_2 = new Array();
var data_3 = new Array();
var data_4 = new Array();
Plotly.newPlot('plotly1',data_1,layout);
Plotly.newPlot('plotly2',data_2,layout);
Plotly.newPlot('plotly3',data_3,layout_2);
Plotly.newPlot('plotly4', data_4,layout_3);
//this is our "normal trace"
var trace_0 = { type: 'scatter',
    x: ['0<br>inf','1<br>1000','2<br>500','3<br>333.3','4<br>250','5<br>200','6<br>166.7','7<br>142.9','8<br>125','9<br>111.1','10<br>100'],
    y: [0,1,2,3,4,5,6,7,8,9,10],
    mode: 'lines',
    name: 'increment1',
    line:{
        width: 3
    }
};
var trace_1 = { type: 'scatter',
    x: ['0<br>inf','0.5<br>2000','1<br>1000','2<br>500','3<br>333.3','4<br>250','5<br>200','6<br>166.7','7<br>142.9','8<br>125','9<br>111.1','10<br>100'],
    y: [0,0.5,1,2,3,4,5,6,7,8,9,10],
    mode: 'lines',
    name: 'increment1',
    line:{
        width: 3
    }
};
//Oh this one has odd increments
var trace_2 = { type: 'scatter',
    x: ['0<br>inf','1<br>1000','1.5<br>666.7','2<br>500','3<br>333.3','4<br>250','5<br>200','6<br>166.7','7<br>142.9','8<br>125','9<br>111.1','10<br>100'],
    y: [0,1,1.5,2,3,4,5,6,7,8,9,10],
    mode: 'lines',
    name: 'increment2',
    line:{
        width: 3
    }
};
var trace_3 = {
    x: [0,0.5,1,2,3,4,5,6,7,8,9,10],
    y: [0,0.5,1,2,3,4,5,6,7,8,9,10],
    mode: 'lines',
    name: 'increment3',
    line:{
        width: 3
    }
};
var trace_4 = {
    x: [0,1,1.5,2,3,4,5,6,7,8,9,10],
    y: [0,1,1.5,2,3,4,5,6,7,8,9,10],
    mode: 'lines',
    name: 'increment4',
    line:{
        width: 3
    }
};
Plotly.addTraces('plotly1',trace_0);
Plotly.addTraces('plotly2',trace_1);
Plotly.addTraces('plotly2',trace_2);
Plotly.addTraces('plotly3',trace_3);
Plotly.addTraces('plotly3',trace_4);
Plotly.addTraces('plotly4',trace_3);
Plotly.addTraces('plotly4',trace_4);
</script>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
HungryGeneralpro
0viewers