trying to get multiple charts to align in width

7 posts, 0 answers
  1. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 18 May 2015 Link to this post

    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
  2. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 18 May 2015 in reply to Doug Link to this post

    I didn't say - I am using RadHtmlChart and for the export image RadClientExportManager
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 21 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 21 May 2015 in reply to Vessy Link to this post

    all I had to do was add these 2 lines to the codebehind
    LineChart.PlotArea.Series[0].Name = "this is my series &nbsp;&nbsp; name";
    LineChart.ChartTitle.Text = "this is my Title &nbsp;&nbsp; name";
  6. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 26 May 2015 Link to this post

    Hi Dough,

    Thank you for the clarification. Exporting html elements (like &nbsp; 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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Doug
    Doug avatar
    68 posts
    Member since:
    Aug 2014

    Posted 26 May 2015 in reply to Vessy Link to this post

    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.


  8. Vessy
    Admin
    Vessy avatar
    1380 posts

    Posted 29 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017