Writing a custom text at an arbitrary position in a chart - dynamics-crm-2011

I've created a nice chart but there's one thing missing. I'd like to be able to set a text somewhere in it. The optimal solution would be e.g. the current date smacked in huge yellow letters right in the middle of my graph.
I've googled for such a thing but none of the links (proof that I've googled #1, proof that I've googled #2) gave any hints on whether it's possible or not. In fact, the mock-up image in the second link would be something for me if the descriptions and arrows weren't drawn afterwards in an image processor.
NB. It's not a report at all. It's just a chart - a single, lonely chart - that displays values of a couple of series. I get to control the appearance, the legend etc. However, I'd like to put a floating text object (DIV formatable by CSS would be perfect), sprite, overlay, call it whatever you'd like, that will get its value from a given field (e.g. the current date).
And if I can position it freely anywhere over the graph, that'd be even "perfecter" but I'd settle for placement on form "top-right" or such. Alternatively, if there's an option to combine two "views" on top of each other or anything like that (I'm beating around the bushes with this).
Is that achievable and if so how?

Right, I've had a play, a good dig around with the SDK, a bit of a google and this is the best I can come up with.
I know how to place text at arbitary positions on the chart, but only with static text, e.g. I don't know how to bind the text dynamically to anything - I suspect this is more to do with CRM than Charts, I couldnt find much documentation for CRM and Charts.
So I've found that TextAnnotation allow you to bascially place text wherever you like. This is contained within theAnnotations collections.
For example:
<Chart>
...
<Annotations>
<TextAnnotation Text="This is an annotation" Name="TextAnnotation1" X="20" Y="50">
</TextAnnotation>
</Annotations>
...
</Chart>
So important to note that the position of the TextAnnotation is relative, e.g. the annotation will appear 20% of the width of the chart from the left. 0,0 is the top left corner. The MSDN has some more detail on positioning.
So I can create a chart like this:
HELLO WORLD! is the annotation.
Using this xml:
<Chart Palette="None" PaletteCustomColors="55,118,193; 197,56,52; 149,189,66; 117,82,160; 49,171,204; 255,136,35; 97,142,206; 209,98,96; 168,203,104; 142,116,178; 93,186,215; 255,155,83">
<Series>
<Series ShadowOffset="0" IsValueShownAsLabel="True" Font="{0}, 9.5px" LabelForeColor="59, 59, 59" CustomProperties="PieLabelStyle=Inside, PieDrawingStyle=Default" ChartType="pie">
<SmartLabelStyle Enabled="True" />
</Series>
</Series>
<ChartAreas>
<ChartArea>
<Area3DStyle Enable3D="false" />
</ChartArea>
</ChartAreas>
<Legends>
<Legend Alignment="Center" LegendStyle="Table" Docking="right" IsEquallySpacedItems="True" Font="{0}, 11px" ShadowColor="0, 0, 0, 0" ForeColor="59, 59, 59" />
</Legends>
<Titles>
<Title Alignment="TopLeft" DockingOffset="-3" Font="{0}, 13px" ForeColor="0, 0, 0"></Title>
</Titles>
<Annotations>
<TextAnnotation Text="HELLO WORLD!" Font="Stencil, 15.75pt, style=Bold, Italic, GdiCharSet=0" Name="TextAnnotation1" X="20" Y="50" ForeColor="Orange">
</TextAnnotation>
</Annotations>
</Chart>
If that doesnt achieve your requirements I would suggest having a look at an SSRS report or some other custom piece IFramed into the dashboard.

You might want to check this link where they put descriptive text on a map. I haven't got that to work (didn't try very hard, either) but it's pretty easy to set just some text instead of a graph by the following code.
<visualization>
<primaryentitytypecode>blobb</primaryentitytypecode>
<name>My custom name</name>
<webresourcename>MyCustomHttpFile</webresourcename>
</visualization>
I would be nice indeed to surprise a customer with a flash text sometimes so the idea is worth exploring. Strangely, I haven't found any good guide on how to do that.

