1. Home
  2. Forum
  3. ASP.NET MVC
  4. Having category on y-axis in EJ1 and MVC

Having category on y-axis in EJ1 and MVC

  • Hi,
    I have an ASP.Net MVC project with EJ1. I have a chart with multiple seriesand multiple y-axis. I'm creating the chart from javascript.
    nowhere on the web I could find how to set category on y-axis rather than just numbers.

    Basically, one axis plots voltage which is an int over time and the other axis is supposed to plot system mode which could be either "Charge" or "Discharge" over time.

    this is how I'm creating it now:

    $.ajax({
                method: "GET",
                url: "/Inverters/GetDeviceHistory",
                data: { 'serialNumber': serialNumber }
            }).done((data) => {
                $("#deviceChart").ejChart(
                    {
                        palette: selectedPalettes,
                        zooming: { enable: true },
                        isResponsive: true,
                        crosshair: {
                            visible: true,
                            type: 'trackball'
                        },
                        primaryYAxis:
                        {
                            majorGridLines: { visible: false }
                        },
                        axes: allAxes,
                        commonSeriesOptions:
                        {
                            type: 'line'
                        },
                        series: getSeries(data, selectedIndexes),
                        title: { text: 'Past 2 Month Status' },
                        legend: { visible: true, }
                    });
            });

    the series is something like this:

             {
                    points: data.map(r => ({ x: new Date(r.TimeStampLable), y: r.GridVoltage, isEmpty: r.isEmpty })),
                    name: "Grid Voltage",
                    yAxisName: 'Voltage',
                    tooltip: { format: "Grid Voltage : #point.y# V", visible: true },
                    enableAnimation: true, duration: "2000ms",
                    emptyPointSettings: { visible: true, style: { color: "#ffa000" } }

                }

1 Reply
DD Dharanidharan Dharmasivam Syncfusion Team October 18, 2018 10:21 AM UTC

Hi Daniel, 
 
Greetings from Syncfusion. 
 
We have analyzed your query. We would like to let you know that as of now there is no direct support for category on y axis. However, your requirement can be achieved as a workaround using the axesLabelRendering event of chart. This event will be triggered for each labels of the axis, and here we can customize the text based on the requirement. 
 
We have prepared a sample in which we have array collection which holds the string values and customized the text using the axesLabelRendering event. Find the code snippet below. 
 
 
$("#container").ejChart({ 
      primaryYAxis: { 
           Specify the range for the vertical axis, so that we can render the labels with respect to the labels 
           range: { min: 0, max: 5, interval: 1 }, 
      }, 
      axesLabelRendering: function (args) { 
           if (args.data.axis.orientation === "vertical" && args.data.axis.title.text === "Category Y Axis") { 
                    //You can customize the text based on your requirement 
                     var categoryValues = ["X1", "X2", "X3", "X4", "X5", "X6"]; 
                     args.data.label.Text = categoryValues[count]; 
                     count++; 
            } else count = 0; 
      }, 
 
 
Screenshot: 
 
Sample for reference can be found below. 
 
Thanks, 
Dharani. 


Loader.
Up arrow icon