[Solved] Help With Rad Bar Chart

[Sir]

The help I need - should be pretty simple I'm sure, but I'm having a lot of trouble with it :(

(1)  I have a json data source coming from a service, which looks like this:

var chartData = new WinJS.Binding.List(
[
    {
        date: new Date(2013, 2, 1),
        amount: 500.0
    },
    {
        date: new Date(2013, 1, 1),
        amount: 400.0
    },
    {
        date: new Date(2012, 12, 1),
        amount: 250.0
    },
    {
       date: new Date(2012, 11, 1),
        amount: 450.0
    },
    {
        date: new Date(2012, 10, 1),
       amount: 100.0
    },
    {
        date: new Date(2012, 9, 1),
        amount: 200.0
    }
]
);

(2)  I need the chart for this data to look like the attached file "TelerikQuestion_GridDesired.jpg"

(3)  You can see my chart looks bad from the attached file "telerikquestion_chartfail.jpg"

It's useless, but here is my code so far:

var chart = new Telerik.UI.RadChart(document.getElementById("myChart"), {
    dataSource: chartData,
    series: [
        { type: "column",
        field: "amount"}
    ],
    categoryAxis: {
        field: "date",
        labels: {
            format: "MMM"
        }
    },
    valueAxis: {
        field: "amount",
        labels: {
            format: "${0}"
        }
    }
});

Here is the html

<div id="myChart" style="width: 450px; height:150px;" data-win-control="Telerik.UI.RadChart"></div>

Thanks,
Ray

[Veli]

Hello,

The reason for this distorted rendering of the chart is the values of type Date in your category axis. When category values are dates, RadChart automatically turns the category axis to a Date axis. A Date axis knows how to plot its axis values based on computed date intervals. However, when working with Date axes, RadChart requires that series values are sorted by the Date category value. Otherwise, the chart cannot plot the series values properly. So, a simple sort of your binding list fixes the issue:

var chartData = [...]

chartData.sort(function (a, b) {
    return a.date - b.date;
});

var chart = [...]

After the change, your chart now looks as expected:



Greetings,
Veli
the Telerik team

[Sir]

Thanks Veli.
Though I'm still having problems.

(1)  I need the category axis months to display left to right as most recent month to oldest month
With the dataset I supplied in my original post, the category axis months should look like this:
FEB  JAN  DEC  NOV  OCT  SEP
After your code, instead I'm getting this:
OCT  NOV  DEC  JAN  FEB  MAR

(2)
I'm not getting any actual bars on my chart or amount labels on the value axis.
Also, can I get the dollar amount above the column on the most recent month (last month on the right of the chart), as shown in my uploaded jpeg "TelerikQuestion-GridDesired.jpg".
I've upload a jpeg of what I'm now getting as "TelerikQuestion-ChartNotWorking.jpg"

(3)
Just so there is no confusion, can you just provide me an entire code solution instead of just a chunk of it?
Use the WinJS.Binding.List data I provided in my first post, and get the cat axis months on the bottom as
FEB  JAN  DEC  NOV  OCT  SEP
(Use image "TelerikQuestion-GridDesired.jpg" from my original post)

Possible Issue: As you can see in the image, I have this purple div background color that could be fighting with the grid?
Is there any z-index issues that we could try to apply to the chart objects?
I notice if I change the background of the parent div to white, the whole chart is whited out and can't be seen.

Thanks again Veli for your help,

Ray

[Veli]

(1) A Date axis always requires that dates are in ascending order to represent chronologically progressing data. If you need to display month names in descending order, you have to slightly modify your data to represent your date values as strings instead of dates. So, before passing your date to the chart, you need to first sort by the date field in descending order, and then take the month names only:

//order by date descending
chartData.sort(function (a, b) {
    return b.date - a.date;
});

//represent dates as strings (month names only)
chartData.forEach(function (item) {
    item.date = item.date.toString().split(" ")[1]
});

(2) The screen shot you sent us indicates a problem with building the series. This might be due to wrong series definition, improper data in your data source, or something else. I am attaching a working page demonstrating the scenario. Please let me know how it works on your side and check what the differences from your original code are.

(3) The background you've applied is very unlikely to be the cause of the hidden series bars. The attached sample page demonstrates the working scenario as you requested. All the best,
Veli
the Telerik team

[Sir]

Thanks Veli,

My data is showing up now and the months look good.
I still have some other questions, but I'll have them posted in another thread.

Ray

[Zeeshan]

what is rad bar chart and what is the working of it

[Zeeshan]

what is rad bar chart and what is the working of it

[Tsvetina]

Hello Zeeshan,

Bar charts are made using RadChart's Bar series. You can learn more about Bar series here:
Bar Series

If you need general information about RadChart, start from:
Getting Started

Regards,
Tsvetina
Telerik