[Solved] Json DataSource Connection Issue with RadChart

[Varun]

Hi,

I have some data in my Json file and I am trying to populate the data in the chart. You can see the code in ChartDatasourceconnection Image.

When I am writing the command
dataSource.Read().then(function() {
});

ideally, it should read the json file and then when I assign the same datasource to chart, it should populate the resutls. But when I debug it, nothing is read from through the dataSource.Read() command.

Please let me know were I am going wrong.

[Martin Yankov]

Hi Varun,

I have looked trough your code and found two problems:

1)  When you initialize the DataSource object, you use "dataSource" as a property and place the "transport" and "schema" properties in it. This is not a valid constructor for the DataSource control. You should place "transport" and "schema" directly in the constructor instead.

2) When setting the "url" to the target resource, you should use a normal slash for setting the path instead of a backslash.

var chart = document.getElementById("myChart").winControl;
chart.title.text = "Automation Statics";

var dataSource = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "pages/color.json",
            dataType: "json"
        }
    },
    schema: {
        data: "colorsArray",
        model: {
            fields: {
                hexValue: { type: "number" }
            }
        }
    }
});

chart.dataSource = dataSource;

var series = new Telerik.UI.Chart.ColumnSeries();
series.field = "hexValue";
chart.series.push(series);
chart.categoryAxis.field = "colorName";

chart.refresh();

You can also find attached a working project with your problem for reference. 

There are two more things, that I can point out:

 - When reading from a resource, where the numeric values you want to populate the chart with, are strings, it is best to provide a model in the DataSource to specify that the field is a number.

 - It is not necessary to call the read() method when you want to just bind the DataSource to a control. This is because the control calls it automatically when you assign a resource to it's dataSource property.

All the best,
Martin Yankov
the Telerik team

[Zeeshan]

There is no connection with the datasource

[Zeeshan]

There is no connection with the datasource and creating issue with radchart