Related

Customize the CSL style for APA 7th edition showing "et al." always in italic

I use Mendeley and I'm trying to create a customized CSL style for my citations for research papers. "et al." must be italicized.
I know it is possible, because I searched and had find a post here about it - Is it possible to italicize "et al.".
However, I can't put it to work adjusting APA 7th edition custom citation style, that is the style I need to customize.
I think I have to change the code around line 388.
I even understood that I have to use editor.citationstyles.org because csl.mendeley.com has a bug and is not working, but I don't get any results changing the code to:
<names variable="author">
<name and="symbol" delimiter=", " initialize-with=". "/>
<substitute>
<text macro="title-intext"/>
</substitute>
<name and="text"/>
<et-al font-style="italic"/>
</names>
I opted to maintain part of the existing code for the block names variable="author" because I don't know what it makes.
Can you help?

SVG-animation on hover - first steps, how to?

I'd like to do an animation to an element when hovering it.
As I do use svg-elements for both situations (standard and hover-state) I guess I must somehow manipulate the first svg-element when hovering it by editing the svg-code inline.
I basically'd need a starting point there:
How would I "redraw" in an animated manner the hover-image and not just swap it?
Do I need a 3rd party library (which)?
If I had multiple of these situations, how would I keep my code clean by not having 10 svg-codes inline within my html-source?
Thanks for your answer(s)!
The code for the svg-image(s) is here
<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 800">
<defs><style>.cls-1,.cls-2{fill:none;stroke:#000;}.cls-1{stroke-miterlimit:10;stroke-width:7px;}.cls-2{stroke-linejoin:bevel;stroke-width:5px;}</style></defs>
<title>arrows_demoZeichenfläche 1</title>
<line class="cls-1" x1="325.5" y1="333" x2="325.5" y2="539"/>
<polyline class="cls-2" points="242 455.67 325.75 539.42 409.42 455.75"/><path class="cls-1" d="M670.5,135.79c0,11.62-8,11.73-8,23.35s8,11.68,8,23.3-8,11.65-8,23.28,8,11.64,8,23.26-8,11.63-8,23.25,8,11.63,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25-8,11.62-8,23.25,8,11.62,8,23.25-8,11.63-8,23.25,8,11.63,8,23.25v31"/>
<polyline class="cls-2" points="587 455.67 670.75 539.42 754.42 455.75"/></svg>
You could use JavaScript to manipulate the value of the points attribute, but such changes would be sudden, so the change would look like a stop motion film.
Like this Codepen, what you could do is give a path element a stroke-dasharray that is equal to the getTotalLength of the path in order to "erase" the straight line (of the arrow) off the page, then quickly switch the value of the d attribute, and then "redraw" the line back onto the page?
However, I don't believe that's what you're looking for. I believe HTML5 Canvas, with my limited knowledge about it, would be the more feasible option for what you're trying to accomplish.
Actually, I guess it might be possible using a CSS3 3D transform, like so. The problem, however, is that the line doesn't have any depth, so when you initially set rotateX(90deg) on the path in CSS the line becomes invisible instead of appearing as a straight line...

change svg:g id to inkscape:label

I made a vector graphic in Inkscape, including layers and sub-layers for further use in Processing. I named all the layers in the UI, and realized that the final SVG only creates an inkscape:label attribute with that name, but id remains generic:
<svg:g id="layer1" inkscape:label="My custom label">
I know I can manually edit the labels in the XML editor, but is there a setting somewhere to automatically use the layer name as id?
I recently came across this question, as I was looking for the same topic. As it turned out, Inkscape (v0.92) has functions for that purpose now.
You can set IDs, and Labels in the Inkscape GUI in Object Properties menu, and they will be applied to the XML code then.
Example
Inkscape GUI
Draw a yellow rectangle and select it
Click on Object -> Object Properties...
In the menu set ID to yellow_rect and Label to #yellow_rect
Apply changes by a click on Set
To complete this example, repeat the steps above to create red_rect, set Label and ID
Eventually, group both rectanbles and set identifiers for the group as well.
XML Code
When I open the SVG file, Inkscape put my identifiers to the appropriate XML tags.
<g
id="rect_group">
<rect
rx="0.11797347"
y="250.69791"
x="5.0270834"
height="18.785416"
width="30.427082"
id="yellow_rect1"
style="fill:#f4ff00;fill-opacity:1;stroke:#000000;stroke-width:0.52916667;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
<rect
rx="0.11797347"
y="258.89999"
x="24.606249"
height="16.933332"
width="33.602081"
id="red_rect1"
style="fill:#f40000;fill-opacity:1;stroke:#000000;stroke-width:0.52916664;stroke-linejoin:round;stroke-miterlimit:3.79999995;stroke-dasharray:none;stroke-opacity:1" />
</g>
I have the same requirement when I am creating a svg for Fritzing, because fritzing doesn't refer to the inkscape:label. In such circumstance, I can make sure that label holds the legit value for id. So I make a script to do saving myself out of the dirty and heavy job.
Please note that the script ONLY READ 'Plain SVG' format.
https://gist.github.com/TerrenceSun/972ef4eea97f331af1e6abfcafb7c6e5
I don't know about a setting to automatically use the layer name as id. But why not do it the other way round: if you remove the inkscape:label attribute, then the layer name automatically becomes the id of the svg:g in the inkscape UI.
The attribute inkscape:groupmode=layer is enough to make the svg:g a layer element.

Change multiple colors of a SVG object

I have a SVG logo rendered to the canvas using fabric.js, the original SVG is all black in color but I need the user to be able to change the color of each different parts of the logo, resulting in a object with multiple colors, e.g.:
wikimediauruguay.org/images/5/53/Wikimedia-logo.png
How can I achieve this? If I just use object.setFill() it changes the color of the entire object but I need to change the color of every part separately to whatever colors the user choose. Thanks.
EDIT: found the solution, just posted my answer below in case somebody else has the same question.
Perhaps someone who knows something about fabric.js would answer in a way that makes more sense for your case, but with plain old svg, an object is often a <g< element with things ( like <rect>, <path>, <ellipse>) inside. Each child of the group, can have its own event handler:
<g>
<path onclick='handle(evt)' attrs=stuff />
<rect onclick='handle(evt)' attrs=stuff />
<circle onclick='handle(evt)' attrs=stuff />
</g>
The function activated by the click can then interrogate evt.target to see which of the subelements received the click, sorta like this:
if (evt.target.nodeName=="path") {evt.target.setAttribute("fill","purple")}
Solved mi problem in a very simple way: I just needed to edit the SVG on Illustrator so that every different colored part of the logo will be on a different layer, then when I loaded the SVG via fabric.loadSVGFromURL() each layer will be treated as a different object by fabric.js, then I just could edit each object (layer) separately (setFill(), etc).

Windows Store App: using XAML paths in Grid layouts (C#/XAML)

I'm starting out the design of my app by using one of the templates provided with VS2012, where you have an Image displayed next to some TextBlocks. I want the user to be able to pick a photo or similar to be the image but, in the event that they haven't done this, I want to provide a default icon.
My initial thinking was to create PNGs of the different default icons, at the different sizes that the Image icons appear at and just return those from the binding if the user hasn't specified an image, but it occurred to me that if I can use XAML Paths instead, the default icons will appear crisper because they will be drawn as vectors rather than bitmaps.
I'm not sure if that decision is a mistake but it is causing me a few headaches :-(.
The first challenge I've tried to solve is how to use binding to display either an image or the XAML Paths. My solution here was to use a Button instead of the Image, and bind Content. The Content binding returns a Canvas object that either holds the Image or the set of Paths that define the icon.
That works until I change to the snapped view, which then has smaller Image/Button elements than the unsnapped view.
So the second challenge, and the primary reason for this question, is to seek advice on how best to deal with the differing sizes of the Buttons. In the unsnapped view, the Button is 110x110. In the snapped view, the Button is 60x60. In the research I've done, the simplest way to resize the paths seems to be to use a Transform on the Canvas but since the Canvas is being returned from the Binding call, the code-behind won't necessarily know what size the parent Button is and therefore won't be able to include the Transform.
I can't use a DrawingBrush because these aren't valid in Windows Store Apps.
Is there a clean solution to this or should I go back to the simpler but slightly lower quality solution of using pre-created PNGs?
Thanks.
The solution I adopted in the end was to use two items - a button and an image - each wrapped in a border that allowed me to make only one of the items visible, depending on whether or not a bitmap image was available:
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="250" Height="250" Visibility="{Binding ImageIsAvailable, Converter={StaticResource HideIfTrue}}">
<Button Content="{Binding ImageContent}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0" Style="{StaticResource UnstyledGraphicsButtonStyle}" Width="{Binding ImageWidth210}" Height="{Binding ImageHeight210}" Foreground="white" Padding="0" Background="Transparent" BorderBrush="{x:Null}" IsEnabled="False" />
</Border>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Visibility="{Binding ImageIsAvailable, Converter={StaticResource DisplayIfTrue}}">
<Image Source="{Binding Image250}" Stretch="{Binding Stretch250}" AutomationProperties.Name="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
In this example, I'm wanting the item to be 250px by 250px. The binding for Stretch is so that I can handle images that are bigger and smaller than 250px and stretch accordingly.
For the button, the content actually comes from a declared string resource, e.g.:
<x:String x:Key="building">M13.982995,32.651007L13.982995,37.332006 18.665994,37.332006 18.665994,32.651007z M5.3319988,32.440006L5.3319988,37.332006 10.225996,37.332006 10.225996,32.440006z M34.665606,29.33198L34.665606,37.313 37.332797,37.313 37.332797,29.33198z M29.332198,29.33198L29.332198,37.340984 31.999405,37.340984 31.999405,29.33198z M13.923995,24.000005L13.923995,28.740005 18.665994,28.740005 18.665994,24.000005z M5.3319988,24.000005L5.3319988,28.839005 10.171997,28.839005 10.171997,24.000005z M34.665606,18.665992L34.665606,26.684976 37.332797,26.684976 37.332797,18.665992z M29.332198,18.665992L29.332198,26.644998 31.999405,26.644998 31.999405,18.665992z M13.331995,16.000003L13.331995,18.666003 15.998995,18.666003 15.998995,16.000003z M7.9989967,16.000003L7.9989967,18.666003 10.665997,18.666003 10.665997,16.000003z M26.665998,13.331976L39.998998,13.331976 39.998998,42.666973 26.665998,42.666973z M13.331995,10.666002L13.331995,13.332002 15.998995,13.332002 15.998995,10.666002z M7.9989967,10.666002L7.9989967,13.332002 10.665997,13.332002 10.665997,10.666002z M10.665997,0L13.331995,0 13.331995,5.3340011 15.998995,5.3340011 18.665994,10.666002 18.665994,18.666003 21.331993,18.666003 23.998992,21.332004 23.998992,42.667007 0,42.667007 0,21.332004 2.6659985,18.666003 5.3319988,18.666003 5.3319988,10.666002 7.9969978,5.3340011 10.665997,5.3340011z</x:String>
This comes from Metro Studio.
The height and width bindings are because my different SVG items have different width & height ratios so I bind to code-behind to return the correct figures for the desired size. Unfortunately because you can't pass parameters, I end up with different "ImageHeightXXX" calls for different values of XXX depending on the XAML.
Advice on how to get the string defined can be found here: http://www.jayway.com/2012/11/27/styling-windows-8-4-the-button/

Resources