Printing multiple charts

[Kyle]

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]

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]

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]

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