I am using RGraph version 5.00, trying to make a scatter plot that looks like this,
https://i.stack.imgur.com/lsPB8.png
This is my best effort, thus far,
https://i.stack.imgur.com/LKIYH.png
How can I move the Y-Axis from the left-hand side to the center of the plot?
I've tried setting the 'xaxisScaleMin' option to 'mirror', but that doesn't work. Here is my code,
new RGraph.SVG.Scatter({
id: 'chart-container',
data: [],
options: {
backgroundGridHlinesCount: 10,
backgroundGridVlinesCount: 10,
colors: ['cyan', 'magenta', '#cc0', 'black', 'red', 'green', 'blue', 'brown'],
linewidth: 3,
gutterLeft: 50,
gutterBottom: 50,
xaxisLinewidth: 1.5,
xaxisScale: true,
xaxisScaleMax: 125,
xaxisScaleMin: -125,
yaxisLabelsCount: 10,
yaxisLinewidth: 1.5,
yaxisScale: true,
yaxisScaleMax: 125,
yaxisScaleMin: -125,
title: 'solid ink colors'
}
}).draw();
2019-05-29:
Looking at the source, RGraph.svg.common.core.js, there is no way to place the Y-axis at the origin, as with the X-axis. Placing the Y-axis on the origin, when it is in the range of the graph, seems like a proper default behavior, or should at least be a simple option. I will try changing the source.
One of the examples in the download does just this:
demos/scatter-negative-x-axis.html
The trick is to add a large left margin and then use the drawing API X axis to add the extra axis (the left-hand-side X axis).
(incidentally - the lines that are shown on the chart are just trigonometry curves - sin/cos/tan)
You can get the RGraph download here:
https://www.rgraph.net/download.html#stable
Related
I would like to add a legend to my Heat Map Layer using LegendControl Module. I want to add StopColors in the legend using the number of points. However the HeatMapLayer color option only allows HeatMapDensity (0 to 1) in the data expression. How do we assign colors to HeatMapLayer using "interpolate" expression and the number of points ?
color: [
'interpolate',
['linear'],
['heatmap-density'],
0,
'rgba(0,0,0,0)',
0.2,
'royalblue',
0.4,
'cyan',
0.6,
'lime',
0.8,
'yellow',
1,
'red'
],
However adding ['get','point_count'] to the color throws error inplace of heatmap_density. How to create a legend and color the heat map based on number of points ? Thanks !
Sounds like you are trying to create a weighted heat map. Use the weight option. For example:
var layer = new atlas.layer.HeatMapLayer(datasource, null, {
weight: ['get', 'point_count']
});
My Y-Axis keys (or ticks) are pretty long, and they're being truncated
But it's not due to lack of sufficient width for the graph itself, using the inspect tool, I can see there's enough space allocated for it, but the frame that is allocated to the whole graph is not sufficient... and that's supposed to be the ResponsiveBar...
changing the "transform" value for the X-Axis makes the text appear in full (almost), but then the legends are being truncated:
How can I make them appear in full? Couldn't find my answer in the docs.
Here's a sandbox to reproduce the problem: https://codesandbox.io/s/missing-legends-text-pns6v
IMPORTANT: 'width' is not the problem, it is somehow covered with a sort of a white line... also, I tried many 'width' sizes
The problem I'm referring to is this:
Would love to hear if there's a way to wrap the text, or truncating with adding on hover effect to show the full text
solution 1 : increase margin
You can set the left property in margin of ResponsiveBar. In the following example set to 240px:
<ResponsiveBar
........
margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
........
/>
You will also need to update the container style to expand the chart setting the margin to 0 for example :
style={{
.....
margin: "0"
}}
Result:
Sandbox
solution 2: tooltip
If you don't want to increase the margin, you can override the format function in axisLeft props and :
cut the string like New York, Manhatta...
add a <title> tag to display a tooltip :
axisLeft={{
format: (v) => {
return v.length > 10 ? (
<tspan>
{v.substring(0, 10) + "..."}
<title>{v}</title>
</tspan>
) : (
v
);
},
tickSize: 5,
tickPadding: 5,
tickRotation: 0,
legend: "",
legendPosition: "middle",
legendOffset: -40
}}
checkout this post
Sandbox
Especially looking for an idea or way around to achieve this.
I am trying to build a video editor/mixture as in the above image using react js. This UI primarily targets to align different video/image media with timelines. As user drag video/image in any of the layer, it just needs to expand or shrink with time scale.
Three screens are for three different videos. A feature like a crop/split is not required. This UI collect information and send it to the server which will do the rest of the processing. Required contents are already on our servers.
Any solution/possible direction on collecting media information drag into layers with the time scale on the top ?. What are the best resources to achieve this UI using React JS?
You should be using timeline of vis.js with the following options :
var start = new Date(1970, 0, 1, 0, 0, 0, 0);
var end = new Date(1970, 00, 01, 0, 1, 0, 0);
var options = {
zoomKey: "ctrlKey",
horizontalScroll: true,
verticalScroll: true,
orientation: "top",
moveable: true,
zoomable : true,
editable: true,
min: start,
max: end,
start: start,
end: end,
zoomMax: 10000000,
zoomMin: 1000,
stack:false,
showCurrentTime: true,
multiselect: true,
multiselectPerGroup: true,
};
This will give you a multiline scrollable (both horizontal and vertical) sliding timeline which is the basis of a video editor.
I suggest your timeLine component to have a module and scale both provided by its father component. The nested divs have their own module length, but not scale, and the same happens with the timeLine component. So, you only talk about modules length. Then i.e. you set the equivalence 1 module = 50px
I hope this help you!
I have angular service which provides highcharts config for highcharts-ng. I prepare data for this service in controller and than call service with data as parameter. All work. But if my range is for example something like this [15,130,0.2] my spiderweb chart is little bit squeezed. So I would like to do different axis scales and I have found solution by using parallel-coordinates.js.
And I have problem to make it works. First picture is what I have and second is what I would like to achieve.
What I have : https://jsfiddle.net/DuFuS/en51rbxc/
What I want: http://jsfiddle.net/DuFuS/tbzfhou5/
First of all (and the most important thing), you're using very old version of highcharts-ng package, and that's why parallel-coordinates.js module isn't working properly.
This module create additional axes basing on the amount of data passed to the chart constructor, but in this version of package, data is unfortunately an empty object on chart init, so the parallel-coordinates.js module doesn't add any additional axis at all.
Next things which causes the problems are typos in configuration here:
chart: {
parallerlCoordinates: true,
parallerAxes: {
...
Should be parallelCoordinates and parallelAxes.
In order to make your chart works, please update the version of highcharts-ng package to 1.2.1, then rebuild your configuration object (because the structure had changed with new version), like below:
return {
chart: {
parallelCoordinates: true,
parallelAxes: {
gridLineWidth: 0,
lineWidth: 2,
showFirstLabel: false,
showLastLabel: true
},
polar: true,
type: 'line'
},
xAxis: {
categories: data.categories,
tickmarkPlacement: 'on',
lineWidth: 0
},
yAxis: {
gridLineInterpolation: 'polygon',
lineWidth: 0,
min: 0
},
series: data.series
};
After all changes, chart will look as you expected.
Live example: https://jsfiddle.net/rza5uk67/
Package docs: https://github.com/pablojim/highcharts-ng
I am using Extjs 5 for generating a chart.
I have added a sprite text to the chart, but I am unable to wrap the text for long string values.
The issue is shown in the image.
Here is the code for sprite.
sprites: [{
type: 'text',
text: '',
textAlign: 'left',
fontSize: 12,
fontWeight: 'bold',
//width: 50,
//height: 30,
x: 100,
y: 10,
'fill': '#333f49'
}],
I am setting the text value dynamically from controller.
Is there any way I can wrap the text to next line for long string values?
Thanks in advance. :)
The text sprite doesn't auto-wrap. But it does take into account line breaks. So what you need to do is insert line breaks yourself.
You can use the Ext.util.TextMetrics class to determine how long the text is, and then find a suitable whitespace character to replace with a new line.