I am using Vertical progress bar from rgraph charts.
My output is
What i am trying to do is adjust scale in multiple of 10 wrt numticks.
So if my numticks are 6, scale should to 0,10,20,30...60
How can i do this? Is there any other alternative?
Code
var vprogress = new RGraph.VProgress({
id: 'cvs',
min: 0,
max: 60,
value: 46,
options: {
colors: ['#5bc0de'],
tickmarksInner: true,
gutterRight:35,
numticks:6,
tickmarksColor:['black'],
arrows:true,
textSize: 12,
margin: 5,
}
}).grow();
If I understand correctly you can use the labelsCount option.
Related
Not sure if it's a limitation or not but I can't make chart display all data (I have 1500 records). fitContent() or setVisibleRange() doesn't help.
Demo
var chart = LightweightCharts.createChart(document.body, {
width: 600,
height: 300,
rightPriceScale: {
scaleMargins: {
top: 0.1,
bottom: 0.1,
},
},
});
var areaSeries = chart.addAreaSeries({
topColor: 'rgba(76, 175, 80, 0.56)',
bottomColor: 'rgba(76, 175, 80, 0.04)',
lineColor: 'rgba(76, 175, 80, 1)',
lineWidth: 2,
title: 'AAPL',
});
areaSeries.setData([{
"time": 1629353327,
"value": 19.97
}, {
"time": 1629439727,
"value": 19.67
},
....
}]);
chart.timeScale().fitContent();
Is this expected? It'll work if chart width is set to 800px.
By default the min bar spacing value (the min space between bars) is 0.5, which allows you to show 2 values per 1 pixel. But if you want to show more data in a small viewport, you need to change this value to a smaller value, e.g. 0.001.
You can do that by modifying minBarSpacing option of timeScale - just add timeScale: { minBarSpacing: 0.001 } to your chart's options and it will work. Demo
I am having a highchart which shows multiple Y-Axis in opposite directions. It plots correctly but it shows separate lines for both of the axis.
This is for yAxis which I am plotting on highchart. I have set tried on highchart site and tried to replicate multiple lines on fiddle.
yAxises.push({
allowDecimals: false,
title: { text: ' ' },
opposite: true,
top: '0%',
height: '100%',
min: yAxises[0].min,
max: yAxises[0].max,
offset: 0
});
I expect that if I have multiple y-axis with different min and max values then both min and max should be plotted on same line e.g.
YAxis -1 Y-Axis - 2
2 ------------------- 1.5
1 ------------------- 0.5
You can set the same tickAmount property for the y-axes or use tickPositioner function.
yAxis: [{
min: 0,
max: 10,
tickAmount: 3
}, {
min: 0,
max: 16,
tickAmount: 3
}]
Live demo: http://jsfiddle.net/BlackLabel/p12xj7zL/
API Reference:
https://api.highcharts.com/highcharts/yAxis.tickPositioner
https://api.highcharts.com/highcharts/yAxis.tickAmount
I'm creating RGraph pie chart in which labels are clashing. Though I am using labels.sticks property to fix this issue but it has no effect on the output.
Here's my code to draw pie chart:
<script type="text/javascript">
$(document).ready(function(){
// Some data that is to be shown on the pie chart. It should be an array of numbers.
var data = [6.3, 2.1, 1.1, 3.2, 7.4, 10.5, 5.3, 27.4, 1.1, 4.2];
var labels = ['Data Loggers 6', 'Data Translation 2', 'Energy Loggers 1', 'Hobo 3', 'iButton 7', 'ICP 10', 'MCC 5', 'Monnit 26', 'Orchestrator 1', 'Sensors 4'];
for(var i = 0; i < data.length; i++)
{
labels[i] = labels[i] + ', ' + data[i] + '%';
}
var colors_arr = new Array('#00FFFF', '#7FFFD4', '#FFE4C4', '#0000FF', '#8A2BE2', '#A52A2A', '#7FFF00', '#FF7F50', '#B8860B', '#A9A9A9', '#8B008B', '#FF1493', '#228B22', '#DAA520', '#20B2AA', '#87CEFA', '#6B8E23', '#FF0000', '#FFFF00', '#F5DEB3');
var colors = new Array();
for(var i = 0; i < data.length; i++)
{
colors[i] = colors_arr[i];
}
// Create the Pie chart
var pie = new RGraph.Pie({
id: 'report_prospects_qty_products_canvas' ,
data: data,
options: {
labels: {
self: labels,
sticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
},
tooltips: {
self: labels,
//event: 'onmousemove',
},
shadow: false,
strokestyle: 'transparent',
title: {
self: 'Products',
bold: false,
y: 10
},
radius: 70,
colors: colors,
text: {
size: 8,
color: "red",
angle: 45
},
},
}).roundRobin();
$('#report_prospects_qty_products_wrapper').mouseout(function(){
// Hide the tooltip
RGraph.hideTooltip();
// Redraw the canvas so that any highlighting is gone
RGraph.redraw();
});
});
</script>
HTML
<!-- Put this where you want the chart to show up: -->
<div id="cvs_wrapper">
<!-- An example of using CSS to resize the canvas tag. -->
<canvas id="report_prospects_qty_products_canvas" width="600" height="250" style="width:100%;">[No canvas support]</canvas>
</div>
Output:
To fix labels clashing issue, I am using following option:
options: {
labels: {
self: labels,
sticks: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
},
According to RGraph docs:
labels.sticks Stipulates that sticks for the labels are shown. This
can also be an array of stick lengths - which may be useful if you're
experiencing the labels clashing. Default: false
FYI, I am using // version: 2015-05-24
Judging by the configuration snippet that you posted then I'm guessing that you might be using an older version. The current version (5.0 at this time) uses a far better way of arranging labels so there's no clashing (unless you have oodles of labels).
There's a demo page that shows this new method quite nicely here:
https://www.rgraph.net/demos/pie-basic.html
And the code for this is no different to what you might be used to:
labels = [ 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' ];
new RGraph.Pie({
id: 'cvs',
data: [20,1,1,1,1,1,1],
options: {
tooltips: labels,
labels: labels,
shadow: false,
colorsStroke: 'rgba(0,0,0,0)',
exploded: 0
}
}).roundRobin();
I am using two different charts on the same page, so when I click on any chart of them the Gauge chart disappear.
var gauge1 = new RGraph.Gauge({
id: 'gauge',
min:0,
max: 100,
value: #{mbCardHistory.creditCardPrecentage},
options: {
centery: 120,
radius: 130,
anglesStart: RGraph.PI,
anglesEnd: RGraph.TWOPI,
needleSize: 85,
borderWidth: 0,
shadow: false,
needleType: 'line',
colorsRanges: [[0,30,'red'], [30,70,'yellow'],[70,100,'#0f0']],
borderInner: 'rgba(0,0,0,0)',
borderOuter: 'rgba(0,0,0,0)',
borderOutline: 'rgba(0,0,0,0)',
centerpinColor: 'rgba(0,0,0,0)',
centerpinRadius: 0,
textAccessible: true
}
}).draw();
before
after
I'd like to know if it's possible to draw a gantt chart setting an attribute as "duration" instead of providing start and finish date.
For example: Currently I'm drawing my gantt chart like this:
{name: 'Task 1', color: '#9FC5F8', from: new Date(2016, 0, 12, 9, 0, 0), to: new Date(2016, 0, 14, 17, 0, 0),
progress: {percent: 34, color: '#3C8CF8'}, movable: false}
but I'd like to draw it like this:
{name: 'Task 1', color: '#9FC5F8', **duration: "90"**,
progress: {percent: 34, color: '#3C8CF8'}, movable: false}
I hope what I've requested is possible!
Best regards,