Custom PointSeries

[Valentin]

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.

[Martin Ivanov]

Hello Valentin,

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

Regards,
Martin
Telerik by Progress

[Valentin]

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.

[Martin Ivanov]

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

[Valentin]

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.

 

[Martin Ivanov]

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

[Valentin]

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 !

[Martin Ivanov]

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

[Valentin]

Hello Martin,

 

Ho Okay, I don't know that.

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