Custom PointSeries

9 posts, 0 answers
  1. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 09 Aug Link to this post

    Hello,

     

    I've got a RadCarteasianChart, and series are illustrates by PointSeries. I want to know if is it possible to insert a picture (without background) in each point.

     

    I think it's possible with Template but I don't find it and I don't know how I can do that.

     

    Thank you.

  2. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 09 Aug Link to this post

    Hello Valentin,

    To achieve your requirement you can use the PointTemplate property of the series. I hope this helps.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  3. UI for WPF is Visual Studio 2017 Ready
  4. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 11 Aug in reply to Martin Link to this post

    Hello Martin,

    I try the example which is in this website, but I can't insert a picture in DataTemplate.

    How I can do reference to my picture ?

     

    Don't forget : I want to have my point (which can be red, blue or green) WITH a little picture inside.

     

    Thank you.

  5. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 11 Aug Link to this post

    Hi Valentin,

    To display an image you can use the WPF native Image element. The DataTemplate can contain a panel that holds an Ellipse representing the point and an Image displaying the picture. I recommend you to read the Image Class and Data Templating Overview MSDN article. This way you will see how to work with images in WPF and how to define complex layouts within a DataTemplate.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  6. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 12 Aug in reply to Martin Link to this post

    Hello Martin,

    I tried this code, in the <RadCartesianChart> block :

    <telerik:PointSeries>
        <telerik:PointSeries.PointTemplate>
            <DataTemplate>
                <StackPanel>
                    <Ellipse Height="5" Width="15" Fill="Pink" />
                    <Image Source="/SIGT.EVEm.Client;component/Images/Nouvelles_icones/cle_molette.png"/>
                </StackPanel>
            </DataTemplate>
        </telerik:PointSeries.PointTemplate>
    </telerik:PointSeries>

    But there isn't changement.

    This is the construction Chart :

    private void LoadChartVisites()
    {
        int nbAxesG = (chartVariables.VerticalAxis != null) ? 1 : 0,
        nbAxesD = 0;
     
        foreach (var serie in chartVariables.Series)
        {
            if (serie.VerticalAxis != null)
            {
                if (serie.VerticalAxis.HorizontalLocation == AxisHorizontalLocation.Left)
                {
                    nbAxesG++;
                }
                else if (serie.VerticalAxis.HorizontalLocation == AxisHorizontalLocation.Right)
                {
                    nbAxesD++;
                }
            }
        }
     
                // ajustement du graphique des labels par rapport au graphique des mesures
                // 42 px de marge par axe vertical supplémentaire + marge initiale
        chartVisite.Margin = new Thickness(42 + nbAxesG * 26, 20, 15, 20);
     
     
                this.chartVisite.Series.Clear();
                PointSeries serieVisitesPlanifiees = new PointSeries();
                PointSeries serieVisitesPerteMesureOuImpossible = new PointSeries();
                PointSeries serieVisitesRAS = new PointSeries();
     
                serieVisitesPlanifiees.CategoryBinding = new PropertyNameDataPointBinding("DateVisite");
                serieVisitesPlanifiees.ValueBinding = new PropertyNameDataPointBinding("GraphValue");
                serieVisitesPlanifiees.ItemsSource = viewModel.GetVisitePlanifieeEnumerator();
     
                serieVisitesPerteMesureOuImpossible.CategoryBinding = new PropertyNameDataPointBinding("DateVisite");
                serieVisitesPerteMesureOuImpossible.ValueBinding = new PropertyNameDataPointBinding("GraphValue");
                serieVisitesPerteMesureOuImpossible.ItemsSource = viewModel.GetVisitePerteMesureOuImpossibleEnumerator();
     
                serieVisitesRAS.CategoryBinding = new PropertyNameDataPointBinding("DateVisite");
                serieVisitesRAS.ValueBinding = new PropertyNameDataPointBinding("GraphValue");
                serieVisitesRAS.ItemsSource = viewModel.GetVisiteRASEnumerator();
     
                serieVisitesPlanifiees.DefaultVisualStyleSelector = new PointSerieVisiteStylePlanifiee();
                serieVisitesPerteMesureOuImpossible.DefaultVisualStyleSelector = new PointSerieVisiteStylePerteMesureOuImpossible();
                serieVisitesRAS.DefaultVisualStyleSelector = new PointSerieVisitesRAS();
     
                serieVisitesPerteMesureOuImpossible.PointSize = new Size(20, 20);
                serieVisitesPlanifiees.PointSize = new Size(20, 20);
                serieVisitesRAS.PointSize = new Size(20, 20);
     
        foreach (HydroVisite visite in viewModel.GetVisitePerteMesureOuImpossibleEnumerator())
        {
            if (visite.IsPbMesure == true)
            {
                CartesianCustomLineAnnotation annotation = new CartesianCustomLineAnnotation();
                        annotation.VerticalAxis = chartVisite.VerticalAxis;
                        annotation.HorizontalAxis = chartVisite.HorizontalAxis;
     
                        annotation.VerticalFrom = 1;
                        annotation.VerticalTo = 1;
     
                        annotation.HorizontalFrom = ((HydroVisite)visite).DateDebutPbMesure;
                        annotation.HorizontalTo = ((HydroVisite)visite).DateFinPbMesure;
     
                        annotation.Stroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("Red"));
                        annotation.StrokeThickness = 2;
                         
                        chartVisite.Annotations.Add(annotation);
            }
        }
     
                chartVisite.Series.Add(serieVisitesPlanifiees);
                chartVisite.Series.Add(serieVisitesPerteMesureOuImpossible);
                chartVisite.Series.Add(serieVisitesRAS);
    }

    (I hope the block is understable).

     

    So, the XAML declaration and the Code Behind declaration are conflicts, or there is an other problem ?

     

    For illustrate the general diplay, you can look the attach file.

     

    Thank you.

     

  7. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 15 Aug Link to this post

    Hello Valentin,

    Without your complete implementation I cannot be sure but as I can see you have a single empty PointSeries in XAML with set only its PointTemplate and you create the other series in code-behind. If this is you case, it is expected that the PointTemplate is not applied. Each series should define its own template. So, you should set the PointTemplate property for each series defined in code.

    You can see the ChartViewCustomization SDK example to see how the PointTemplate property is used in XAML. I also attached a very simple example on how to set the PointTemplate in code.

    As a side note, keep in mind that the PointSize and DefaultVisualStyle of the series won't be respected if the PointTemplate property is set. 

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  8. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 17 Aug in reply to Martin Link to this post

    Hello Martin,

    With your example, I'd just apply this line for my 3 series :

    series.PointTemplate = (DataTemplate)this.Resources["pointSeriesItemTemplate"];

    And it working !

    For my example, this is the result :

    serieVisitesPlanifiees.PointTemplate = (DataTemplate)this.Resources["pointSeriesItemTemplate"];
     
    serieVisitesPerteMesureOuImpossible.PointTemplate =(DataTemplate)this.Resources["pointSeriesRougeItemTemplate"];
     
    serieVisitesRAS.PointTemplate = (DataTemplate)this.Resources["pointSeriesItemTemplate"];

    And the DataTemplate code in XAML :

    <DataTemplate x:Key="pointSeriesItemTemplate">
        <Grid>
            <Ellipse Height="20" Width="20" Fill="Blue" />
            <Image Source="/SIGT.EVEm.Client;component/Images/Nouvelles_icones/cle_molette_blanc.png" Width="15" Height="15"/>
        </Grid>
    </DataTemplate>
     
    <DataTemplate x:Key="pointSeriesRougeItemTemplate">
        <Grid>
            <Ellipse Height="20" Width="20" Fill="Red" />
            <Image Source="/SIGT.EVEm.Client;component/Images/Nouvelles_icones/cle_molette_blanc.png" Width="15" Height="15"/>
        </Grid>
    </DataTemplate>

     

    You can see the result in attached file.

     

    Thank you very much !

  9. Martin
    Admin
    Martin avatar
    1101 posts

    Posted 17 Aug Link to this post

    Hi Valentin,

    I am glad to hear that the provided information helped. 

    As for the images attached in your last couple replies, it seems that they contain some symbols that cannot be read and they cannot be opened. Next time you upload a picture in the forum I recommend you to use a simplified name that doesn't contain any special symbols. This way you will be sure that the image can be opened properly.

    Regards,
    Martin
    Telerik by Progress
    Do you need help with upgrading your AJAX, WPF or WinForms project? Check the Telerik API Analyzer and share your thoughts.
  10. Valentin
    Valentin avatar
    73 posts
    Member since:
    Mar 2016

    Posted 17 Aug in reply to Martin Link to this post

    Hello Martin,

     

    Ho Okay, I don't know that.

    Get look the new attached file. Thank you for your help !

Back to Top
UI for WPF is Visual Studio 2017 Ready