I'm using a scatter chart to display data with the following range: x = [-1..1] y = [-1..1]. Is it possible to draw a horizontal line on e.g. y = 0.5?
I'm using the JavaScript charts (i.e. not the image charts).
We had the same problem at work. Unfortunately, for the moment Google Charts does not provide an easy way to display a line in the scatter chart, like in the bar chart.
Finally we found a "small trick" that works perfectly for us, as you can see here:
http://csgid.org/csgid/statistics/structures
The trick consist in creating a "Line chart" but setting the linewidth property to 0 and pointsize to 5 in the series of the points, and linewidth 1 and pointsize 0 in the serie of the line.
It looks like:
interpolateNulls: true,
series: {
0: { lineWidth: 0, pointSize: 5 },
1: { lineWidth: 0, pointSize: 5 },
2: { lineWidth: 0, pointSize: 5 },
3: { lineWidth: 0, pointSize: 5 },
4: { lineWidth: 1, pointSize: 0 }
}
Why did I set interpolateNulls to true? Because then, I had to change the way I was setting the data in the array before convert it to JSON and pass it to Google Charts. In every row I had to set the values of every serie in the X axis for each value of the Y axis. So I had to set to null the X value when a serie didn't have a Y value for that X value (I mean, when a serie didn't have any point for that X value). So, the same for the serie of the line.
This would be one point of the first serie (in JSON):
[2.6,0.184,null,null,null,null]
And this one "point" of the line serie (the last serie):
[4,null,null,null,null,0.254]
Maybe it is not the most efficient way, but it works :)
I hope I have explained it clear, let me know if you have more questions.
Related
I want that my y-axis always shows a range from 0-60 even though there are data sets that do not represent the full range.
E.g. if I'm showing a data set with values of just 10 and 40 the y-axis range is only from 0-40 instead of 0-60.
Any ideas how to configure the y-axis for Swift Charts (iOS 16) with a fixed range?
Chart {
ForEach(model.series.entries, id: \.weekday) { element in
BarMark(
x: .value("Day", element.weekday, unit: .day),
y: .value("Feeling", element.value)
)
}
}
.chartXAxis {
let unit: Calendar.Component = model.resolution == .yearly ? .month : .day
AxisMarks(values: .stride(by: unit, count: 1)) { _ in
AxisGridLine()
AxisValueLabel(format: .dateTime.weekday(.narrow), centered: true)
}
}
try adding this to your Chart, ...to configure the y-axis for Swift Charts (iOS 16) with a fixed range:
.chartYScale(domain: 0...60)
Any way to make the y-axis border longer on either side in chart.js?
HAVE
WANT
While looking how to add padding between the tick marks and x-axis, I found a solution which allows me to do just that plus the above.
Which is by setting the y offset to true and hiding the x border:
Copied from here:
x: {
grid: {
drawBorder: false, // hide the x axis
},
},
y: {
offset: true, // create a sensation of space with the x axis hidden
},
In my case, it's enough.
I parsed a PDF file using API version v1beta3 and got the coordinates of a table as seen below.
"normalizedVertices": [
{
"x": 0.6894705,
"y": 0.016400337
},
{
"x": 0.87983346,
"y": 0.016400337
},
{
"x": 0.87983346,
"y": 0.026072329
},
{
"x": 0.6894705,
"y": 0.026072329
}
]
How to convert these to PDF coordinates ?
I tested a pdf form (gs://cloud-samples-data/documentai/loan_form.pdf) and is from Document AI docs. I used both v1 and v1beta3, got same results and it works as expected.
The x and y values returned by normalizedVertices are from 0 to 1. Document AI calculates the values of x and y with respect to the point of origin which is the top left corner of the image. The bounding box logic is explained in this document. While online.sodapdf.com calculates value of x with respect to the origin, value of y with respect to the maximum point.
To convert the values to actual x and y coordinates just like in online.sodapdf.com see convertion:
x = x * width
y = height - (y * height))
To test this, the sample document has a width = 612 and height = 792 and selected an object to convert coordinates.
The returned object at loan_form.pdf have the coordinates presented under "NormalizedVertex" column. Using the formula above, you will get the converted coordinates. The calculated value may have minimal difference versus the actual, this is maybe due to the object detection algorithm of both tools. See testing done below:
Width and height of the tested document:
Test object detected loan_form.pdf:
Tested object detected in online.sodapdf.com:
the documentation is too breif.
can anyone knowa about how to use Element.status() in Raphael.js?
very appreciate if you can give a demo.
Element.status shows the current animation applied to an element OR you can set the status on a particular animation.
Think of an animation interpolating between 0 and 1. So half way through an animation, it would have a value of 0.5. This is applied to whatever attribute is being animated. (So if animating x from 0 to 100 half way through, status will be 0.5 and x will be 50, not accounting for any easing applied like bounce).
So lets suppose instead of creating a nice smooth interpolation between attributes, we want to make an element move in 10 discrete steps. We can set the status each time of an animation manually. Example.
var raphAnimation = Raphael.animation( { x: 100, y: 100 }, 1000);
rect.status( raphAnimation, 0.5 )
example jsfiddle
var rect = paper.rect(10, 20, 300, 200);
var raphAnimation = Raphael.animation( { x: 100, y: 100 }, 1000);
for( var c = 1; c <= 10; c++ ) {
(function() {
var step = c
setTimeout( function() {
rect.status( raphAnimation, 0.1 * step )
}, step * 200)
})();
}
Note: If you repeat using the status set command, I think it will take the animation as fresh. So suppose the animation is from 0->100 and you set status to be 0.5 it will go half way. Now suppose you do the same and call it again with 0.5, it will now be 0.5 of the 'remainder' as it now only has half the distance to traverse.
I want one chart showing temperature with one curve and humidity in percent with a second curve.
I did it.
However the curve of the temperature is small since max is around 22 while humidity Max is around 90.
Does Google chart support the possibility to have 2 scale with y axis?
Thanks
Rod
You need to add a second y-axis. You can do this by setting the vAxes option (which takes an object whose properties are objects with vAxis options), and use the series option to target each series to a specific axis. Here's an example:
vAxes: {
0: {
// options for left y-axis
title: 'Temperature'
},
1: {
// options for right y-axis
title: 'Humidity'
}
},
series: {
0: {
// options for first data series (I'm assuming this is temperature)
targetAxisIndex: 0 // target left axis
},
1: {
// options for second data series (I'm assuming this is humidity)
targetAxisIndex: 1 // target right axis
}
}