How To

The following section explains how to customize various aspects of the chart.

Bind data to chart on ajax request

You can bind data to chart on ajax request using the following steps:

Step 1:

Create a http post action method to return data for ajax call in a controller page. The following GetServerData() method will return a JSON data string.

[HttpPost]
        public ActionResult GetServerData()
        {
            List<LineChart> data1 = new List<LineChart>();
            data1.Add(new LineChart("India", 1));
            data1.Add(new LineChart("USA", 5));
            data1.Add(new LineChart("USSR", 10));
            data1.Add(new LineChart("Chinaa", 12));
            data1.Add(new LineChart("Japan", 8));
            return Json(data1);
        }

        public class LineChart
        {
            public LineChart(string name, double cnt)
            {
                this.x = name;
                this.y = cnt;
            }
            public string x { get; set; }
            public double y { get; set; }
        }

Step 2:

Make a simple chart with series.

@using Syncfusion.EJ2;
@using EJ2MVCSamples.Controllers;

<div class="col-md-8">
        @Html.EJS().Chart("container").PrimaryXAxis(px => px.Title("Years").ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
                       {
                           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Add();
                       }
        ).Render()
</div>

Step 3:

Make ajax call to the GetServerData() action method in chart load event to get JSON data, and then assign the data to the chart series using the dataSource property and mapping the field name to xName and yName properties of the series.

@using Syncfusion.EJ2;
@using EJ2MVCSamples.Controllers;

<div class="col-md-8">
        @Html.EJS().Chart("container").PrimaryXAxis(px => px.Title("Years").ValueType(Syncfusion.EJ2.Charts.ValueType.Category)).Series(series =>
                       {
                           series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).Add();
                       }
        ).Load("chartLoad").Render()
</div>
<script>
    var chartLoad = function (args) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetServerData","Home")',
            async: false,
            success: function (data) {
                args.chart.series[0].dataSource = data;
                args.chart.series[0].xName = "x";
                args.chart.series[0].yName = "y";
            }
        });
    }
</script>

Sample reference

Sample for how to get data from ajax call is available in chart sample.

Screenshot

Screenshot for your reference

Customize the background color of data label template from webservice

Bind the text and interior information for a point from dataSource. To change the background color in the datalabel template, use ${point.text}. You have to bind the property from dataSource to name in the data label options to use point.text.

Follow the given steps to customize the background color of data label template from webservice, which includes colors:

Step 1:

Get the data from webservice, which also includes color attribute to bind the name in the data label options to use point.text in the data label template.

To get data from web service, use any adaptor webApi or Url adaptor in the data manager, and then bind the data manager to the dataSource property in the series options.

@Html.EJS().Chart("container").Series(
           series =>
           {
               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).
               XName("Year").YName("yValue").DataSource("dataManager").
               Query("query").Add();
           }).PrimaryXAxis(
                px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).
                      EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            ).Render()

<script>
    var dataManager = new ej.data.DataManager({
        url: 'http://localhost:54290/api/Values',
        adaptor: new ej.data.WebApiAdaptor
    });
    var query = new ej.data.Query();
</script>
// get the data from here
public object Get()
        {
            List<EmployeeModel> revenue = new List<EmployeeModel>();
            revenue.Add(new EmployeeModel() { Year = "2018-06-13T00:00:00", yValue = 30, color = "red" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-14T00:00:00", yValue = 20, color = "blue" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-15T00:00:00", yValue = 15, color = "green" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-16T00:00:00", yValue = 30, color = "orange" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-17T00:00:00", yValue = 60, color = "skyblue" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-18T00:00:00", yValue = 10, color = "red" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-19T00:00:00", yValue = 70, color = "yellow" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-20T00:00:00", yValue = 50, color = "pink" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-21T00:00:00", yValue = 88, color = "green" });
            revenue.Add(new EmployeeModel() { Year = "2018-06-22T00:00:00", yValue = 35, color = "blue" });

            return new { Items = revenue, Count = revenue.Count() };
}

public class EmployeeModel
{
    public string Year { get; set; }
    public double yValue { get; set; }
    public string color { get; set; }
}

Step 2:

Initialize the data label template

as demonstrated in the following html page.

<script id="index" type="text/x-template">
    <div id='templateWrap' style="background-color: ${point.text}; border-radius: 3px;">
        <img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Astrology-Air-Element-icon.png" style="height: 25px;width: 25px" title="Air">
        <div class='des' style="color:black; font-family:Roboto; font-style: normal; font-size:16px;padding-right:6px">
            <span style="color:white;">${point.y}</span>
        </div>
    </div>
</script>

Step 3:

To show the data label template, set the element id to the template property in data label.

 @Html.EJS().Chart("container").Series(
           series =>
           {
               series.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Line).Width(2).
               XName("Year").YName("yValue").DataSource("dataManager").
               Query("query").Marker(mark => mark.Visible(true).DataLabel(dl => dl.Visible(true).
               Position(Syncfusion.EJ2.Charts.LabelPosition.Top).Name("color").Template("#index"))).Add();
           }).PrimaryXAxis(
                px => px.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime).
                      EdgeLabelPlacement(Syncfusion.EJ2.Charts.EdgeLabelPlacement.Shift)
            ).PrimaryYAxis(
                py => py.RangePadding(Syncfusion.EJ2.Charts.ChartRangePadding.None).
                      Interval(20).Minimum(0).Maximum(100)
            ).Render()

Sample reference

Sample for how to customize the background color of data label is available in chart sample.

Screenshot

Screenshot for your reference

Render chart in partial view in ajax call

You can render the charts in partial view in ajax call by calling the partial view action method in ajax.

Follow the given steps to render the charts in partial view.

Step 1:

Initially, render the home view page, and then call the partial view action method via ajax call in the home view page.

 <div id="chartContainer">
</div>
<script>
    $.ajax({
            url: '@Url.Action("Create")',
            type: 'POST',
            dataType: 'html',
            global: false,
            success: function (response) {
                $('#chartContainer').html(response);
            }
        });
</script>
// partial view action method
  [HttpPost]
        public ActionResult Create()
        {
            List<ChartData> chartData = new List<ChartData>
            {
                new ChartData { xValue = 10, yValue = 21 },
                new ChartData { xValue = 20, yValue = 24 },
                new ChartData { xValue = 30, yValue = 36 },
                new ChartData { xValue = 40, yValue = 38 },
                new ChartData { xValue = 50, yValue = 54 },
                new ChartData { xValue = 60, yValue = 57 },
                new ChartData { xValue = 70, yValue = 70 },
            };
            ViewBag.dataSource = chartData;
            return PartialView("_RefreshCharts");
        }
        public class ChartData
        {
            public double xValue;
            public double yValue;
        }

Step 2:

Return the partial view page when calling partial view action method. In that partial view, refer the scriptManager to render the charts.

<div>
    @Html.EJS().Chart("container").Series(sr =>
    {
       sr.XName("xValue").YName("yValue").Type(Syncfusion.EJ2.Charts.ChartSeriesType.Column).DataSource(ViewBag.dataSource).Add();
    }).Render();
</div>

@Html.EJS().ScriptManager()

Sample reference

Sample for how to render the charts in partial view is available in chart sample.

Screenshot

Screenshot for your reference