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.
Related
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 have a stacked bar chart, split by a boolean field. This causes the legend to appear with two colours (cool!) but the legend has these values: true and false. To the reader, there is no context for what is true or false means.
In this case, the field name is is_active.
At the very least having the field name appear in the legend will help people read and understand the chart.
Better: Is there a way to replace "true" and "false" with "Active" and "Inactive" respectively?
I tried this Advanced->JSON Input:
{
"script": {
"inline": "doc['is_active'].value ? 'Active' : 'Inactive'",
"lang": "painless"
}
}
Which results in an error "String cannot be cast to java.lang.Number". If I replace the strings in the JSON Input with numbers, the numbers do indeed appear in the legend. No help though.
Instead of using term aggregation in split series bucket, use filter aggretation. Create two filters, one for true and one for false and apply custom labels there.
I was using Visjs and displaying rectanglar nodes with text. Some of the nodes can have a couple of lines of text so I added a heuristic algorithm to work out roughly where the line breaks should go to avoid very wide, single line chunks of text in very wide but very short nodes.
The trouble is, even with physics turned on, I still get overlapping nodes.
Is it possible to tell the layout engine that, under no circumstances (or physics models), should any two nodes overlap?
Well, check out the physics configuration example: as you can see, barnesHut solver has avoidOverlap property which prevents overlapping even when springConstant is equal to zero. Try this:
var options = {
"physics": {
"barnesHut": {
"springConstant": 0,
"avoidOverlap": 0.2
}
}
}
and tweak the constants to fit your needs (the example linked above is useful for that).
From its documentation:
Accepted range: [0 .. 1]. When larger than 0, the size of the node is taken into account. The distance will be calculated from the radius of the encompassing circle of the node for both the gravity model. Value 1 is maximum overlap avoidance.
To be noted, though: I've seen a recommendation to start with low values of avoidOverlap (like 0.1) to simplify the task for the solver. I can't recall where exactly I've read this.
I used levelSeparation to adjust the horizontal node distance, and nodeDistance to adjust the vertical node distance:
const options = {
layout: {
hierarchical: {
direction: 'LR',
sortMethod: 'directed',
levelSeparation: 300,
},
},
physics: {
hierarchicalRepulsion: {
nodeDistance: 140,
},
},
...
}
I would like to add a legend to a surface plot.
I have tried, doing like this :
X=[0:0.3:2*%pi]; //example data
[x,y]=ndgrid(X,X);
z1=sin(X')*cos(X);
z2=z1/2;
z3=z1/3;
figure=scf();
surf(x,y,z1);
surf(x,y,z2);
surf(x,y,z3);
axes=figure.children(1);
axes.children(1).foreground=color(0,0,0);
axes.children(2).foreground=color(0,0,0);
axes.children(3).foreground=color(255,0,0);
axes.children(1).color_flag=0;
axes.children(2).color_flag=0;
axes.children(3).color_flag=0;
axes.children(1).color_mode=color(0,255,0);
axes.children(2).color_mode=color(0,0,255);
axes.children(3).color_mode=0;
legend(['z1','z1 divided by 2','z1 divided by 3'],opt=2,font_size=2);
I get the following error message:
!--error 10000
legend : Neither handle of type 'Polyline' can be found.
If it's not possible to do this with the basic version of Scilab, could you please advise to me some libraries Scilab permitting to do this.
Thanks for your help.
Legend not possible for surface plots
Legends is only for plot2dx graphs as stated in the documentation of legend properties:
This entity defines the parameters for legends drawn below plot2dx
graphs or created by the captions function.
Alternatives
You could simply add a title using xtitle
xtitle('z1,z1 div by2, z2 div by 3');
You could draw a box using uicontrol and style it using uicontrol_properties:
fig = gcf();
uicontrol(fig, "style", "text", ...
"string", "<html>z1<br>z1/2<br>z1/3</html>", ...
"position",[100 100 100 100], ...
"fontsize",15);
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"}]}