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.

Highcharts, How to remove gaps on x coordinates

For a Highcharts spline type chart, I want to completely remove the left and right spaces.
I tried to change some options but there is no success.
Spacing and margin keys did not make any appearance changes.
Does anyone have any info on how to remove the spaces, all help is welcome.
Example chart
Highcharts.chart('container', {
title: {
text: ''
},
chart: {
type: 'spline',
},
legend: {
display: false
},
xAxis: {
categories: [7, 13, 16, 18, 19, 20, 29, 22, 25, 38, 23, 26, 28, 29, 33],
},
yAxis: {
tickPosition: 'inside',
min: 0,
title: {
text: null
},
floor: 0,
tickWidth: 1
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

These gaps are added when using the xAxis.categories option. If you remove these options then it works the way you want. For tick positioning in this case it is better to set other available API options. Find out more about it here: https://api.highcharts.com/highcharts/xAxis.tickPositions

Set color of Radar Graph markers

I have created the following radar chart using this code. Codepen
data = [{
type: 'scatterpolar',
r: [39, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself'
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
Which results in this:
How can I set the color of each of the dots shaping the polygon?
With this tool, online graph maker, it seems you can set the colors on a scale, but I would like to set each on of the dots separately,
Any direction to how to customize the rest of the elements will be very helpful.
Thanks.

#myDiv path.point{
fill: blue !important;
}
And if you want to further customize the colors you can use CSS :nth-of-type(n) modifier https://www.w3schools.com/cssref/sel_nth-of-type.asp
data = [{
type: 'scatterpolar',
r: [37, 28, 8, 7, 28, 39],
theta: ['A','B','C', 'D', 'E', 'A'],
fill: 'toself',
marker : { color : '#B80102'}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 50]
}
},
showlegend: false
}
Plotly.newPlot("myDiv", data, layout)
#myDiv path.point{
fill: blue !important;
}
<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>

There are ton of possible configurations, and exploring you can get a an idea of any possible setup you might think of. Plotly is truly amazing.
For the configuration I was trying to do this is the configuration:
You can try it on the codepen
data = [{
type: 'scatterpolar',
mode : "markers+lines",
line : {
color : "rgb(158, 27, 66)",
width : "2",
dash : "solid",
shape : "linear"
},
r: [5, 1, 3, 2, 4, 3, 3, 2, 4, 3, 2, 3, 3, 2, 4, 2, 2],
theta: ['Tecnologia','Innovacion','Optimismo Digital', 'Transformador', 'Atracc. y desarrollo de talento', 'Referente', 'Etica y honestidad',
'Personas', 'Aprendizaje Continuo','Promocion del aprendizaje', 'Emprendedor', 'Escucha', 'Comunica y comparte', 'Mejora continua',
'Base tecnica y rigor', 'Logro', 'Crecimiento rentable' ],
fill: 'toself',
fillcolor: 'rgba(255, 0, 0, 0.6)',
marker : { color : [8, 8, 8, 2, 2, 6, 6, 6, 4, 4, 4, 5, 5, 5, 3, 3, 3 ],
colorscale : [
[0, '#38C041'], [0.125, '#DDD01B'], [0.25, '#c7e9b4'], [0.375, '#7fcdbb'], [0.5, '#41b6c4'], [0.625, '#1d91c0'], [0.75, '#225ea8'], [0.875, '#253494'],[1, '#081d58']
],
size : 10
}
}]
layout = {
polar: {
radialaxis: {
visible: true,
range: [0, 7]
}
},
showlegend: false,
width: 800,
height: 700,
margin:{
l : 0,
r : 0,
t : 100,
b : 0,
pad : 0,
autoexpand : true
}
}

How to generate more than 1 sparkline with Vuetify sparkline component?

Vuetify has a sparkline component that can be used to create simple graphs.
https://vuetifyjs.com/en/components/sparklines
I can't figure out how to add more than one sparkline in the same graph. Something like adding a second list of values to the component.
If there's no way, maybe some of you know a more suited graph tool that I could use with Vue.
<template>
<v-sparkline
:value="value"
:gradient="gradient"
:smooth="radius || false"
:padding="padding"
:line-width="width"
:stroke-linecap="lineCap"
:gradient-direction="gradientDirection"
:fill="fill"
:type="type"
:auto-line-width="autoLineWidth"
auto-draw
></v-sparkline>
</template>
<script>
const gradients = [
['#222'],
['#42b3f4'],
['red', 'orange', 'yellow'],
['purple', 'violet'],
['#00c6ff', '#F0F', '#FF0'],
['#f72047', '#ffd200', '#1feaea'],
]
export default {
data: () => ({
width: 2,
radius: 10,
padding: 8,
lineCap: 'round',
gradient: gradients[5],
value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
gradientDirection: 'top',
gradients,
fill: false,
type: 'trend',
autoLineWidth: false,
}),
}
</script>

In the code below, the first sparkline is attached normally to the v-sheet, while the second is stacked on top of the first sparkline.
<template>
<v-sheet class="stackSheet" color="white">
<v-sparkline
:value="value1"
color="blue"
line-width="3"
padding="10"
></v-sparkline>
<v-sparkline
class="stackSpark"
:value="value2"
color="red"
line-width="3"
padding="10"
></v-sparkline>
</v-sheet>
</template>
<script>
export default {
data: () => ({
value1: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
value2: [7, 4, 7, 2, 9, 0, 1, 2, 4, 7, 7, 10, 1, 3, 5],
}),
}
</script>
<style lang="css" scoped>
.stackSheet {
position: relative;
}
.stackSpark {
position: absolute;
top: 0;
left: 0;
}
</style>

Kendo Dataviz charts - Adding a shape as a point on a bar chart

I've got a chart with 2 series - one is a line series, and another is a bar series.
I need to add a marker to a point on the chart as a 3rd series but can't find a way of doing it. Current code:
$("#lowerDayschart").kendoChart({
width: "200px",
height: "190px",
title: {
text: "Title"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "column"
},
series: [
{
name: "My Name",
data: [1, 2, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 4, 4, 3, 2, 1],
gap: 0,
spacing: 0,
type: "column",
YAxisType: 'primary'
}, {
data: [1, 2, 3, 4, 4, 4, 5, 5, 5, 5, 4, 4, 4, 4, 3, 2, 1],
gap: 0,
spacing: 0,
type: "line",
markers: {
visible: false
},
YAxisType: 'secondary'
}],
valueAxis: {
line: {
visible: false
}
},
categoryAxis: {
categories: ["-8", "", "", "", "", "", "", "", "0", "", "", "", "", "", "", "", "8"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
format: "{0}"
}
});
Chart at the moment:
Chart as I'd like it: