Incorrectly displaying number data on the X axis?

6 posts, 1 answers
  1. Perry
    Perry avatar
    8 posts
    Member since:
    Apr 2012

    Posted 05 Jul 2012 Link to this post

    I have a datasource defined where everything is of type:'number' when I plot my dataseries I get the attached graph.  Why is the chart package allowing multiple numbers to be placed not in order on the x-axis?  It should start with -.002 and then progress right in a linear evenly-spaced order, what I am I missing?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 05 Jul 2012 Link to this post

    Hi Perry,

    Could you please specify the type of the chart you use to display the data? From the provided picture it seems that the Kendo UI Line Chart is used. This chart is a categorical chart (such Bar, Column and Area charts) where the categories are string. I think for your scenario is suitable to use the Kendo UI Scatter Line Chart, which it is a XY Chart (such a Scatter line chart) - it is suitable for plotting two-dimensional data.  


    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!
  3. Perry
    Perry avatar
    8 posts
    Member since:
    Apr 2012

    Posted 05 Jul 2012 Link to this post

    You are correct that it was of type 'line', I have switched it to the following, but now no graph plots at all.
    var sharedDatasource = new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "ID",
                        fields: {
                            ID: { editable: false },
                            CasterL: { type: "number" },
                            CamberL: { type: "number" },
                            BumpL: { type: "number" },
                            BumpGaugeTravelL: { type: "number" },
                            ShockTravel: { type: "number" },
                            BumpGaugeTravelR: { type: "number" },
                            BumpR: { type: "number" },
                            CamberR: { type: "number" },
                            CasterR: { type: "number" }
                        }
                    }
                },
                batch: true
                transport: {
                    create: {
                        url: "@Url.Action("CreateBumpTable", "Events")?tableID=@Model.SetupID",
                        type: "POST" 
                    },
                    read: {
                        url: "@Url.Action("GetBumpTable", "Events")?setupID=@Model.SetupID",
                        type: "POST"
                    },
                    update: {
                        url: "@Url.Action("UpdateBumpTable", "Events")?tableID=@Model.SetupID",
                        type: "POST" 
                    },
                    destroy: {
                        url: "@Url.Action("DestroyBumpTable", "Events")?tableID=@Model.SetupID",
                        type: "POST"
                    },
                    parameterMap: function(data, operation) {
                        if (operation != "read") {
                            var result = { };
                            for (var i = 0; i < data.models.length; i++) {
                                var product = data.models[i];
                                for (var member in product) {
                                    result["bump[" + i + "]." + member] = product[member];
                                }
                            }
                            return result;
                        }
                        return null;
                    }
                }
            });
     
    $('#lfChart').kendoChart({
        title: { text: "LF Bump Steer" },
        dataSource: sharedDatasource,
        seriesDefaults: { type: "scatterLine" },
        series: [
            {field: "ShockTravel", name: "Shock Travel (in.)"},
            {field: "BumpGaugeTravelL", name: "Wheel Travel (in.)"}
        ],
        categoryAxis: { field: "BumpL" },
        legend: { position:"bottom" }
    });
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 06 Jul 2012 Link to this post

    Hello Perry,

    I think the problem is caused by the  categoryAxis: { field: "BumpL" }. As I mentioned in my previous post, the Kendo UI Scatter Line Chart is a XY Chart - for such type of chart you need xAxis and yAxis, not categoryAxis. For detailed information about the configuration of Kendo UI Scatter Line chart please refer this topic from our online documentation and this online demo

     

    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!
  5. Perry
    Perry avatar
    8 posts
    Member since:
    Apr 2012

    Posted 09 Jul 2012 Link to this post

    Iliana-
         Looking at the examples in the documentation I have come up with the following code
    $('#lfChart').kendoChart({
        title: { text: "LF Bump Steer" },
        dataSource: sharedDatasource,
        series: [
            {
                xField: "ShockTravel",
                yField: "BumpL",
                name: "Shock Travel (in.)"
            },
            {
                xField: "BumpGaugeTravelL",
                yField: "BumpL",
                name: "Wheel Travel (in.)"
            }
        ],
        legend: { position:"bottom" }
    });
    With the same datasource code as provided earlier.  It is now displaying a line, but it is above the graph and incorrectly valued.  Do you have any further suggestions?
  6. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 09 Jul 2012 Link to this post

    Hello Perry,

    I think the reason for the problem is the lack of chart type definition in the code you provided. For example: 
    $("#chart").kendoChart({
     //...
     seriesDefaults: {
      type: "scatterLine"
     },
     series: [{
      xField: "ShockTravel",
      yField: "BumpL",
      name: "Shock Travel (in.)"
      }, {
      xField: "BumpGaugeTravelL",
      yField: "BumpL",
      name: "Wheel Travel (in.)"
      }]
    });

    Please try the suggested approach. In case the problem still persist I will need a small but runnable project which reproduces the problem. This way I will be able to observe the problem and advice you further.

     

    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!
Back to Top