how to change template information

[Megatron]

Hi, I have 4 lines in the chart, and I want to customize the information shown in the chart. Can you please tell me in the code below how can I add information from my viewbag/Ajax on the label in place of point y

1. Line 1 how can I set the icon at the points for each line from the viewbag,
2. How can I show information (from the view bag) for each line/label in the graph  #point.y#% . please tell me how to add this to the label info in the template. For e.g. line 1 has # views in the label, but line 2 has # of miles driven, line 3 in graph has # stops etc.
   

<div id="template">
     <div id="left">
	<img src="../images/chart/icon_investments.png"/>
     </div>
     <div id="right">
          <div id="point">#point.y#%</div> // How can I add Information from my viewbag for each point, for e.g. Number of Views or  ??
     </div>
</div>

    @(Html.EJ().Chart("chartContainer")
            //...

        .Series(sr =>
        {
            
                .Marker(mr=>mr
                    .DataLabel(dl=>dl
                        .Visible(true)
                         //Set template to data label
                         .Template("template"))
                ).Add();
          

thanks

[Sanjith Kesavan]

Hi Megatron

We have analyzed your query and prepared sample as per your requirement. In the sample we have passed following array from the controller to the view page using ViewBag. Please find the below controller code.

[CS]

string[] data = { "Number of views", "Miles driven", "Stops" };
ViewBag.data = data;

In the view page, we have dynamically created <div> and assigned this values from the ViewBag to the datalabel template. Please follow the below code example.

[CSHTML]

@{

    var results = ViewBag.data;

    var length = results.Length;

}

@for (var i = 0; i < length; i++)

{

    var fName = "Template" + i;

    <div id="@{@fName}" style="display:none">

        <div id="right">

            <img src="~/icon_investments.png" />

        </div>

        <div id="left">

            <div id="point">#point.y# @results[i]</div>

        </div>

    </div>
}

Now the chart will render like below.


In the below link, we have attached sample for your reference.
Sample Link: http://www.syncfusion.com/downloads/support/forum/123682/ze/Datalabel-1431268781

If the sample does not meet your requirements, then please let us know by attaching more details. This details will be helpful for us to meet your requirements.

Regards,
Sanjith.

[Megatron]

Hi thanks this is very nice and what I was talking about,

When I resize browser or look at it on a mobile device the labels are overlapping is there anything you can help me with (smart label render or something).
Is it possible to change the color if the number drops below previous value, for e.g. if miles driven were less than 2006, I want to show down arrow and label it as red
how can I add an export to excel or pdf to this

thanks
Mega

[Sanjith Kesavan]

Hi Magatorn,

We have analyzed your queries. Please find the response for your queries below.

Query1: When I resize browser or look at it on a mobile device the labels are overlapping is there anything you can help me with (smart label render or something).

Response: To avoid the overlapping of the datalabels labels, please set “EnableSmartLabels” property as true for series. Please find the below code example.

.Series(sr => sr.EnableSmartLabels(true).Add();)

This will avoid the overlapping of the datalabels. Please find the screenshot.



Query2: Is it possible to change the color if the number drops below previous value, for e.g. if miles driven were less than 2006, I want to show down arrow and label it as red
Response: For datalabel, we are having built-in support for different shapes. So we can use datalabel shape instead of datalabel template. We have subscribed “SeriesRendering” event and written the below code.

[JS]

var count=0;

    function seriesrendering(sender) {

        var array = @Html.Raw(Json.Encode(@ViewBag.data));

        var marker = { dataLabel: { shape: "DownArrow", visible: true, fill: "red" } };

        for (i = 0; i < sender.data.series.points.length; i++) {

            value = parseFloat(sender.data.series.points[i].x)

            if (value < 2006) {

                sender.data.series.points[i].marker = marker;

            }

            sender.data.series.points[i].text=sender.data.series.points[i].y+ " "+array[count];

        }

        count=count+1;
    }

In the above code, we have set the datalabel shape as “Downarrow” and color as “Red” for each points which contains value below 2006. And also added the text from ViewBag to the each points. Now the chart will render like below.





Query3: how can I add an export to excel or pdf to this
Response: We have prepared sample as per your requirement. In the sample, if you want to export the chart into excel format, then please click “XLSV” button and if you want to export to PDF format please click “PDF” button. Other than this two export type, we are having support for export chart into png, jpg, DOCIO and svg formats. Please find the sample and UG link below.

UG: http://help.syncfusion.com/aspnetmvc/chart/exporting

Sample link: http://www.syncfusion.com/downloads/support/forum/123682/ze/datalabel1915999096

Please let us know if you have any concern

Regards,
Sanjith.