We Keep Coding

Have Plotly Load Automatically onto a Webpage

I am using plotly to display graphs on a page for a course that I am developing. I can create the graphs when student's click on a button using the code below:
if($('#lesson1AssignmentGraphButton').length){
$('#lesson11AssignmentGraphButton').click (function (){
if($("#lesson15AssignmentGraph").html() === "") {
create plotly graph
}
});
}
Is there a way to have the graph automatically be added to the webpage (html document) without the user having to click on a button?
Edit:
Thank you testing testing_22. I tried your code but was not successful. For Bas van der Linden comment, I completely agree. However, I seem to always have difficulty with having the graph show on the page. An example code that I use on my page is
if($('#lesson11StudentScatterButton').length){
$('#lesson11StudentScatterButton').click (function (){
if($("#lesson11StudentScatterGraph").html() === "") {
let trace1 = {
x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
mode: 'markers',
type: 'scatter'
};
let layout = {
autosize: true,
margin: {
l: 50,
r: 10,
b: 40,
t: 40,
pad: 5
},
title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
xaxis: {
title: 'Number of Cups of Coffee',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
yaxis: {
title: 'Hours of Sleep',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
plot_bgcolor:"#f8f1f1",
paper_bgcolor:"#f8f1f1"
};
let data = [trace1];
let config = {
showSendToCloud: true,
displayModeBar: false, // this is the line that hides the bar
scrollZoom: false,
responsive: true
}
Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
$("#lesson11StudentScatterButton").html("Hide Graph");
$("#lesson11StudentScatterButton").removeClass("createQuestionsButton").addClass("checkAnswerButton");
} else {
document.getElementById("lesson11StudentScatterGraph").innerHTML = "";
$("#lesson11StudentScatterButton").html("Scatter Plot");
$("#lesson11StudentScatterButton").removeClass("checkAnswerButton").addClass("createQuestionsButton");
};
});
}
When I have a student click on button, the graph shows up fine and with no issues. When I try to remove the click event and have the graph show directly up on the page
$( document ).ready(function() {
if($("#lesson11StudentScatterGraph").html() === "") {
let trace1 = {
x: [1, 5, 5, 8.5, 4, 7, 9, 1, 7],
y: [9, 6, 5, 2, 4, 2, 3, 7, 5],
mode: 'markers',
type: 'scatter'
};
let layout = {
autosize: true,
margin: {
l: 50,
r: 10,
b: 40,
t: 40,
pad: 5
},
title: 'Number of Cups of Coffee vs<br />Hours of Sleep',
xaxis: {
title: 'Number of Cups of Coffee',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
yaxis: {
title: 'Hours of Sleep',
showgrid: true,
zeroline: true,
showline: false,
range: [0, 10]
},
plot_bgcolor:"#f8f1f1",
paper_bgcolor:"#f8f1f1"
};
let data = [trace1];
let config = {
showSendToCloud: true,
displayModeBar: false, // this is the line that hides the bar
scrollZoom: false,
responsive: true
}
Plotly.newPlot('lesson11StudentScatterGraph', data, layout, config);
}
});
The graph will not load on the page. When I check the console, it does not show any errors. I am sure there is a simple method to do this but it escapes me at the moment.

Chart.js Line Graph: Start a line in the middle of a graph

I'm wondering if it is possible to have a graph with multiple lines, but I want one of the lines to start from the middle of the graph, while the rest of the lines still start from all the way at the left. Is this possible? It'd look like this:
The green line is what I am talking about, whether it would be possible for a dataset to start from not all the way at the left

Yes this is possible, you can achieve this in 2 ways, 1 is to specify each datapoint using its x and y coordinate another one is to place some null values in the start of your data array:
var options = {
type: 'line',
data: {
labels: [1, 2, 3, 4, 5, 6],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
},
{
label: '# of Points',
data: [{
x: 3,
y: 6
}, {
x: 4,
y: 8
}, {
x: 5,
y: 2
}, {
x: 6,
y: 12
}],
borderColor: 'orange'
},
{
label: '# of Points2',
data: [null, null, null, 9, 13, 15],
borderColor: 'lightblue'
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}
}]
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

You can quickly do this with offset option.
Example:
const options = {
...otherChartOptions,
scales: {
x: {
offset: true
},
y: {
offset: true
}
}
};
Reference: https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

plotly manually set a onesided range

In plotly the axis range can be set manually with yaxis: {range: [0,10]}
e.g. https://codepen.io/plotly/pen/YXbwyo.
However, how can I set only the lower limit manually to 0, while the upper limit should autoscale?

You can set the parameters rangemode:'tozero' and autorange:true in the layout.
I modified the traces in your codepen to not include the points where x=0 and the lower limit of the range is indeed 0 while the upper limit autoscales to the largest x- and y-values.
var trace1 = {
x: [1, 2, 3, 4, 5, 6, 7, 8],
y: [7, 6, 5, 4, 3, 2, 1, 0],
type: 'scatter'
};
var trace2 = {
x: [1, 2, 3, 4, 5, 6, 7, 8],
y: [1, 2, 3, 4, 5, 6, 7, 8],
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
xaxis: {rangemode: 'tozero',
autorange: true},
yaxis: {rangemode: 'tozero',
autorange: true},
};
Plotly.newPlot('myDiv', data, layout, {showSendToCloud: true});

Can i create even spacing between uneven plot points in chart js?

While plotting a chart in chart js with y axes steps like 0 573 675 900. When i plot it the spacing is between adjacent points are. can i bring the points evenly spaced?
Consider the image
chart
In this image i want the number 7 to appear exactly in the middle and the chart to scale between 1 and 7 and also 7 and 10 accordingly.
Following is a sample code iam working on:
////////////////////////////////////////////////////////
document.addEventListener("DOMContentLoaded", function() {
var
example = document.getElementById('example1'),
hot;
var headers = ["Red", "Blue", "Yellow", "Green", "Purple", "Orange", "Pink", 'Brown'];
var myData = [
[5, 10, 3, 5, 2, 3, 5, 1],
[9, 9, 3, 10, 8, 7, 7, 2],
[5, 1, 10, 6, 7, 9, 4, 8]
];
var StepValues = [1,7,10];
var rowheaders = ['Mark', 'Anna', 'Diana']
hot = new Handsontable(example, {
data: myData,
rowHeaders: rowheaders,
colHeaders: headers,
readOnly: true,
colWidths: 88,
licenseKey: 'non-commercial-and-evaluation',
fillHandle: {
autoInsertRow: false,
}
});
var options = {
type: 'bar',
data: {
labels: headers,
datasets: [{
label: rowheaders[0],
data: myData[0],
borderWidth: 1,
backgroundColor: 'rgb(255, 236, 217)'
}, {
label: rowheaders[1],
data: myData[1],
borderWidth: 1,
backgroundColor: 'rgb(235, 224, 255)'
}, {
label: rowheaders[2],
data: myData[2],
borderWidth: 1,
backgroundColor: 'rgb(219, 242, 242)'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
reverse: false,
callback: (label) =>{
if(StepValues.includes(label)){
return label;
}
}
}
}]
}
}
}
var ctx = document.querySelector('.chartJSContainer').getContext('2d');
var myChart = new Chart(ctx, options);
});
//////////////////////////////////////////////////////////////////

