Search results

DateTime,Numeric and Logarithmic Axis

DateTime Axis

Date time axis uses date time scale and displays the date time values as axis labels in the specified format and set the valueType of axis to DateTime.

razor
datetime.cs
<script src="~/financial-data.js"></script>

            @(Html.EJS().StockChart("container").Title("AAPL Stock Price").IndicatorType(new List<Object>() { }).ExportType(new List<Object>() { }).TrendlineType(new List<Object>() { })
                     .PrimaryXAxis(xaxis =>xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
                                                                .Series(sr =>
                                                                {
                                                                    sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").Add();
                                                                })
                                                                .Render())

    <script>
        var data = window.chartData;
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }
}

Logarithmic Axis

Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106) and set the valueType of axis to Lograthmic.

razor
log.cs
<script src="~/financial-data.js"></script>

            @(Html.EJS().StockChart("container").Title("AAPL Stock Price")
                  .PrimaryXAxis(xaxis =>xaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.DateTime))
                  .PrimaryYAxis(yaxis =>yaxis.ValueType(Syncfusion.EJ2.Charts.ValueType.Logarithmic))
                                                                .Series(sr =>
                                                                {
                                                                    sr.Type(Syncfusion.EJ2.Charts.ChartSeriesType.Candle).DataSource("data").YName("volume").Add();
                                                                })
                                                                .Render())

    <script>
        var data = window.chartData;    
    </script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.StockChart
{
    public partial class StockChartController : Controller
    {
        public IActionResult Default()
        {
            return View();
        }
    }
}

See Also