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...
Related
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.
I'm setting up a carousel in Sitecore using Glass Mapper. In the foreach loop to generate each carousel item, I can get the items out easily enough and make them editable with the #Editable command. What this doesn't give, however, is finer control over the edit process. For example, I want to edit the background image using a custom button in the Experience Editor, but I need to set that up in a rendering.
If I was using straight Sitecore, it looks like I'd use Html.Sitecore().ItemRendering and pass in the carousel item as a regular Sitecore item. In this case, I have my strongly-type class from Glass Mapper, which can't be passed in that way.
Is there a comparable method in Glass Mapper for setting up an item rendering? Or is there another way to affect the Experience Editor buttons for the carousel items? I've also experimented with setting up a separate edit mode, which would work fine, but I wanted to put together a cleaner editing experience with a more WYSIWYG approach to the item.
You'll have to use Custom User Experience Buttons which will allow you to edit in Page Editor Mode.
I just googled and found couple of good article which might help you.
http://www.nishtechinc.com/Blog/2015/March/A%20Better%20Approach%20at%20Carousel%20Management
http://www.awareweb.com/awareblog/11-25-14-custombuttonspageeditor
Try Html.Glass().BeginEditFrame() functionality built into Glass Mapper, wrapped in a #using block.
It allows you to specify the fields you wish to edit directly as params. Or if you're feeling adventurous, it can point to a full edit frame configuration in the core DB.
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've found no other stackexchange site to ask this question so I present it here. If there's a more appropriate place for it please let me know.
I have just been given a ms-powerpoint template document to fix. It was created by designers using the slide master editor in MS-Office 2011 for Mac. The problem is that when the customer creates a new slide using one of these templates and then wants to insert a chart into one of the designated boxes (which is only one of the things that can be stuck in there) the text in the chart is always set at 18pt. I've looked everywhere for a setting that sets the default font size for charts (and smart art) for only that document but have been unable to find it.
Any pointers or help of any kind would be more than great.
I received the following answer from James Gordon from a Microsoft forum:
Charts are handled by Excel. In Excel you can create Chart Template,
which are saved in (.crtx) file format and will appear in the Ribbon.
The way to do it is to customize a chart and then right-click on the
chart. Use the Save As Template option from the pop-up menu. If you
save your template in the Chart Templates folder (the default when the
save dialog opens), after you quit and then re-open Excel, the
template will be available to you in the Ribbon.
SmartArt is within your PowerPoint presentation. There are various
approaches you might take regarding SmartArt. As you pointed out,
SmartArt can be specified in a Slide Master, or on Slide Design.
Saving a presentation as a Theme (.thmx) is one option. Another save
option is to save as a Template, which is more comprehensive (includes
every aspect of a slide show).
First what I want: The ability to display a grid with multiple columns, each cell having a custom render callback. So you might use such a control to display your inventory in a game, or something like the behaviour in Google Chrome where it shows a grid of popular pages you visit.
I've been playing with CListCtrl and while I can get custom rendering ability on each item, I can't get it work with columns - having say 3 items per row. The control has column-related methods but I think these are specifically for the built-in functionality where different attributes of an item are shown automatically in each column... not for providing a generic grid control.
So, does such functionality exist in MFC? If not then I wonder if the easiest approach is for me to actually insert each of the rows as an Item... and then the custom rendering draws the multiple cells in the row, I could also do custom UI to support clicking on the cells.
But what I really want is to be able to create a custom control, and add this as an item to a list - like in Flex for instance - so I/O etc is automatically handled.
Any advice/information welcome...
Dundas has thrown some of its (excellent) components in the public domain. Their Ultimate Grid is available on CodeProject.
I'm not aware of a built-in control, but I think you should take a look at this.
The article is describing in detail the functionality of a fully featured MFC grid control, derived from CWnd, for displaying tabular data.
YOUR_LIST_CONTROL.SetExtendedStyle(LVS_EX_FULLROWSELECT|LVS_EX_INFOTIP|LVS_EX_GRIDLINES);
I think it will help you (SetExtendedStyle).
I suggest this one:
https://code.google.com/p/cgridlistctrlex/
very complete