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.
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.
As shown in codepen below, text value for trace 1 is being trimmed as it is close to chart border.
Need to show these numbers above everything else. Have tried setting z-index. Didn't worked.
https://codepen.io/satishvarada/pen/yLVoqqo
var trace1 = {
x: [1, 2, 3, 4],
y: [16, 16, 16, 16],
type: 'scatter',
text:[16, 16, 16, 16],
textposition:'top',
mode:'lines+markers+text'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode:'lines+markers+text'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
I'm not a plotly user, but here is my try:
The problem:
Plotly has a default height of 450px and it also uses some default values regarding its layout settings which can be found at the documentation here. Since you are trying to plot something with smaller height (350px), you can adjust a little bit the default layout values to make the text fit better. Below, I have just set smaller margin values, for example 40 instead of 80,80,80,100 which are the defaults and it seems to work.
Solution:
var layout = {
autosize: true,
height: 350,
margin: {
l: 40,
r: 40,
b: 40,
t: 40,
pad: 0
},
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);
(notice that I set the height at the layout object and I have removed it from the style property of your div)
Working example:
var trace1 = {
x: [1, 2, 3, 4],
y: [16, 16, 16, 16],
type: 'scatter',
text:[16, 16, 16, 16],
textposition:'top',
mode:'lines+markers+text'
};
var trace2 = {
x: [1, 2, 3, 4],
y: [16, 5, 11, 9],
type: 'scatter',
mode:'lines+markers+text'
};
var data = [trace1, trace2];
// var data = [trace1];
var layout = {
autosize: true,
height: 350,
margin: {
l: 40,
r: 40,
b: 40,
t: 40,
pad: 0
},
};
var config = {responsive: true}
Plotly.newPlot('myDiv', data, layout, config);
<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>
try this.
.plot { clip-path: none; }
I'm using react-chartjs-2 to draw a line chart but when I use the following code
const data = {
labels: [0, 11, 21, 31, 41, 50],
datasets: [
{
label: 'Radiant',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'green',
backgroundColor: 'green',
},
{
label: 'Dire',
data: [1, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50].map((e) => ({
x: e,
y: Math.round(50 + Math.random() * 30),
})),
fill: false,
borderColor: 'red',
backgroundColor: 'red',
},
],
};
my last point gets shown twice.
When I modify my labels to be 0, 10, 20, etc. it gets even crazier and I get the following result.
I fixed it by setting the type to be linear in xAxes:
scales: {
xAxes: [
{
type: 'linear',
},
],
},
I have a stacked column chart with three stacks per column. See https://jsfiddle.net/Lfvnraqd/1/
The tooltip shows the numbers for the individual stack as well as the total of all three stacks (i.e. the total of all proceedings per year). This works fine as long as all stacks are shown. But when I hide one or two stacks by clicking on the corresponding item in the legend, the total shown in the tooltip is that of all visible stacks, but I want it to still show the total of all three stacks. If possible without the need to have a separate series for the total numbers.
Is there a way to do that?
Code:
$(function () {
Highcharts.setOptions({
colors: ['#f59000', '#2274c1', '#90aaef']
});
$('#container').highcharts({
chart: {
borderColor: '#cccccc',
borderWidth: 2,
marginTop: 43,
type: 'column'
},
xAxis: {
categories: ['2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'],
tickLength: 20
},
yAxis: {
min: 0,
max: 45,
reversedStacks: false,
tickInterval: 5,
title: {
text: null
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}
},
credits: {
enabled: false
},
title: {
text: 'Number of procedures per year',
y: 18
},
tooltip: {
headerFormat: '<b>Year {point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total procedures: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'Resolved before conciliation',
data: [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10]
}, {
name: 'Conciliation successful',
data: [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0]
}, {
name: 'Expert\'s decision',
data: [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
}]
});
});
Summing of the points values need to be done manually because the chart operate only on visible data.
Before you set data in the chart, you calculate its sum:
var data1 = [14, 12, 10, 13, 10, 7, 11, 11, 11, 8, 8, 10];
var data2 = [2, 4, 5, 1, 2, 7, 6, 4, 1, 1, 3, 0];
var data3 = [7, 13, 20, 10, 20, 19, 20, 26, 25, 19, 18, 17]
var sums = Object.keys(data1).map(i => {
return data1[i] + data2[i] + data3[i];
});
and access the propert sum in tooltip.pointFormatter
pointFormatter: function () {
return this.series.name + ': ' + this.y + '<br/>Total procedures: ' + sums[this.x];
}
Example: https://jsfiddle.net/Lfvnraqd/2/
my line graph is not displaying decimal values instead it is rounding off the decimal values on y axis
var line1 = new RGraph.Line({
id: 'cvs',
data: [
[5.85, 5.86, 5.87, 5.88, 5.89, 5.90, 5.91, 5.92, 5.93, 5.94]
],
options: {
linewidth: 1,
backgroundGrid: false,
title: 'X-Chart',
colors: ['red'],
fillstyle: 'rgba(255,0,0,0.2)',
ymin: 5.75,
ymax: 6,
labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
scale: 0.2,
textAccessible: true
}
}).draw();
thank you
You should add the scaleDecimals option to your configuration:
...
scaleDecimals: 2,
...
There's an example of it in a demo called line-us-prison-population.html and you can see that by downloading the RGraph archive here:
https://www.rgraph.net/download.html#stable