Changing the labels of x-axis in a scatter line chart

5 posts, 0 answers
  1. Gaurav
    Gaurav avatar
    3 posts
    Member since:
    Jun 2012

    Posted 03 Jun 2012 Link to this post

    Hello,

    I am using scatter line graph and i want to edit the labels of x-axis to name of months (Jan, Feb, March, Apr .... Dec) instead of numbers which are currently rendered. Below is the code and screenshot is attached.

    function rceTime() {
        $("#chart9").kendoChart({
            theme: $(document).data("kendoSkin") || "default",
            title:  {
                text: "Visa Expiry and Contract Expiry in Coming months"
            },
            dataSource: {
                transport: {
                    read: {
                        url: "scripts/contractExpiry.json",
                        dataType: "json"
                    }
                }
            },
            legend: {
                visible: true,
                position: "right"
            },
            seriesDefaults: {
                type: "scatterLine",
                                                 
            },
            series: [{
                name: "Contract Expiry",
                xField: "month",
                yField: "day"
            },{
                name: "Visa Expiry",
                xField: "month1",
                yField: "day1"
            }],
            xAxis: {
                title:  {
                    text: "Month"
                },
                max: 12,
                 
            },
            yAxis: {
                title:  {
                    text: "Date of Month"
                },
                min: 0,
                max: 31,
                labels: {
                    format: "{0}"
                }
            },
            tooltip: {
                visible: true,
                template: "#= dataItem.name #"
            }
        });
    }
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 04 Jun 2012 Link to this post

    Hello Gaurav,

    I am afraid it is not possible to achieve the described functionality using Kendo UI Scatter Line Chart. The reason is the design of this type of chart - it is a XY Chart (such a Scatter line chart), which is suitable for plotting two-dimensional data. In order to set the names of the months as labels of x-axis I would suggest to use a Kendo UI Line Chart, which is a categorical chart.

     

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Gaurav
    Gaurav avatar
    3 posts
    Member since:
    Jun 2012

    Posted 04 Jun 2012 Link to this post

    Hi,

    Thanks for the reply! I already tried that but my dataset contains multiple values for dates in a given month (dates are on y-axis and months on x-axis) and per my limited knowledge kendo line chart doesn't supports multiple values of y-axis for a given value of x-axis. Anyway is there any better way of doing that? Any help is really really appreciated.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 07 Jun 2012 Link to this post

    Hello Gaurav,

    As another approach for your scenario I would suggest to use a template for the axis labels in the Kendo UI Scatter Line Chart. Then create a function which sets text in the labels and call it in this template. For convenience, I created a simple example which illustrates such approach in action. 

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. RamaKrishna P
    RamaKrishna P avatar
    7 posts
    Member since:
    Jun 2010

    Posted 28 Aug 2013 Link to this post

    you can try it by changing xAxis lable format.
    xAxis:{
    labels:{ visible: true,format:"MMM"}
    }
Back to Top
Kendo UI is VS 2017 Ready