I'm new to Google Charts tools and I was wondering what I'am doing wrong. I want to make the BarChart (or ColumnChart) stacked by adding 'isStacked':true but then the chart gives me wrong data.
You can try it yourself on the Google playground with this code
(Just add 'isStacked':true to the options to see the wrong results)
function drawVisualization() {
// Create and populate the data table.
var data = new google.visualization.DataTable({"cols":[{"id":"","label":"Date","type":"string"},
{"id":"","label":"Complaints","type":"number"},
{"id":"","label":"Compliments","type":"number"},
{"id":"","label":"Questions","type":"number"},
{"id":"","label":"Suggestions","type":"number"}],
"rows":[{"c":[{"v":"12\/2011"},{"v":30},{"v":0},{"v":0},{"v":0}]},
{"c":[{"v":"1\/2012"},{"v":93},{"v":"5"},{"v":0},{"v":0}]},
{"c":[{"v":"2\/2012"},{"v":82},{"v":"5"},{"v":0},{"v":0}]},
{"c":[{"v":"3\/2012"},{"v":72},{"v":"10"},{"v":0},{"v":0}]},
{"c":[{"v":"4\/2012"},{"v":68},{"v":"8"},{"v":0},{"v":0}]},
{"c":[{"v":"5\/2012"},{"v":59},{"v":"7"},{"v":0},{"v":0}]},
{"c":[{"v":"6\/2012"},{"v":30},{"v":"3"},{"v":"3"},{"v":0}]},
{"c":[{"v":"7\/2012"},{"v":37},{"v":"3"},{"v":"4"},{"v":"3"}]},
{"c":[{"v":"8\/2012"},{"v":31},{"v":"2"},{"v":"5"},{"v":0}]},
{"c":[{"v":"9\/2012"},{"v":47},{"v":"2"},{"v":"1"},{"v":"1"}]},
{"c":[{"v":"10\/2012"},{"v":67},{"v":0},{"v":"5"},{"v":"1"}]},
{"c":[{"v":"11\/2012"},{"v":38},{"v":"1"},{"v":"4"},{"v":0}]},
{"c":[{"v":"12\/2012"},{"v":14},{"v":"1"},{"v":"1"},{"v":"1"}]}
]});
// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
draw(data,
{title:"Yearly Coffee Consumption by Country",
width:1000, height:400,
vAxis: {title: "Year"},
hAxis: {title: "Cups"}}
);
}
I hope somebody can help me...
Thanks!
I just had the very same problem. The solution is, numeric values should NOT be between quotation marks, otherwise "3"+"4" becomes 34 instead of 7.
Just remove the " marks if there's a numeric value there.
cheers, greg
UPDATE: if you use 'f:' values as well, you will need the quotation marks again, otherwise mouseover might not work on the chart.
{"c":[{"v":"12\/2012"},{"v":14, "f":"14"},{"v":1, "f":"1"},{"v":1, "f":"1"},{"v":1, "f":"1"}]}
Related
firstly apologies: I am a beginner in Earth Engine, but googling my question hasn't yielded any results. I have a reasonable amount of experience with other languages/platforms.
I have a table of data with headers 'name' and 'value' with N entries, I also have a multiband images in which the bands are named the same as the 'name' column in my table.
I want to apply a functions to each band in the image, based on its corresponding value in the table.
I'm struggling to find a way to do this without using loops and getInfo(), both of which I understand are not efficient and generally frowned upon.
I think perhaps I'm missing something fundamental here regarding the interaction between local variables and things occuring serverside - help would be greatly appreciated!
You could perhaps iterate over the band names in the image:
var updatedImage = ee.Image(
image.bandNames().iterate(
function (bandName, acc) {
bandName = ee.String(bandName) // Must cast from ee.Element to actual type
var feature = features
.filter(ee.Filter.eq('name', bandName))
.first()
var value = feature.getNumber('value')
var bandWithFunctionApplied = image.select(bandName)
.add(value) // Apply some function
return ee.Image(acc)
.addBands(bandWithFunctionApplied)
},
ee.Image([])
)
)
https://code.earthengine.google.com/082411908a7525a4c8a87916b5ea88fc
I'm working on a stacked bar chart in Observable's new Plot library. It's not too bad coming from Vega and D3, but I cannot find or figure how to order the resulting stacked bars from the Plot.binX() I'm using.
My actual mark looks something like this today:
Plot.rectY(hourlyUsageData, Plot.binX({
y: "sum",
title: bin => bin[0].Name
}, {
x: d => d3.timeHour.count(d3.timeDay(d.DateTime), d.DateTime),
y: d => d.kWh,
thresholds: 24,
fill: "Name",
//order: "sum",
//reverse: true
}))
Plot.binX() does just fine, resulting in a chart in which the stack is ordered according to the input ordering.
I'd like the stack to be ordered based on a sum, and in fact if I add the Plot.stack option for order (see commented line above), I can order by sum:
Close! Now I just need to reverse the order. I hypothesize that, since I can use the order option, perhaps I can also use the reverse option (see commented line above). That doesn't seem to work.
My second hypothesis is that, since these transforms are supposed to be "composable", that I should be able to combine my binX with a stackY, but I cannot find an example of such a composition. I've tried Plot.stackY(Plot.binX({...}, { ... order:"sum", reverse:true }), and similar variations, but they don't seem to work either.
In summary, I'd love to know how to control the order of the stacks in my stacked bar chart while also using binX. Thanks!
Thank you. It seems that there is a bug and the {order} option is consumed for nothing by the bin transform. We'll try to fix this. In the meantime you can add it "outside" the bin transform like so:
Plot.rectY(data,
Plot.stackY({
...Plot.binX(
{ y: "count" },
{ x: "body_mass", fill: "species", order: "sum" }
),
reverse: true
})
).plot()
Pull-request to solve this issue: https://github.com/observablehq/plot/pull/439
i was trying to run plot of 300,000 data points through leaflet but failed miserably. I found an alternative package called "leaflet.glify". However i could not find any proper documentation for it. I was trying to change the color of the datapoint based on different ID's in the dataset. Not sure how to go about it.
Please help !
You can use color property and return the color rgb value corresponding to the each and every lat-long point plotted.
L.glify.points({
map: this.map,
size:10,
click: function (e, point, xy) {
//set up a standalone popup (use a popup as a layer)
L.popup()
.setLatLng(point)
.setContent("Tooltip content")
.openOn(this.map);
},
data: JSON.parse(JSON.stringify(geoJSONObj)),
color: function(index,latLng){
return dataObject[latLng[0]+","+latLng[1]].color;
},
opacity:1
});
I am plotting a sunburst donut and I cannot figure out why the total is incorrect.
library(sunburstR)
reports <- data.frame(
sequence = c("SVP-VP-Dir-end","SVP-VP-Dir-end","SVP-VP-Dir-end","SVP-VP-Dir-end","SVP-No VP-Dir-end","SVP-No VP-Dir-end","SVP-No VP-Dir-end"),
freq = as.numeric(c("167","60","51","32","5","1","1")))
sunburst(reports, count = TRUE)
It is supposed to be 100% 317 of 317 . Anyone know how to fix this? There is not much documentation on this great package.
Also, I would like it to have a default value in the center of donut.
If there is another way to create an interactive donut using R, please let me know.
Thanks you in advance.
It looks like the default function generating the message in the center of the donut rounds the total value to the nearest ten.
But you can customize this function using the explanation argument of sunburst. Oddly, the customized function (in javascript) must be provided as a string.
Try the following function:
custom.message = "function (d) {
root = d;
while (root.parent) {
root = root.parent
}
p = (100*d.value/root.value).toPrecision(3);
msg = p+' %<br/>'+d.value+' of '+root.value;
return msg;
}"
Now:
sunburst(reports, explanation = custom.message )
will generate the donut displaying exact total values. The count argument is no longer needed, as it is used by the default explanation function.
The value returned by custom.message is html code. As you can see, I've just inserted a line break (<br/>). You can modify the msg return value to further customize the look and feel.
I want to hide the horizontal major/minor lines that appear on Graph2D Y-axis values of a scatter plot/timeline.
I have tried to make use of showMinorLines and showMajorLines without much success. The syntax am using is:
graph2d.setOptions({showMinorLines: false})
However, it generates an error that states:
Unknown option detected: "showMinorLines". Did you mean
"showMinorLabels"?
Problem value found at: options = { showMinorLines }
vis.js:23607 Errors have been found in the supplied options object.
Any help would be much appreciated?
Update: Attaching image.
Thanks for bringing this up. This is an fault in the documentation: in v4, this option has been renamed to get a more consistent API. You now have the following four related options:
{
showMinorLabels: true | false, // minor labels and lines on horizontal axis
showMajorLabels: true | false, // major labels and lines on horizontal axis
dataAxis: {
showMinorLabels: true | false, // minor labels and lines on vertical axis
showMajorLabels: true | false, // major labels and lines on vertical axis
}
}
We will fix the docs, sorry for the inconvenience.