Related
I was trying with the below code which is given here.
var trace1 = {
x: [1, 2, 3, 4, 5],
y: [1, 6, 3, 6, 1],
mode: 'markers',
type: 'scatter',
name: 'Team A',
text: ['A-1', 'A-2', 'A-3', 'A-4', 'A-5'],
marker: { size: 12 }
};
var trace2 = {
x: [1.5, 2.5, 3.5, 4.5, 5.5],
y: [4, 1, 7, 1, 4],
mode: 'markers',
type: 'scatter',
name: 'Team B',
text: ['B-a', 'B-b', 'B-c', 'B-d', 'B-e'],
marker: { size: 12 }
};
var data = [ trace1, trace2 ];
var layout = {
xaxis: {
range: [ 0.75, 5.25 ]
},
yaxis: {
range: [0, 8]
},
title:'Data Labels Hover'
};
Plotly.newPlot('myDiv', data, layout);
I want to disable the default plotly feature double clicking to zoom in the markers. But I want to keep the zoom out feature on double clicking.
Is it anyhow possible?
Please check this. I have used doubleClick: 'reset' to fulfill my objective.
I want to control the legends of different traces all at once for particular range lets say x=0 to x=5. How can we do it?
var trace1 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 3, 6, 4, 5, 2, 3, 5, 4],
type: 'scatter'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [0, 4, 7, 8, 3, 6, 3, 3, 4],
type: 'scatter'
};
var trace3 = {
x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
y: [5, 7, 3, 2, 8, 6, 1, 9, 3],
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {showlegend: true,
legend: {"orientation": "h"}};
Plotly.newPlot('myDiv', data, layout);
For example, when we click a legend, the encircled portion should get hid.
Sample code: Codepen_Sample
Update 2: what if trace(curve) is defined by set of different sub-traces whose ranges of the legends to be controlled are different but trace[name] are same for all the curves. For e.g this is the pseudo code:
for(let i=0; i<5; i++){
initialise trace1;
trace2;
trace3;
}
You can break up each of your three traces into starting and ending segments, then assign the starting segments the same name, same legendgroup, and only display one of these in the legend using the showlegend attribute.
Since plotly.js will make each trace a new color by default, you probably want to make the starting and ending segments of each trace to be the same color. Fixing the xaxis range will avoid having the entire plot resize when you toggle the legend entry.
Here is the javascript and codepen sample:
var trace1_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 3, 6, 4, 5, 2],
type: 'scatter',
marker: {color: 'orange'},
name: 'start',
showlegend: true,
legendgroup: 'start'
};
var trace1_end = {
x: [5, 6, 7, 8],
y: [2, 3, 5, 4],
type: 'scatter',
marker: {color: 'orange'},
name: 'trace1',
};
var trace2_start = {
x: [0, 1, 2, 3, 4, 5],
y: [0, 4, 7, 8, 3, 6],
marker: {color: 'steelblue'},
type: 'scatter',
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace2_end = {
x: [5, 6, 7, 8],
y: [6, 3, 3, 4],
type: 'scatter',
marker: {color: 'steelblue'}
};
var trace3_start = {
x: [0, 1, 2, 3, 4, 5],
y: [5, 7, 3, 2, 8, 6],
type: 'scatter',
marker: {color: 'forestgreen'},
name: 'start',
showlegend: false,
legendgroup: 'start'
};
var trace3_end = {
x: [5, 6, 7, 8],
y: [6, 1, 9, 3],
type: 'scatter',
marker: {color: 'forestgreen'}
};
var data = [trace1_start, trace1_end, trace2_start, trace2_end, trace3_start, trace3_end];
var layout = {showlegend: true,
legend: {"orientation": "h"}, xaxis: {"range": [0,8]}};
Plotly.newPlot('myDiv', data, layout);
This input would work well with highcharts:
data1 = [[2, 3, 3.5, 4], [1, 1.5, 2, 3]]
But this won't:
data2 = [[2, 3, 3.5, 4, 4.5], [1, 1.5, 2, 3]]
Here the only difference is that in the first item, there is one more data point. Why would highchart fail to make a boxplot from it? I think all it needs to generate a boxplots like median, quartiles and minimum and maximum are all there in the second dataset too.
This is my code:
dt = [
[760, 801, 848, 895, 930],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 806, 871, 950],
[834, 836, 864, 882, 910]
];
Highcharts.chart('boxcontainer', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts box plot styling'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
}
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
medianColor: '#0C5DA5',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'dot',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [{
name: 'Observations',
data: dt
}]
});
How can I solve this problem?
Highcharts accepts input data in two formats
Array of numbers
array of objects
Especially when it comes to graphs like boxplot which need multiple values to plot a single point on the graph these approaches will help you achieve what we need.
Here are the 2 ways of doing for Boxplot.
1. An array of arrays with 6 or 5 values. In this case, the values correspond to x,low,q1,median,q3,high
data: [
[0, 3, 0, 10, 3, 5],
[1, 7, 8, 7, 2, 9],
[2, 6, 9, 5, 1, 3]
]
An array of objects with named values.
data: [{
x: 1,
low: 4,
q1: 9,
median: 9,
q3: 1,
high: 10,
name: "Point2",
color: "#00FF00"},{
x: 1,
low: 5,
q1: 7,
median: 3,
q3: 6,
high: 2,
name: "Point1",
color: "#FF00FF"}]
So in the first approach when an extra value appears in the array is distorted and hence is your graph.
When ever you would like to have extra values in the data that are not needed for plotting but are important, you can go with the second approach.
Here are the links for your ref:
API : https://api.highcharts.com/highcharts/series.boxplot.data
Exaample: http://jsfiddle.net/fzwu1ods/
I want to capture canvas R Graph image and save that image into my own folder.
I am using following code for plotting R Graph:
var drawXChartGraph = function () {
var line1 = new RGraph.Line({
id: 'cvs',
data: [
[15, 15, 15, 15, 15, 15, 15, 15, 15, 15]
],
options: {
linewidth: 1,
gutterLeft: 40,
backgroundGrid: false,
title: 'X-CHART',
colors: ['red'],
fillstyle: 'rgba(255,0,0,0.2)',
ymin: 0,
ymax: 16,
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
scaleDecimals: 2,
key: ['UCL', 'LCL', 'XBar', 'AVG'],
keyPosition: 'gutter',
keyColorShape: 'circle',
keyColors: ['red', 'red', 'green', 'black'],
textSize: 10,
textAccessible: true
}
}).draw();
};
$(document).ready(function () {
drawXChartGraph();
});
Please anyone help me.
Thanks
var canvas = document.getElementById('cvs');
var base64Img = canvas.toDataURL();
After this step you have the base64 encoded image. Just POST it to your server and decode(base64) it before writing it into a file.
I have just implemented a chart using jQplot plugin. I have used OHLCRenderer as the renderer and the chart looks like this.
Can you please tell me how to add a mouse-over option to the bars so that i can show some information when i mouse-over each bars. Thanks
This is the code
var catOHLC = [
[1, 10, 6.5, 10, 10],
[2, 1.2, 5, 1.2, 1.2],
[3, 8, 10, 8, 8],
];
var catOHLC1 = [
[1, 0, 5, 0, 0]
];
var ticks = ['A', 'B', 'C', 'D', 'E'];
var ticks2 = [12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0];
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
stackSeries: true,
axes: {
xaxis: {
renderer:$.jqplot.CategoryAxisRenderer,
ticks:ticks
},
yaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks2,
max: 24,
min: 0
}
},
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } },
{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: false, tickLength: 0, lineWidth: 10 } }],
});});
I used the jqplot highlighter plugin to make this work with a slightly modified version of your code. Here is the jsfiddle, and the code is below. Note that this is fairly similar to the example at http://www.jqplot.com/tests/candlestick-charts.php .
plot4 = $.jqplot('chart4', [catOHLC, catOHLC1], {
series: [{
renderer: $.jqplot.OHLCRenderer,
rendererOptions: {
tickLength: 4,
lineWidth: 10
}
}, {
renderer: $.jqplot.OHLCRenderer,
rendererOptions: {
tickLength: 4,
lineWidth: 10
}
}],
highlighter: {
show: true,
showMarker: false,
tooltipAxes: 'xy',
yvalues: 4,
formatString: '<table class="jqplot-highlighter"> \
<tr><td>x:</td><td>%s</td></tr> \
<tr><td>open:</td><td>%s</td></tr> \
<tr><td>hi:</td><td>%s</td></tr> \
<tr><td>low:</td><td>%s</td></tr> \
<tr><td>close:</td><td>%s</td></tr></table>'
}
});