How do I move Plotly.js legend off second y axis

Plotly.js defaults to have the legend covering the second y axis. Here is their own code pen example of it happening:
https://codepen.io/plotly/pen/36d6c70e8fa17e471fa68788abbed90f
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {title: 'yaxis title'},
yaxis2: {
title: 'yaxis2 title',
titlefont: {color: 'rgb(148, 103, 189)'},
tickfont: {color: 'rgb(148, 103, 189)'},
overlaying: 'y',
side: 'right'
}
};
Plotly.newPlot('myDiv', data, layout);
I cannot get the legend to move more to the right. I have tried adjusting the margin/padding on the plot, the x position of the legend, the margin/padding on the legend, the overall size of the div, and the orientation of the legend.
On the topic of legend orientation, I could potentially put the legend below the plot to solve this problem. However, I am also having trouble implementing that. Here is my legend layout code:
legend: {orientation: 'h',
y: -0.17,
x: 0,
font: {
family:'Roboto',
size: 10,
color: 'rgb(54, 54, 54)'}
},
and here is what my graph looks like:
Clearly there is a lot of code missing here and this isn't a working example of the problem, but the orientation is not changing to horizontal.

What about placing it under the plot? Also you can adjust it's position with changing the x and y values inside the legend property.
var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: 'yaxis data',
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: 'yaxis2 data',
yaxis: 'y2',
type: 'scatter'
};
var data = [trace1, trace2];
var layout = {
title: 'Double Y Axis Example',
yaxis: {
title: 'yaxis title'
},
yaxis2: {
title: 'yaxis2 title',
titlefont: {
color: 'rgb(148, 103, 189)'
},
tickfont: {
color: 'rgb(148, 103, 189)'
},
overlaying: 'y',
side: 'right'
},
legend: {
y: 1,
x: 1.1,
bgcolor: 'transparent',
}
};
Plotly.newPlot('myDiv', data, layout);
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv" style="width: 480px; height: 400px;">
<!-- Plotly chart will be drawn inside this DIV -->
</div>
<script>
<!-- JAVASCRIPT CODE GOES HERE -->
</script>
</body>

I have the same issue with most of their documentation as well - they tell you what the property is for, but not what the acceptable values for the property are and what each one does. You can set the legend to be horizontal by doing the following:
layout:{
orientation: "h"
}