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/
Related
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.
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
}
}
Actually, I was trying to create a heatmap which will show each task time taken to execute in a heatmap.
So basically x-axis will have time in datetime format.y-axis will have each task name and every point will have value which is the time taken to execute the task.
In simple i have formatted my json where data is coming in format
[{datetime,stage name,value}]
So my xCategory will look like
xCategory=[1527657415000,..some datetime]
my yCategory is
yCategories=["Stage"...]
and series.data=[[0,0,12],[0,1,12]..]
My chart
var chart = new Highcharts.Chart('chart', {
chart: {
type: 'heatmap'
},
xAxis: {
// categories: xCategories,
type: 'datetime',
dateTimeLabelFormats:
{
month: '%e. %b',
year: '%b'
},
},
yAxis: {
// categories: yCategories
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: series
});
But it is not coming up properly.
In heatmap chart type each point occupies the same space, so value data can be only represented by color or by label. If you use datetime xAxis type, you must remember to set right colsize property.
Highcharts.chart('container', {
chart: {
type: 'heatmap',
plotBorderWidth: 1
},
xAxis: {
type: 'datetime'
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
series: [{
name: 'Sales per employee',
borderWidth: 1,
colsize: 60 * 60 * 1000,
data: [
[1527657415000, 0, 10],
[1527657415000, 1, 19],
[1527657415000, 2, 8],
[1527657415000, 3, 24],
[1527657415000, 4, 67],
[1527661015000, 0, 92],
[1527661015000, 1, 58],
[1527661015000, 2, 78],
[1527661015000, 3, 117],
[1527661015000, 4, 48],
[1527661015000, 0, 35],
[1527661015000, 1, 15],
[1527661015000, 2, 123],
[1527661015000, 3, 64],
[1527661015000, 4, 52],
[1527664615000, 0, 72],
[1527664615000, 1, 132],
[1527664615000, 2, 114],
[1527664615000, 3, 19],
[1527664615000, 4, 16]
],
dataLabels: {
enabled: true,
color: '#000000'
}
}]
});
Live demo: https://jsfiddle.net/BlackLabel/zhxyerd1/
API: https://api.highcharts.com/highcharts/series.heatmap.colsize
Is there any way that this chart is not drawn to scale?
http://forum.highcharts.com/resources/image/4227
I need every point occupies a separate row and evenly.
That is, in this graph, it should appear one line for each of the first 2 points of each series and the vertical distance between each should be the same as the distance between the lines below.
The series are dynamically loaded and the number of points each serie is variable.
http://jsfiddle.net/fpanci/yL6mw/
$(function () {
$(document).ready(function() {
$("#container").highcharts({
chart: {
inverted: true,
spacingLeft: 0,
spacingRight: 0
},
title: {
text: ' ',
x: -20 //center
},
xAxis: {
minorGridLineColor: '#000000',
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 1,
tickInterval: 1,
labels: { enabled: true },
maxPadding: 0.05,
min: 0
},
yAxis: {
title: { text: ' ' },
plotLines: [{
value: 0,
width: 1,
color: '#C0C0C0'
}],
labels: { enabled: true },
minorGridLineWidth: 1,
minorTickLength: 0,
minorTickInterval: 20,
tickInterval: 20,
min: 0,
max: 100
},
exporting: { enabled: false },
tooltip: { enabled: false },
legend: { enabled: false },
series: [{
color: '#0000FF',
connectNulls: true,
data: [[0.2, 24.25], [0.5, 30.61], [1, 43.61], [2, 34.51], [3, 32.39], [4, 36.47], [5, 36.4], [6, null], [7, 24.68], [8, 37.79]]
},{
color: '#980000',
dashStyle: 'shortdot',
connectNulls: true,
data: [[0.2, 38], [0.5, 52], [1, 50], [2, null], [3, 32], [4, null], [5, 34], [6, null], [7, 25], [8, null]]
},{
color: '#38761D',
dashStyle: 'ShortDashDotDot',
connectNulls: true,
data: [[0.2, 20], [0.5, 27], [1, 35], [2, null], [3, 29], [4, null], [5, 30], [6, null], [7, 22], [8, null]]
}]
});
});
});
Thanks!
The data is plotting exactly where you've told it to.
Your first 2 x values in each data set are 0.2 and 0.5 - so that is where the points are plotted.
If you don't want them plotted that way, just remove the x values from the data, and they will plot in sequence.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/1/
If you want to have the 0.2 and 0.5 as axis labels, but want them evenly spaced still, you'll need to use categories for your x axis.
Example:
http://jsfiddle.net/jlbriggs/yL6mw/2/
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