Generate multiple images from chart view

[Vladislav]

Hello,

I started using Telerik just recently and this is my first post here.

I have RadChartView that gets populated with different LineSeries based on the selection I make in the Combobox. It works fine, and also I can Export single currently displayed images just fine. However, I need to export images for all combobox options at once by clicking on a single button. Currently I do this by manually switching combobox options from code and printing the charts which in the UI causes the chart to quickly switch from one to another.

My question is: is it possible to export all the charts to images without actually showing the switch visually? If not, any workaround is also welcome. 

Thanks

[Dess | Tech Support Engineer, Principal]

Hello Vladislav,

Thank you for writing. 

You can use the RadChartView export functionality to produce the desired images. You can find below a sample code snippet how to populate an invisible chart with different data and export it to an image:

private void radButton1_Click(object sender, EventArgs e)
{
    RadChartView radChartView1 = new RadChartView();
    Random rand = new Random();
    string filePath;

    for (int i = 0; i < 5; i++)
    {
        radChartView1.Series.Clear();
        LineSeries lineSeries = new LineSeries();
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Jan"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Apr"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Jul"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Oct"));
        radChartView1.Series.Add(lineSeries);

        filePath = @"..\..\exprtedChart" + i + ".png";

        radChartView1.ExportToImage(filePath, radChartView1.Size, System.Drawing.Imaging.ImageFormat.Png);
    }
}

I hope this information helps. Should you have further questions I would be glad to help.

Regards,
Dess
Telerik by Progress

[Vladislav]

I'll try to do the way you proposed, but for now I'm having another issue.

On combobox selected index changed event, the source for chartview is being changed, and thus the image shown on the chart is different. However, when I use for loop to print each option with ExportToImage, the chart images are generated, but strangely the legend that can be visible in the UI is missing on the images generated with ExportToImage method. I have tried to set ShowLegend on numerous places, lastly trying to set it just before ExportToImage method but the result is the same, no legend visible on the exported images. I tried to debug and in the UI I noticed that legend is being shown at some point after the main image on the chart, and I cannot figure out at what point but it's probably at some point before my ExportToImage is being executed so that might be the reason I don't see it.
Please provide some help.

[Dess | Tech Support Engineer, Principal]

Hello Vladislav,

Thank you for writing back. 
  
In order to display the chart legend in the exported image, it is necessary to force the chart layout by calling the Application.DoEvents method.

private void radButton1_Click(object sender, EventArgs e)
{
    RadChartView radChartView1 = new RadChartView();
    radChartView1.ShowLegend = true;
    Random rand = new Random();
    string filePath;

    for (int i = 0; i < 5; i++)
    {
        radChartView1.Series.Clear();
        LineSeries lineSeries = new LineSeries();
        lineSeries.LegendTitle = "S "+i;
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Jan"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Apr"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Jul"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Oct"));
        radChartView1.Series.Add(lineSeries);
        Application.DoEvents();
        filePath = @"..\..\exprtedChart" + i + ".png";

        radChartView1.ExportToImage(filePath, radChartView1.Size, System.Drawing.Imaging.ImageFormat.Png);
    }
}

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik by Progress

[Vladislav]

I am used to avoiding Application.DoEvents(), but if there's no other solution, then OK. Anyway, it solve the issue with legend and I hope it won't cause some side effects in case I change something in the logic afterwards.

On the other hand, I am still bound to switching combobox options from code to show different charts and then exporting them to image. I do this by preserving currently selected combobox index, then going through all of them and then manually switching back to the initial index. Now I need to "freeze" the chart from showing different images when switching options. I tried calling SuspendLayout on chart view on the beginning of switching comboboxes and then ResumeLayout() after going back to initial index, but the changing is still visible in the UI. Suspend/ResumeUpdate doesn't solves the issue either. Any suggestion?

 

[Dess | Tech Support Engineer, Principal]

Hello Vladislav,

Thank you for writing back. 

In this case, it is necessary to invalidate the chart with the new date. Instead of using Application.DoEvents(), you can call the InvalidateMeasure and UpdateLayout methods of the ChartElement:

private void radButton1_Click(object sender, EventArgs e)
{
    RadChartView radChartView1 = new RadChartView();
    radChartView1.ShowLegend = true;
    Random rand = new Random();
    string filePath;

    for (int i = 0; i < 5; i++)
    {
        radChartView1.Series.Clear();
        LineSeries lineSeries = new LineSeries();
        lineSeries.LegendTitle = "S " + i;
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Jan"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Apr"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Jul"));
        lineSeries.DataPoints.Add(new CategoricalDataPoint(rand.Next(1, 20), "Oct"));
        radChartView1.Series.Add(lineSeries);
        radChartView1.ChartElement.InvalidateMeasure();
        radChartView1.ChartElement.UpdateLayout();
        filePath = @"..\..\exprtedChart" + i + ".png";

        radChartView1.ExportToImage(filePath, radChartView1.Size, System.Drawing.Imaging.ImageFormat.Png);
    }
}

In order to avoid the visual changing of the chart data, use a dummy RadChartView instance as in my sample code snippet.

I hope this information helps. If you have any additional questions, please let me know.

Regards,
Dess
Telerik by Progress

[Vladislav]

It seems to be working fine. Thank you, Dess

[zake]

why I cannot exported legend into image event I insert Application.DoEvents();

 

could you send example code,  exported chart into image with legend without add to control.

[Dess | Tech Support Engineer, Principal]

Hello, Zake, 

I have attached my sample project for your reference. The chart legend is exported as expected on my end.

I hope this information helps.

 Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik