Have Plotly Load Automatically onto a Webpage - javascript

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.

Related

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);
});
//////////////////////////////////////////////////////////////////

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 do I create a chart with rounded corners?

I have created a Chartist line chart and I want to make the corners of the chart rounded like in the image bellow:
Where do I need to set up the attribute or is even possible to make it looking like I want ?
new Chartist.Line('#dashboardChartStats1', {
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[5, 6, 7, 4, 7, 6, 5]
]
}, {
low: 0,
high: 10,
showArea: true,
fullWidth: true,
axisX: {
offset: 0,
showLabel: false
},
axisY: {
offset: 0,
showGrid: false,
showLabel: false
},
lineSmooth: Chartist.Interpolation.cardinal({
tension: 1,
fillHoles: false
})
});
It is doable with border-radius;
svg {
border-radius: 50%;
}
though it does looks a bit ugly, but you can fiddle with it; fiddle here
There is no way to do this via the controls of the chart library. Maybe some css magic can make it better, but I am all out of mana. 🧙
Also embedded below;
new Chartist.Line('.container', {
labels: [1, 2, 3, 4, 5, 6, 7],
series: [
[5, 6, 7, 4, 7, 6, 5]
]
}, {
low: 0,
high: 10,
showArea: true,
fullWidth: true,
axisX: {
offset: 0,
showLabel: false
},
axisY: {
offset: 0,
showGrid: false,
showLabel: false
},
lineSmooth: Chartist.Interpolation.cardinal({
tension: 1,
fillHoles: false
})
});
.container {
width: 300px;
height: 300px;
}
svg {
border-radius: 50%;
}
<script src="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.js"></script>
<link href="https://rawgit.com/gionkunz/chartist-js/master/dist/chartist.min.css" rel="stylesheet"/>
<div class="container"></div>

I can't get my pointLabels to work with my jqplot

I have a graph with 4 different lines plotted using jqplot. I don't really want to create a legend so I wanted to label each line. I saw that there's a feature called pointLabels however, my labels aren't showing.
//function for the line graph
$(document).ready(function () {
var yticks = ['Early Definition', 'Pre Alpha', 'Alpha', 'Beta', 'PV', 'Sprint To Launch'];
var line1 = [[0, 1, null], [10.4, 2, null], [20.8, 3, null], [31.2, 4, null], [41.6, 5, 'FFD'], [52, 6, null]];
var line2 = [[0, 1, null], [10.4, 1, null], [20.8, 2, null], [31.2, 3, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var line3 = [[0, 1, null], [10.4, 2, null], [20.8, 4, null], [31.2, 5, null], [41.6, 6, 'Customer 1']];
var line4 = [[0, 1, null], [10.4, 1, null], [20.8, 1, null], [31.2, 1, null], [41.6, 4, 'Customer 1'], [52, 5, null]];
var plot3 = $.jqplot('linegraph', [line1, line2, line3, line4],
{
title: 'All Companies',
// Series options are specified as an array of objects, one object
// for each series.
series: [
{
// Change our line width and use a diamond shaped marker.
lineWidth: 4,
markerOptions: { style: 'dimaond' },
//color: '#FFFFFF'
},
{
// Don't show a line, just show markers.
// Make the markers 7 pixels with an 'x' style
lineWidth: 4,
markerOptions: { size: 7, style: "x" }
},
{
// Use (open) circlular markers.
lineWidth: 4,
markerOptions: { style: "filledCircle" }
},
{
// Use a thicker, 5 pixel line and 10 pixel
// filled square markers.
lineWidth: 4,
markerOptions: { style: "filledSquare", size: 10 }
},
{
pointLabels: { show: true, location: 's', ypadding: 3 }
},
],
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
label: 'Work Weeks',
max: 55,
min: 0,
tickOptions: {
formatString: '%.0f',
},
},
yaxis: {
label: 'Phases',
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yticks
}
},
}
);
});
I've made sure that I've included the script for the pointLabels too:
<script type="text/javascript" src="plugins/jqplot.pointLabels.js"></script>
You should move the point label options outside of the series array and into a seriesDefaults section:
seriesDefaults: {
pointLabels: { show: true, location: 's', ypadding: 3 }
}
Updated fiddle here:
http://jsfiddle.net/R6sFn/3/

jqPlot data point gets cut off

I am trying to create a chart using jqPlot where it shows the data for each hour.
This is working fine, but as you can see in the jsfiddle, it doesn't show the first and last data point correctly. It cuts some of the circle off.
I am using this code:
$(document).ready(function () {
var line1 = [
['08:00', 4],
['09:00', 10],
['10:00', 2],
['11:00', 12],
['12:00', 5],
['13:00', 3],
['14:00', 40],
['15:00', 2],
['16:00', 20],
['17:00', 7]
];
var plot1 = $.jqplot('chart1', [line1], {
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H:%M'
},
tickInterval: '1 hour',
min: '08:00',
max: '17:00'
},
yaxis: {
min: 0
}
},
seriesColors: ["#996325"],
seriesDefaults: {
markerOptions: {
show: true,
style: 'circle', // circle, diamond, square, filledCircle. filledDiamond or filledSquare.
color: 'white',
lineWidth: 4,
size: 12,
shadow: true
}
},
grid: {
background: '#365463',
gridLineColor: 'grey'
}
});
});
jsFiddle
What am I doing wrong ? :(
You can modify your min and max values of your xaxis in order to see the full circle of your first and last points.
xaxis:{
min: '07:45',
max: '17:15'
}
See example here

Categories