trying to get multiple charts to align in width

[Doug]

I have multiple charts down the page and I have been trying to figure out ways to get them to align.
when the text of the legend is smaller and greater it auto resizes the chart plot area to different widths.
my latest fix I use monospace font and put a fixed number of characters into the legend.
the whitespace at the right side of legend crops so I had inserted html spaces & nbsp;
issues with this
1) font is different from rest of page and not best font for design
2) the right axis of my charts may have different numbers which may effect the width also and slightly show charts not aligned
3) the export image shows html & nbsp; as text instead of white space.

so to fix the nonbreaking space showing in the export I instead use spaces and add a period at the end.
issues with this method
1) looks stupid with a period out in right field

is there any way to
1) add a title to the legend to make it fixed width such as a number of _
2) set the width of the plot area
3) fix the export of image / pdf to not show non-breaking spaces

[Doug]

I didn't say - I am using RadHtmlChart and for the export image RadClientExportManager

[Vessy]

Hi Doug,

Please, find my comments on the asked questions listed below:

1) I am afraid that setting width to the chart legend is not supported in Kendo UI DataViz and so it is not available also in the RadHtmlChart control.

2) The width of the HtmlChart elements depends on the total width set to the control. Once all labels, legends, etc. are rendered, the remaining width is given to the plot are. The only way to align several charts, having different width of their labels is to set different width to the whole controls. For example:

<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
    <PlotArea>
        <Series>
            <telerik:LineSeries Name="Week 15" MissingValues="Interpolate">
                <Appearance>
                    <FillStyle BackgroundColor="Blue" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15" />
                    <telerik:CategorySeriesItem Y="23" />
                    <telerik:CategorySeriesItem Y="71" />
                </SeriesItems>
            </telerik:LineSeries>
           ...
</telerik:RadHtmlChart>

<telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="810" Height="500" Transitions="true">
    <PlotArea>
        <Series>
            <telerik:LineSeries Name="Week 15" MissingValues="Interpolate">
                <Appearance>
                    <FillStyle BackgroundColor="Blue" />
                </Appearance>
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="1500" />
                    <telerik:CategorySeriesItem Y="2300" />
                    <telerik:CategorySeriesItem Y="7100" />
                </SeriesItems>
            </telerik:LineSeries>
           ...
</telerik:RadHtmlChart>

3) I tried to reproduce the described exporting problem but the &nsbp; entities are not rendered as text on my side. I am attaching my test page to this reply - are you reproducing the problem with it? If no, can you modify it up to a point where the issue occurs and send it for a further investigation?

Regards,
Vessy
Telerik

[Doug]

all I had to do was add these 2 lines to the codebehind
LineChart.PlotArea.Series[0].Name = "this is my series    name";
LineChart.ChartTitle.Text = "this is my Title    name";

[Vessy]

Hi Dough,

Thank you for the clarification. Exporting html elements (like   entities) from the chart's elements is not supported and there is no way to workaround this behavior. The only possible workaround I can suggest you is to remove the html elements before exporting, so they will not be rendered as text.

Regards,
Vessy
Telerik

[Doug]

I have tried replacing the html text just before export and my export is always blank.
<div id="divExport" class="exportWrapper"
I added an ID to the div export wrapper
then in the function if I just add this 2 lines

var sDiv = document.getElementById("divExport");
sDiv.innerHTML = sDiv.innerHTML;//.replace(/&nbsp;/g," ");

this causes the exported image/pdf to be blank. I have verified that the div is still has same content. but the assignment, even if it does no changes causes the export to be blank.

[Vessy]

Hi Doug,

It seems that the browser needs a little more time before the html content of the element is fully changed. Giving a little timeout to the replacement logic fixed the issue on my side:

function exportRadHtmlChart() {
    setTimeout(function () {
        var sDiv = document.getElementById("divExport");
        sDiv.innerHTML = sDiv.innerHTML;//.replace(/ /g," ");
    }, 100);

    $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".exportWrapper"));
}

Regards,
Vessy
Telerik