Synchronize size/width for two RadCartesianChart's

9 posts, 3 answers
  1. Maurer
    Maurer avatar
    11 posts
    Member since:
    Jan 2015

    Posted 07 Aug Link to this post

    Dear Support Team

    I need to sync position and width for two RadCartesianChart's considering multiple axes.

    Please see attached image, the vertical axes to first and second chart start unsynchronized.

    How can we solve this issue?

    Thanks in advance!

    Best regards,

    Henrique

  2. Maurer
    Maurer avatar
    11 posts
    Member since:
    Jan 2015

    Posted 07 Aug in reply to Maurer Link to this post

    Please see, other image
  3. Answer
    Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 08 Aug Link to this post

    Hello Henrique,

    You need to adjust the margin of the first chart. To calculate the offset you can use the GetLocationOfValue method and get the location of the first point on the horizontal axis. For example:
    private void radButton1_Click(object sender, EventArgs e)
    {
        var value1 = ((CategoricalAxis)radChartView1.Axes[0]).GetLocationOfValue("Jan");
        var value2 = ((CategoricalAxis)radChartView2.Axes[0]).GetLocationOfValue("Jan");
     
        double leftPadding = (value2 - value1) + 40;
     
        radChartView1.View.Margin = new Padding((int)leftPadding, 40, 40, 40);
    }

    Please note that the default margin is 40 pixels on each side.

    I hope this will be useful. Let me know if you have additional questions.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Maurer
    Maurer avatar
    11 posts
    Member since:
    Jan 2015

    Posted 16 Aug in reply to Dimitar Link to this post

    Dear Dimitar your sugestion is very usefull thanks,

    Today we applies your solution with some adjusts and works perfectly, but when the legends are applied  in right or left position the second chart does not adjusts the margin automatically. 

    I need get the start position of legends from first chart to sync the margins of second chart.

    Please see attached image.

    How can we solve this issue?

    Thanks in advance!

    Best regards,

    Henrique

  5. Answer
    Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 17 Aug Link to this post

    Hi Henrique,

    Here is how you can get the legend width:
    var value1 = ((CategoricalAxis)radChartView1.Axes[0]).GetLocationOfValue("Jan");
    var value2 = ((CategoricalAxis)radChartView2.Axes[0]).GetLocationOfValue("Jan");
     
    double leftPadding = (value2 - value1) + radChartView2.View.Margin.Left + radChartView2.ChartElement.LegendElement.Size.Width;
     
    radChartView1.View.Margin = new Padding((int)leftPadding, 40, 40, 40);

    I hope this will be useful. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Maurer
    Maurer avatar
    11 posts
    Member since:
    Jan 2015

    Posted 21 Aug Link to this post

    Dear Dimitar,

    we need get the event when the ChartElement.LegendPosition is changed

    How can we find this event?

    Thanks in advance!

    Best regards,

    Henrique

  7. Answer
    Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 22 Aug Link to this post

    Hi Henrique,

    The following snippet shows how you can detect that the title position is changed:
    //subscribe to this event
    radChartView2.ChartElement.LegendElement.PropertyChanged += ChartElement_PropertyChanged;
     
    // use the Dock property
    private void ChartElement_PropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        if (e.PropertyName == "Dock")
        {
     
        }
    }

    I hope this will be useful. 

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Maurer
    Maurer avatar
    11 posts
    Member since:
    Jan 2015

    Posted 22 Aug in reply to Dimitar Link to this post

    Hi Dimitar,

    Thank you very much for your support!

    your suggestion was very good to adjust two chart views considering the first chart wich a Multi-Axes support and the second Chart where does not support Multi-Axes.

    We did sync size/width for two RadCartesianChart's based in the 'ChartElement.LegendPosition' ! 

    Best regards,

    Henrique

  9. Dimitar
    Admin
    Dimitar avatar
    1871 posts

    Posted 23 Aug Link to this post

    Hi Henrique,

    I am glad that this is working fine now. Do not hesitate to contact us if you have other questions.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top