When I try to show the bar value in the bar chart of apache superset, y axis bar values overlap with each other.
To fix this issue, I want to rotate the y-axis values with 45 degree so that those values will look vertically and won't overlap with each other, just like it is there in x-axis values.
Do you prefer grouped or stacked bars. Using stacked bars would be a shortcut to solving this.
I don't have an easy but bad answer for you, and a more difficult but rational answer.
The bad/easy answer: You might be able to do this with CSS, at least in any given dashboard. For that, you'd want to take your Dashboard into Edit mode, and pick "Edit CSS" from the "..." menu in the top right. There, you should have access to write some clever CSS selectors (let me know if you need help) and tweak CSS properties of the SVG text element (i.e. text-anchor, transform). That said I think you're going to have a bad time with this approach, since you don't have access in CSS to the values you might need for `translate(x, y). So, that brings us to...
The better/harder answer: You could edit the plugin! One caveat is that we'll be replacing some visualizations in the near future (including the Bar Chart) with ones based on Apache ECharts. Meanwhile, you could open up a PR on the Superset-ui repo at https://github.com/apache-superset/superset-ui. The NVD3-based plugin lies in there, as do the controls, where you might be able to add additional controls for rotation.
Door #3, of course, would be to write your own visualization plugin (or help us with the ECharts refactor!) but that's another conversation entirely.
Sorry this isn't more directly helpful, but I hope it gives you more avenues to explore.
Related
I'm having a mare trying to get names to appear alongside data on a google bar chart. It should be simple!! Looking at the examples I should not have to add any options at all, they should appear by default but they dont. Even when I copy/paste the examples from
https://developers.google.com/chart/interactive/docs/gallery/barchart
They render without the names against the rows. Can anyone take a guess as to why that might be?
If I position the vAxis.textposition as 'in' then they DO appear in the bars, but when I put them to 'out' they dont. I've configured the text colour to be black in case they're writing in white, but they still will NOT appear.
Any help or ideas gratefully received
This was because I had a style that was being applied within the generated chart HTML. Even though the rest of the content looked fine, the sizing meant the labels were not generated
Im trying to do a simple animation and the scales x value is constant and i dont need to edit at all. however it still show on the graph editor which would be fine if the handles on the keyframes didnt overlap. its not preventing me from getting the work done but its making it take a lot longer having to fiddle with finding just the right spot to grab the proper handle
Have you tried the "Separate Dimensions" button?
Separate Dimensions
If that doesn't work, you could try tying the property you want to edit (the y-value) to a slider value via an expression, and just editing in the expression.
I'm working with the Visualization API and column chart package for Google Charts. I can generate a graph with the data I want, but can I modify parts of the chart after the page has loaded? Specifically, I want to change the color of one column. I've done this by editing the DOM in Chrome's Element's Panel tool, but is there a way I can actually code this into my page, or am I out of luck? Thanks!
I had a similar challenge. In my case I needed a different color for each bar in a bar chart, something that the vis api doesn't support.
I ended up with this (using jquery, but no reason why it can't be done just using native dom functions)
statusCols btw is just an array of html colors...
function colorBars(){
$("#masterstatus g rect[fill='#3366cc']").each(function(){$(this).attr("bar", 'true')})
$("#masterstatus g rect[bar='true']").each(function(barNo){
$(this).attr("fill", statusCols[barNo]);
});
}
The secret (as it sounds like you have already discovered) is in identifying the dom element to change, that's the $("#masterstatus g rect[fill='#3366cc']") bit - I'm just selecting bars in the default color and iterating through them, in your case you want to pic an ordinal (eg the third one in the collection)
Hope that helps.
Actually I hope even more that someone else comes up with a better way...
i'm trying to create some charts with google charts api. I need a bar chart with values placed directly on the chart (not on the tooltip which is set by default). I know that it was possible in Image Charts (which are now deprecated). Is there any way to achive a similar result in Google Charts? I will be grateful for any help or advice...
Here are some examples of what i want to achieve:
No, there isn't. See the answer in this question.
Quote follows:
This feature is not currently supported. The only way to implement it is to write some fancy javascript to create it.
I am no pro at working with SVG with javascript, and won't pretend to be. I'll let you know what I found out with Firebug, and share that.
Using this chart I inspected the SVG element that's created. It has 5 different <g> (I'm assuming group) elements.
g[1] contains information on the title.
g[2] contains the legend
g[3] contains the chart information (sub-groups with the chart
area, gridlines, series, axis label values, etc.) -- when a point is
selected, this shows the circle/double-circle for that point too
g[4] contains axis titles
g[5] contains the tooltips in two separate groups, but only on
mouseover
Here is the function in the code that gets triggered when you mouseover a point:
Y.Ov=function(a,b,c){a=new kv(a);var d=this.Mf.pk(Wj);b=b[zc](sd);d[w](this.Mf[sb](b[0]));for(var e=1;e<b[L];++e)d[w](this.Mf.pk(ti)),d[w](this.Mf[sb](b[e]));Qt(d,c);a.t()[w](d);a.Zz(100);a.Yz(100);this.on[y](a);return a};Y.appendChild=function(a,b){if(b){var c;if(b[Bc]==Sv){if(!b.Th())return;c=b.t()}else c=b;a.t()[w](c)}};Y.replaceChild=function(a,b,c){a.t().replaceChild(b,c);Cu(c)};Y.Fg=function(a){a.Th()&&this.xs(a.t())};Y.xs=function(a){this.Mf.Fg(a)};Y.ds=function(a){this.Mf.removeNode(a);Cu(a)};
This probably doesn't help you. I can't find any easy way to create a workaround for this (oh-so-needed) feature. Sorry there's no solution yet!
I have a question regarding a platform I'm developing called e-cidadania (GPL). One of the applications will be something like a blackboard where you can put messages. I've been requested to do it like a cartesian grid (p.e. x = good/bad, y = expensive/cheap). My question is, does anybody know about an application like that for django? Or in case that there isn't, how can I do it? I have no idea where to start.
I'll explain a use case, if someone didn't understand: You are in a classroom, the teacher draws on the blackboard the axis and tells the students to write a note. After that every student will put his note according to the axis.
I am not sure if I completely understand your question, but if I'm correct you want the user to input text (name of restaurant or something like that) and instead of showing 2 sliders or dropdown boxes for rating and price, you want to show a cartesian chart where the user can click somewhere, thus entering the 2 values with one click.
This has nothing to do with Django or Python, this is pure client side. Think javascript. One way is to show an image with the cartesian grid, set an onclick handler and see where in the image the click was made. Showing the selected point could be done simply by setting a colored div with an absolute position (relative on the position of the image).
I don't know any plug-and-play solutions, but building this shouldn't be too hard.
On a separate note: I doubt this will actually be more userfriendly for the user then simply using two sliders.
Update:
Or if you want to show a big cartesian chart where the user actually has to input the text on the correct position, this can be done with the same idea: create the text-input, but hide it (display:none). Then when the user clicks somewhere on the chart, move the text-input to the correct position and show it.
This may be a little far fetched, but instead of doing this with django alone, why dont u do this client side using javascript?
Hear me out here.
The highcharts graphing plugin has an option that allows u to add points on a (cartesian) graph. Check this example. The plugin also allows you to display custom messages when hovering on points, so you could use that to display the actual message, and you could handle the actual saving of the new message by submitting the newly added message via Ajax.