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
}
}
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:
Using code from question about picking nice rule/marker interval I created a code that renders rules on the graph.
It has nice intervals of 0.1. But I don't like to display all the numbers, instead, I'd like to increase rule density but only mark every few rules. Like this:
I created an algorithm that does so by multiplying rule interval by a number, then highlighting rules that can be divided by the result. I use fmod because the values can of course be float:
// See https://stackoverflow.com/q/361681/607407 for algorithms
double rule_spacing = tickSpacing(pixels_per_rule);
// These are the highlighted rules - currently it should be every 2nd rule
double important_steps = rule_spacing*2.0;
// Getting the stard draw offset which should be bellow bottom graph corner
double start = graph_math::roundTo(begin.y, rule_spacing);
LOGMTRTTIINFO("Legend from "<<start<<" to "<<values.maxYValue<<" by "<<rule_spacing<<", numbers: "<<important_steps<<'\n');
//Loop until on top
while(start<=values.maxYValue) {
int y = pixelForYValue(start);
// HERE: calculating whether this is the NTH rule!
float remainder = fmod(start, important_steps);
LOGMTRTTIINFO(" "<<" legend at px"<<y<<" with marker "<<start<<" Marker remainder:"<<remainder<<'\n');
if(remainder==0) {
// Draw highlighted rule
}
else {
// Draw normal rule
}
}
The problem is that fmod is rather unreliable. Check this log output where values that can be divided by 0.1 return 0.1 in fmod:
Legend from 95.9 to 96.3097 by 0.05, numbers (important_steps): 0.1
legend at px240 with marker 95.9 Marker remainder:3.60822e-16
legend at px211 with marker 95.95 Marker remainder:0.05
legend at px181 with marker 96 Marker remainder:0.1
legend at px152 with marker 96.05 Marker remainder:0.05
legend at px123 with marker 96.1 Marker remainder:0.1
legend at px93 with marker 96.15 Marker remainder:0.05
legend at px64 with marker 96.2 Marker remainder:0.1
legend at px35 with marker 96.25 Marker remainder:0.05
legend at px5 with marker 96.3 Marker remainder:0.1
I guess I could outsmart this by adding important_steps==remainder, but isn't the function flawed if it actually returns the denominator, which should never happen for % (modulo)?
How do I overcome this with sufficient certainty? Testing snippet available.
Btw, this is how nicely it works once the important_steps is greater or equal to 1:
Perhaps the best way to do this is to round to integers, and then check the difference, like this:
float quotient = start / important_step;
int quot_int = round(quotient);
if (abs(quotient - quot_int) < 1e-10)
{
// Draw highlighted rule
}
else
{
// Draw normal rule
}
EDIT: function round
int round(double x){return floor(x + 0.5);}
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.