We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Printing multiple charts

Thread ID:

Created:

Updated:

Platform:

Replies:

147371 Sep 8,2019 05:04 AM UTC Sep 11,2019 01:12 PM UTC Blazor 3
loading
Tags: Charts
Kyle
Asked On September 8, 2019 05:04 AM UTC

I can print a single chart okay, but the documentation here https://ej2.syncfusion.com/blazor/documentation/chart/chart-print/?no-cache=1 says "You can pass array of ID of elements or element to this method. By default it take element of the chart" and I cant seem to find an example of this or figure out a way to make it work.

I have a page with 6 charts on it, and I'd like to print all 6 charts at once on a single page. How do I go about doing this?

Thanks!

Kesavan Muthusamy [Syncfusion]
Replied On September 9, 2019 07:27 AM UTC

Hi Kyle, 

Greetings from the Syncfusion.  

We have analyzed your query. We can print multiple charts by passing charts’ id to print() . We have prepared a sample with 6 charts to print all those 6 charts.  You need to give unique for each chart. 

Code snippet:  
<button class="btn btn-primary" @onclick="Print">Print Chart</button> 
<EjsChart ID="Chart1" @ref="chart"> 
</EjsChart> 
 
<EjsChart ID="Chart2"> 
</EjsChart> 
 
<EjsChart ID="Chart3"> 
</EjsChart> 
 
<EjsChart ID="Chart4"> 
</EjsChart> 
 
<EjsChart ID="Chart5"> 
</EjsChart> 
 
<EjsChart ID="Chart6"> 
</EjsChart> 

@code{ 
    public EjsChart chart; 
    public void Print() 
    { 
        String[] chartId = new String[6] { "Chart1", "Chart2", "Chart3""Chart4", "Chart5", "Chart6"  }; 
        this.chart.Print(chartId); 
    } 

Sample link: MultipleChart-print 
Please let us know if you have any concerns about this. 

Regards, 
Kesavan 


Kyle
Replied On September 10, 2019 09:25 PM UTC

Hi,

My problem is that I'm creating my charts in a loop that looks like this:



@foreach (DataRow row in Charts.Rows)
{
    i++;
    var data = GetChartData(row["dgId"].ToString(), row["dgChartType"].ToString(), row["dId"].ToString());
    switch (row["dgChartType"])
    {
        case "3DbarHoriz":
            {
                <div style="width:@row["dgWidth"].ToString();height:@row["dgWidth"].ToString();display:inline-block;" @onclick="Click">
                    <EjsChart ID="@("test" + i)">
                        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
                        <ChartSeriesCollection>
                            <ChartSeries DataSource="@data" XName="Label" YName="Score" ColumnSpacing="0.2" ColumnWidth="1.0" Type="ChartSeriesType.Bar" Fill="@row["dgBarColor"].ToString()"></ChartSeries>
                        </ChartSeriesCollection>

                        <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
                    </EjsChart>
                </div>
                break;
            }
    }
}


As you can see, I tried putting a dynamic id using a counter in the loop, but then since as far as I can tell there is no way to @ref in a loop (Feel free to correct me on that, I'd love to know how), I tried doing this in a click event:

new EjsChart().Print(new string[2] { "test1", "test2" });

But when I do that, all three of my charts turn blank, and nothing prints.

Also side question, how do I format text as a code block on these forums?


Kesavan Muthusamy [Syncfusion]
Replied On September 11, 2019 01:12 PM UTC

Hi Kyle, 

We have analyzed your query. We understood your scenario. And we have prepared a sample to print charts which were rendered through for loop. This is achieved by providing a unique id to each chart. By using that unique id, it is possible to print those charts. 

Code snippet:  
@foreach (List<LineChartData> Data in totalData) 
{ 
    var compId = ("chart" +  @totalData.IndexOf(Data).ToString()); 
    this.printId.Add(compId);    
    <EjsChart Title="Inflation - Consumer Price - Line" @ref="chart" @key="@Data"  ID="@compId"> 
        <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea> 
        <ChartPrimaryXAxis ValueType="Syncfusion.EJ2.Blazor.Charts.ValueType.DateTime" EdgeLabelPlacement="EdgeLabelPlacement.Shift"> 
        </ChartPrimaryXAxis> 
        <ChartSeriesCollection> 
            <ChartSeries DataSource="@Data" Name="Germany" XName="xValue" YName="yValue"></ChartSeries> 
            <ChartSeries DataSource="@Data" Name="England" XName="xValue" YName="yValue1">  </ChartSeries> 
        </ChartSeriesCollection> 
    </EjsChart> 
} 

 
@code{ 
public void Print() 
    { 
        this.chart.Print(this.printId.ToArray()); 
    } 
 

Sample link: sample 

Please let us know if you have any concerns about this. 

Regards, 
Kesavan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon