I want to display the legend on the top of chart, but under the title. I looked for the API, and did not find anything related changing position, but only setting orientation.
var myData = [
{
fcst_valid_local: "2013-01-04 22:23:00",
pop: 20,
temp: 38,
},
{
fcst_valid_local: "2013-02-04 22:23:00",
pop: 15,
temp: 39,
},
{
fcst_valid_local: "2013-03-04 22:23:00",
pop: 2,
rh: 70,
}
];
var data = [
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.temp),
type: 'line'
},
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.pop),
type: 'bar',
yaxis: 'y2'
}
];
var layout = {
title: 'Daily Forecast',
yaxis: {
autorange: true,
range: [0, 100],
},
yaxis2: {
range: [0, 100],
side: 'right',
overlaying: 'y',
type: 'linear'
},
legend: {orientation: 'h', side: 'top'}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;"><!-- Plotly chart will be drawn inside this DIV --></div>
You can position the legend by setting its x and y values. For your graph it would be something like:
legend: {x: 0.4, y: 1.2}
var myData = [
{
fcst_valid_local: "2013-01-04 22:23:00",
pop: 20,
temp: 38,
},
{
fcst_valid_local: "2013-02-04 22:23:00",
pop: 15,
temp: 39,
},
{
fcst_valid_local: "2013-03-04 22:23:00",
pop: 2,
rh: 70,
}
];
var data = [
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.temp),
type: 'line'
},
{
x: myData.map(d => d.fcst_valid_local),
y: myData.map(d => d.pop),
type: 'bar',
yaxis: 'y2'
}
];
var layout = {
title: 'Daily Forecast',
yaxis: {
autorange: true,
range: [0, 100],
},
yaxis2: {
range: [0, 100],
side: 'right',
overlaying: 'y',
type: 'linear'
},
legend: {x: 0.4, y: 1.2}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv" style="width: 480px; height: 400px;">
add:
layout(legend = list(orientation = 'h', xanchor = "center", x = 0.5, y= 1))
to fit legend as horizontal, in the middle and at the top.
Related
I am making a javascript plotly bar graph to represent system downtime and I want to add annotations between my subplots, like this:
Here's the fiddle for the plot code, and the code here as well:
<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="bar"></div>
</body>
var hoursDown, hoursOperational = [];
hoursDown = [8, 16, 8];
hoursOperational = hoursDown.map(x => 25 - x);
hoursDown2 = [10, 3, 3];
hoursOperational2 = hoursDown2.map(x => 25 - x);
var hoursDownTrace = {
x: hoursDown,
y: ["A", "B", "C"],
name: 'Down',
orientation: 'h',
marker: {
color: 'black',
},
type: 'bar',
width: .5
};
var hoursOperationalTrace = {
x: hoursOperational,
y: ["A", "B", "C"],
name: 'Operational',
orientation: 'h',
type: 'bar',
width: .2,
marker: {
color: 'green',
}
};
var hoursDownTrace2 = {
x: hoursDown2,
y: ["E", "F", "G"],
xaxis: 'x2',
yaxis: 'y2',
name: 'Down',
orientation: 'h',
marker: {
color: 'black',
},
type: 'bar',
width: .5
};
var hoursOperationalTrace2 = {
x: hoursOperational2,
y: ["E", "F", "G"],
name: 'Operational',
orientation: 'h',
type: 'bar',
width: .2,
xaxis: 'x2',
yaxis: 'y2',
marker: {
color: 'green',
}
};
var myData = [hoursDownTrace, hoursOperationalTrace, hoursDownTrace2, hoursOperationalTrace2];
var layout={
title: 'My Title',
barmode: 'stack',
xaxis: {side: 'top', bargap: 10},
xaxis2: {anchor: 'y2', side: 'top', bargap: 10},
xaxis3: {anchor: 'y3'},
yaxis: {domain: [0, 0.266]},
yaxis2: {domain: [0.366, 0.633]},
yaxis3: {domain: [0.733, 1]},
}
var annotations={
xref: 'paper',
yref: 'paper',
x: 0.01,
y: 0.9,
text: 'Annotation',
showarrow: false,
row: 3,
col: 1
}
Plotly.newPlot('bar', myData, layout);
Someone has done something similar in this answer but I wasn't able to integrate it into my code. I also tried several of the options from the plotly annotations documentation page to no luck.
Hi I am using HTML Canvas charts. In one of the charts can I change the label of x-axis?
The source code for the chart is :
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function () {
var chart = new CanvasJS.Chart("chartContainer",
{
animationEnabled: true,
theme: "theme2",
title:{
text: "Multi Series Spline Chart - Hide / Unhide via Legend"
},
axisY:[{
lineColor: "#4F81BC",
tickColor: "#4F81BC",
labelFontColor: "#4F81BC",
titleFontColor: "#4F81BC",
lineThickness: 2,
},
{
lineColor: "#C0504E",
tickColor: "#C0504E",
labelFontColor: "#C0504E",
titleFontColor: "#C0504E",
lineThickness: 2,
}],
data: [
{
type: "spline", //change type to bar, line, area, pie, etc
showInLegend: true,
dataPoints: [
{ x: 10, y: 51 },
{ x: 20, y: 45},
{ x: 30, y: 50 },
{ x: 40, y: 62 },
{ x: 50, y: 95 },
{ x: 60, y: 66 },
{ x: 70, y: 24 },
{ x: 80, y: 32 },
{ x: 90, y: 16}
]
},
{
type: "spline",
axisYIndex: 1,
showInLegend: true,
dataPoints: [
{ x: 10, y: 201 },
{ x: 20, y: 404},
{ x: 30, y: 305 },
{ x: 40, y: 405 },
{ x: 50, y: 905 },
{ x: 60, y: 508 },
{ x: 70, y: 108 },
{ x: 80, y: 300 },
{ x: 90, y: 101}
]
}
],
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
chart.render();
}
}
});
chart.render();
});
</script>
</body>
</html>
Now here we can see that x-values is 10,20,30... My question is can we change them to other format like 10am or 10pm?
You can add a suffix (or a prefix) to the x-axis with chart.options.axisX
chart.options.axisX = { suffix: "AM" };
Or you can add both like this:
chart.options.axisX = { prefix: "/", suffix: "AM" };
I have created a simple plotly line graph as follows:
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var layout = {
xaxis:{
title:"x-axis",
tickangle:45,
rangemode:'nonnegative',
autorange:true,
exponentformat: "none"
},
yaxis:{
title: "Time",
tickangle:45,
rangemode:'nonnegative',
range:[0,20],
autorange: false
},
shapes: [
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line:{
color: 'rgb(255, 0, 0)',
width: 2,
dash:'dot'
},
},
{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line:{
color: 'rgb(0, 255, 0)',
width: 2,
dash:'dot'
},
}
]
};
Plotly.newPlot(myDiv,[trace1],layout);
Now, I want to add a name or label to the threshold1 and threshold2 that I have created in 'shapes' under 'layout'. I searched the plotly JS documentation but did'nt get anything useful there. How can I do this. Any help would be appreciated.
You could create another trace with mode: 'text'. There is certainly more than one way of doing it but this one is simple and does not need complicated data replication.
var threshold1 = 12;
var threshold2 = 16;
var offset = 0.75;
var trace1 = {
x: [1, 2, 3, 4],
y: [10, 15, 13, 17],
type: 'scatter'
};
var trace2 = {
x: [Math.min.apply(Math, trace1.x) + offset,
Math.max.apply(Math, trace1.x) - offset],
y: [threshold1 - offset, threshold2 - offset],
mode: 'text',
text: ['lower threshold', 'upper threshold'],
showlegend: false
}
var layout = {
xaxis: {
title: "x-axis",
tickangle: 45,
rangemode: 'nonnegative',
autorange: true,
exponentformat: "none"
},
yaxis: {
title: "Time",
tickangle: 45,
rangemode: 'nonnegative',
range: [0, 20],
autorange: false
},
shapes: [{
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold1,
x1: 1,
y1: threshold1,
line: {
color: 'rgb(255, 0, 0)',
width: 2,
dash: 'dot'
},
}, {
type: 'line',
xref: 'paper',
x0: 0,
y0: threshold2,
x1: 1,
y1: threshold2,
line: {
color: 'rgb(0, 255, 0)',
width: 2,
dash: 'dot'
},
}]
};
Plotly.newPlot(myDiv, [trace1, trace2], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id='myDiv'></div>
You can use annotations:
layout.annotations = [
{
showarrow: false,
text: "Your text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold1,
yanchor: "bottom"
},
{
showarrow: false,
text: "Your second text here",
align: "right",
x: 1,
xanchor: "right",
y: threshold2,
yanchor: "bottom"
}
],
Add just name property to your trace like
name = 'Xyz'
This Link might help you to fix it out.
I am trying to draw a plot with multiple factors. I hope these different factors are distinguished by color, size, and shape of the scatter. An example of this kind of plot is here https://github.com/slfan2013/tempPlot/blob/master/Rplot.png.
I'd like to use a javascript library to draw a similar plot. I usually use plotly.js to draw plots. But I think plotly can only handle one factor at a time (different colors). My question is can plotly handle multiple (nested) factors in one single plot (like color, size, and shape)? If not, if there is any javascript library can achieve these? How about CanvasJS?
#### EDIT.
I understand how to draw scatter with different color and different size (shape, etc) on the same plot. I just would like to have a multiple-factor legend on the plot, so that if I click "red", for example, then the red scatters would hide no matter what size it is AND if I click size "big", big scatters would hide no matter what color it is.
Thanks!
This can be done in CanvasJS using scatter chart and by controlling markerType and markerSize. Check the example shown below.
Refer these pages for markerType and markerSize.
http://canvasjs.com/docs/charts/chart-options/data/markertype/
http://canvasjs.com/docs/charts/chart-options/data/markersize/
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "Scatter Chart with Different Marker Types"
},
legend: {
horizontalAlign: "right",
verticalAlign: "center"
},
data: [
{
type: "scatter",
showInLegend: true,
legendText: "Circle",
dataPoints: [
{ x: 1, y: 91, markerSize: 10 },
{ x: 2, y: 75, markerSize: 20 },
{ x: 3, y: 70, markerSize: 30 },
{ x: 4, y: 85, markerSize: 40 },
{ x: 5, y: 75, markerSize: 50 }
]
},
{
type: "scatter",
markerType: "square", //default "circle"
showInLegend: true,
legendText: "Square",
dataPoints: [
{ x: 1, y: 71, markerSize: 10 },
{ x: 2, y: 55, markerSize: 20 },
{ x: 3, y: 50, markerSize: 30 },
{ x: 4, y: 65, markerSize: 40 },
{ x: 5, y: 55, markerSize: 50 }
]
},
{
type: "scatter",
markerType: "triangle",
showInLegend: true,
legendText: "Triangle",
dataPoints: [
{ x: 1, y: 51, markerSize: 10 },
{ x: 2, y: 35, markerSize: 20 },
{ x: 3, y: 30, markerSize: 30 },
{ x: 4, y: 45, markerSize: 40 },
{ x: 5, y: 35, markerSize: 50 }
]
},
{
type: "scatter",
markerType: "cross",
showInLegend: true,
legendText: "Cross",
dataPoints: [
{ x: 1, y: 31, markerSize: 10 },
{ x: 2, y: 15, markerSize: 20 },
{ x: 3, y: 10, markerSize: 30 },
{ x: 4, y: 25, markerSize: 40 },
{ x: 5, y: 15, markerSize: 50 }
]
}
]
});
chart.render();
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
You would just need to define multiple traces and set the parameters for each trace individually.
trace0 is just the default settings
trace1 has a custom color
trace2 has a custom color and custom size
trace3 has a custom color, custom size and custom symbol
var trace0 = {
x: [1, 2, 3],
y: [1, 2, 3],
type: 'scatter',
mode:'markers'};
var trace1 = {
x: [1, 2, 3],
y: [2, 1.8, 1],
type: 'scatter',
mode:'markers',
marker: {
color: 'red'
}};
var trace2 = {
x: [1, 2, 3],
y: [2.8, 2.3, 1.2],
type: 'scatter',
mode:'markers',
marker: {
color: 'green',
size: [10, 15, 20]
}};
var trace3 = {
x: [1, 2, 3],
y: [3, 2.5, 1],
type: 'scatter',
mode:'markers',
marker: {
color: 'pink',
size: [10, 15, 20],
symbol: 303
}};
Plotly.plot('myDiv', [trace0, trace1, trace2, trace3])
<div id='myDiv'></div>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
i have the base line highchart with the trend line and points ..now i want to add Range for the xaxis in the Single line series highstock ...
This is Jsfiddle please observe :
http://jsfiddle.net/hj22wbe5/7/
And this is the Highstock :
http://www.highcharts.com/stock/demo
or
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/
How to add the Navigator for first jsfiddle graph that is having the in the highstock ..
please help
Thanks !!
Edited code :
<!DOCTYPE html>
<html lang="en">
<title>RNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv='X-UA-Compatible' content='IE=Edge'/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<body>
<div id="container" style="height: 400px"></div>
</body>
<script type="text/javscript">
$(function () {
var sourceData = [
[0, 99.43],
[1, 99.40],
[2, 99.24],
[3, 99.40],
[4, 99.21],
[5, 99.45],
[6, 99.41],
[7, 99.18],
[8, 99.36],
[9, 99.31],
[10, 99.38],
[11, 99.20],
[12, 99.38],
[13, 99.32]
];
var dates = ['18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '18-Jul-14', '19-Jul-14', '20-Jul-14', '19-Jul-14', '20-Jul-14', '20-Jul-14'];
$('#container').highcharts({
title: {
text: 'RNA - CP ( Radio Network Availability - Customer Perceived)',
x: -20 //center
},
tooltip: {
formatter: function () {
if (this.series.name == 'Series 2') {
return false;
}
//console.log(this.point.extprop);
var s = 'The value for <b>' + this.x +
'</b> is <b>' + this.y + '</b>';
if (this.point.extprop) {
s += 'for <b>' + this.point.extprop + '</b>';
}
return s;
}
},
subtitle: {
text: '',
x: -20
},
navigator: {
enabled: true
},
xAxis: {
labels: {
rotation: 90,
align: "left",
formatter: function () {
return dates[this.value];
},
},
tickInterval: 1
},
yAxis: {
title: {
text: 'Percent'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
legend: {
layout: 'vertical',
//align: 'right',
//verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'RNA',
data: [{
x: 0,
y: 99.43,
extprop: 'power issue'
}, {
x: 1,
y: 99.40,
extprop: 'flood'
}, {
x: 2,
y: 99.24,
color: 'red',
extprop: 'power issue'
}, {
x: 3,
y: 99.40,
extprop: 'flood'
}, {
x: 4,
y: 99.21,
color: 'red',
extprop: 'power issue'
}, {
x: 5,
y: 98.45,
color: 'red',
extprop: 'flood'
}, {
x: 6,
y: 98.41,
color: 'red',
extprop: 'power issue'
}, {
x: 7,
y: 99.18,
color: 'red',
extprop: 'flood'
}, {
x: 8,
y: 99.36,
extprop: 'power issue'
}, {
x: 9,
y: 99.31,
color: 'red',
extprop: 'flood'
}, {
x: 10,
y: 99.38,
extprop: 'power issue'
}, {
x: 11,
y: 99.20,
color: 'red',
extprop: 'flood'
}, {
x: 12,
y: 99.38,
extprop: 'power issue'
}, {
x: 13,
y: 99.32,
extprop: 'flood'
}]
}, {
type: 'line',
marker: {
enabled: false
},
/* function returns data for trend-line */
data: (function () {
return fitData(sourceData).data;
})()
}],
credits: {
enabled: false
}
});
});
</script>
</html>
yes , this is script and one issue when i load in the browser the graph is not displaying and also when i inspect element no errors are there ..i cant able to find the issue ..in the browser its showing empty page..#pawel .
Thanks