Incorrectly displaying number data on the X axis?

[Perry]

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?

[Iliana Dyankova]

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

[Perry]

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" }

});

[Iliana Dyankova]

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

[Perry]

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?

[Iliana Dyankova]

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