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. Image for the cookie policy date

how to change template information

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

3 Replies

SK Sanjith Kesavan Syncfusion Team April 11, 2016 11:19 AM UTC

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.


ME Megatron April 11, 2016 04:13 PM UTC

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


SK Sanjith Kesavan Syncfusion Team April 12, 2016 10:17 AM UTC

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.

Loader.
Live Chat Icon For mobile
Up arrow icon