This is a migrated thread and some comments may be shown as answers.

Incorrectly displaying number data on the X axis?

5 Answers 68 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Perry
Top achievements
Rank 1
Perry asked on 05 Jul 2012, 02:35 PM
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?

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 05 Jul 2012, 05:09 PM
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!
0
Perry
Top achievements
Rank 1
answered on 05 Jul 2012, 05:33 PM
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" }
});
0
Iliana Nikolova
Telerik team
answered on 06 Jul 2012, 09:51 AM
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!
0
Perry
Top achievements
Rank 1
answered on 09 Jul 2012, 11:30 AM
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?
0
Accepted
Iliana Nikolova
Telerik team
answered on 09 Jul 2012, 07:08 PM
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!
Tags
Charts
Asked by
Perry
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Perry
Top achievements
Rank 1
Share this question
or