Hi, Is it possible to separate ultrachart legend into a custom panel? I want to put my legend in a movable panel so that client still can view the whole chart. Having the legend beside the chart lessen the space for the chart.
Hello ninj23,
Thank you for posting in our community.
I am currently discussing this matter with our senior developers. I will keep you posted on the progress of this issue and I will get back to you as soon as I have any new information.
Please feel free to contact me if you have any additional questions regarding this matter.
Or maybe.... Is there any Ultrachart event where I can access the list of the items that is plotted in my chart together with its corresponding colors? If I could get those information, I'll just push it to my customized panel (which is movable) and there I can just loop through it and display it by order.
I believe the FillSceneGraph is the event that you are looking for. This is the server side event where you can access, add and remove Primitives before the chart is rendered. Some further reference about FillSceneGraph event could be found at:
http://help.infragistics.com/Help/Doc/WinForms/2014.1/CLR4.0/html/Chart_FillSceneGraph_Event.html
Additionally, what I can suggest as an alternative approach is adding a second chart, identical to the first one and removing plot area, leaving only the legend(which respectively will be identical). Since the chart along with its legend is rendered as an image this could be achieved by using a jQuery to crop the image and leave only the legend. With this approach the legend will be displayed outside of the chart and all the chart area of the first chart will be used for the chart itself. For example:
<script type="text/javascript" id="igClientScript"> $(document).ready(function () { $("#UltraChart2_BaseImage").resizecrop({ width:400, height:80, vertical: "bottom" }); }); </script>
<script type="text/javascript" id="igClientScript">
$(document).ready(function () {
$("#UltraChart2_BaseImage").resizecrop({
width:400,
height:80,
vertical: "bottom"
});
</script>
I made a small sample and I am attaching it for your reference. For my sample I am using resize-crop plugin to crop the image however you could use any plugin of your choice.
Please note that in order to make the two charts identical they should use the same data source, the ColorModel for both of them should match etc.
I am attaching my sample project for your reference.
Alternatively, I can suggest you the igDataChart component. This chart is a part of our IgniteUI jQuery Controls. This is a charting control for rendering various kinds of charts into HTML5 Web applications and sites. It uses the new Canvas tag in HTML5 to plot data series on web pages.
In this chart the legend is implemented with a separate control from the IgniteUI library called igChartLegend and require separate div element on the page. This means that the legend of the igDataChart can be easily manipulated.
Some further reference about igDataChart could be found at:
http://help.infragistics.com/doc/jQuery/2014.1/CLR4.0/?page=igDataChart_Overview.html
http://help.infragistics.com/jQuery/2014.1/ui.igChartLegend
I hope you find this information helpful.
Please let me know if you need any further assistance with this matter.
Hi. thank you for all the replies. I will check on that FillSceneGraph event.
Thank you for the sample code, but Im working with windows form right now. I can use it though with my future projects. I'll keep it. Thanks! :)
In the meantime, I decided to create a custom form where I can push all my item descriptions that I could get from my dataset. And the colors, well, I get it from the list of the colorpalattes my ultrachart have. (But how about the continuous coloring of it?) I solved it by just increasing the given color list that i have. I dont know if it is the right thing but currently, my ultrachart have this following settings:
this.UltraChart.ColorModel.ModelStyle = Infragistics.UltraChart.Shared.Styles.ColorModels.CustomLinear; this.UltraChart.ColorModel.ColorModel.CustomPalette = new Color[] {Color.FromArgb(79,129,189), Color.FromArgb(192,80,77),Color.FromArgb(155,187,89), Color.FromArgb(128,100,162), Color.FromArgb(75,172,198), Color.FromArgb(247,150,70)}; this.UltraChart.ColorModel.ColorModel.Scaling = Infragistics.UltraChart.Shared.Styles.ColorScaling.Increasing;
so I supposed increasing as brightening of color? So I use this piece of code for the brightening effect :
Color c1 = Color.FromArgb(79, 129, 189);LegendBox.Appearance.BackColor = Color.FromArgb(c1.A, (int)(c1.R * 1), (int)(c1.G * 1), (int)(c1.B * 1));
Anyone have other suggestion?
Thank you for getting back to me.
Your approach to add more colors to the CustomPallete is correct. This is the right way to control what are going to be the colors for the bars in your chart.
Setting the scaling (which is responsible for how the chosen colors are scaled between each series of data) to increasing will increase the brightness/contrast between sets.
What I can suggest regarding your second requirement is having a look at the following article, which describes how colors could be made lighter or darker:
http://www.pvladov.com/2012/09/make-color-lighter-or-darker.html