Move x-axis labels in between major ticks

[Nikhil]

In the default settings of a line chart the x-axis labels go directly beneath the major tick marks. However, when plotting financial data (like stock prices) the x-axis labels need to be inside/in between the major tick marks.  How can this be done?

For an example, see how Google Finance shows dates: http://www.google.com/finance?q=aa&ei=_LnsUOjIFKSWiAL8zwE

Here is my current code:

// PLOT CHART
            var chart = new Telerik.UI.RadChart(document.getElementById("myChart"), {
                theme: "light",
                tooltip: {
                    visible: 'true',
                    template: ''
                },
                dataSource: {
                    data: index
                },
                series: [{
                    type: 'line',
                    field: 'close'
                }],
                categoryAxis: {
                    field: 'Date',
                }
            });
            var chartElement = document.getElementById("myChart");
            var myChartControl = chartElement.winControl;
            console.log(myChartControl instanceof Telerik.UI.RadChart); //true
            chart.tooltip.visible = true;   //modify properties
            chart.refresh();                //call refresh() to update

[Veli]

Hello Nikhil,

Thank you for contacting Telerik support. You can achieve alignment of the category axis labels between the major tick lines by setting the categoryAxis.justified property of the chart to false:

// PLOT CHART
var chart = new Telerik.UI.RadChart(document.getElementById("myChart"), {
    theme: "light",
    tooltip: {
        visible: 'true',
        template: ''
    },
    dataSource: {
        data: index
    },
    series: [{
        type: 'line',
        field: 'close'
    }],
    categoryAxis: {
        field: 'Date',
        justified: false
    }
});
var chartElement = document.getElementById("myChart");
var myChartControl = chartElement.winControl;
console.log(myChartControl instanceof Telerik.UI.RadChart); //true
chart.tooltip.visible = true;   //modify properties
chart.refresh();                //call refresh() to update

Let me know how this setting works for you.

All the best,
Veli
the Telerik team

[Nikhil]

Hi Veli,

Thanks for the support. You guys have some great products and are super close to earning another customer (I'm checking out the trial right now), but I need to know if this product can support my needs first.

justified: false actually moves the data points toward the middle, as well (not just the labels, which is the only thing I want to move). It is a little strange to plot continuous data (such as stock prices) in the middle of a cartesian plane and not connect the data to the Y-Axis.  

Here is a sample stock quote data set I'm working with:

{
"2013-01-04":
  { "open": "9.1100", "close": "9.2600", "high": "9.2800", "low": "9.1000", "volume": "18329900" },
"2013-01-03":
  { "open": "8.9700", "close": "9.0700", "high": "9.1500", "low": "8.9500", "volume": "22302800" },
"2013-01-02":
  { "open": "8.8800", "close": "8.9900", "high": "8.9900", "low": "8.8400", "volume": "21044800" },
"2012-12-31":
  { "open": "8.5200", "close": "8.6800", "high": "8.6900", "low": "8.4800", "volume": "19336100" },
"2012-12-28":
  { "open": "8.5700", "close": "8.5000", "high": "8.6000", "low": "8.4900", "volume": "10049600" }
}

(I'm only plotting close right now...more on that later).
My current graph is like this: http://bit.ly/SlBNUw
But I need the labels like this: http://bit.ly/VJQHk0
This location of the labels is really requirement #1.

Requirement #2 would be, for each day, to plot both the open and close price (this would make the data non-contiguous); and, of course, keep date labels in the middle. Your demos of charting financial data are visually stunning, but hopefully they can meet these two requirements, as well.

[Veli]

Hi Nikhil,

The charting algorithm of RadChart plots category labels right under value points to convey the relevance between the value and its category. In both category axis states (justified and non-justified), the category label must always be positioned right below the point corresponding to the X-axis value of the data point on the line series. In the needed graph screen, there are 5 data points, but only 4 category labels. Additionally, as labels are positioned between data points, it's not clear whether a particular label refers to the point to the left or right. Bottom line is, RadChart does not support automatic positioning of the category labels between value points, as this scenario would, I believe, break the consistent match of data points to category labels.

If you still need to implement this layout, you can use the categoryAxis.labels.margin.left property to give an arbitrary left margin and position your labels as required:

...
categoryAxis: {
    field: 'Date',
    justified: true,
    labels: {
        margin: { left: 150 }
    }
}
...

The result is the following chart layout:



Note the outstanding rightmost label. As there must be equal numbers of data points and category labels, we have a label that is off the plot area after applying a margin of 150px. 

As for requirement 2, you can use an additional line series for the "open" values:

...
series: [
    { type: 'line', field: 'close' },
    { type: 'line', field: 'open' }
],
...

Let me know if this is what you need, or some other custom layout is required.

Attached is a sample page demonstrating the chart setup. You can put it in your own project (with Telerik RadControls referenced) and run it.

Greetings,
Veli
the Telerik team

[Nikhil]

Wow, that's great, Veli!  The labels work great as you've described.

Regarding plotting the open and close price: I'm looking to plot the data as one series, essentially....or maybe it would be plotting each day as its own series?  It really comes down to plotting two separate data points per date, somehow. I've mocked it up here: http://bit.ly/VNVKSO.  Would I need to rearrange my data object to do that, or is there some magic I can do with RadControls?

[Veli]

Hello Nikhil,

Plotting both the open and close values on a single series requires a completely different approach. To achieve the layout you've drawn, you need to modify both your data and the way RadChart treats the data. Here's the code snipped that achieves the scenario:

01.var index = {
02.    "2013-01-04":
03.        { "open": "9.1100", "close": "9.2600", "high": "9.2800", "low": "9.1000", "volume": "18329900" },
04.    "2013-01-03":
05.        { "open": "8.9700", "close": "9.0700", "high": "9.1500", "low": "8.9500", "volume": "22302800" },
06.    "2013-01-02":
07.        { "open": "8.8800", "close": "8.9900", "high": "8.9900", "low": "8.8400", "volume": "21044800" },
08.    "2012-12-31":
09.        { "open": "8.5200", "close": "8.6800", "high": "8.6900", "low": "8.4800", "volume": "19336100" },
10.    "2012-12-28":
11.        { "open": "8.5700", "close": "8.5000", "high": "8.6000", "low": "8.4900", "volume": "10049600" }
12.}
13.
14.WinJS.Utilities.ready().then(function () {
15.    // PLOT CHART
16.    var chartData = Object.keys(index).reduce(function (data, dateKey, i) {
17.        var seriesData = [];
18.        seriesData.length = i * 2;
19.
20.        seriesData.push(parseFloat(index[dateKey].open));
21.        seriesData.push(parseFloat(index[dateKey].close));
22.
23.        data.series.push({
24.            type: 'line',
25.            name: dateKey,
26.            data: seriesData
27.        });
28.
29.        data.categories.push(dateKey);
30.        data.categories.push(dateKey);
31.
32.        return data;
33.
34.    }, { series: [], categories: [] });
35.
36.    var chart = new Telerik.UI.RadChart(document.getElementById("myChart"), {
37.        theme: "light",
38.        tooltip: {
39.            visible: true
40.        },
41.        series: chartData.series,
42.        seriesColors: ["#1E98E4"],
43.        categoryAxis: {
44.            categories: chartData.categories,
45.            labels: {
46.                margin: { left: 65 },
47.                template: '#= (window.labels || (window.labels = [])).indexOf(value) < 0 ? labels.push(value) && value : "" #'
48.            }
49.        }
50.    });
51.});

I'll try to explain the important parts of the control:

1. Convert your data (lines 16 - 34). We need to create 2 collections out of the data - one for the series data and one for the category values. We are building multiple series, each series having 2 data points - for the open and close value. Thus, we are essentially creating N series for N data items, instead of 1 series for all data items.

Additionally, Instead of using a common data source for all series, we are creating the series objects with their own data arrays and an array of categories for the X axis. Note how the series data arrays are increasing in length for every series. This is because we need to plot every series further to the right in its own space. As category values correspond to series data values by position in the array, we are shifting each new series by 2 points to the right.

Finally, we are creating 2 identical category labels for every data item - one for the open and one for the close value.

2. Initialize the chart (lines 36 - 51). We are setting the series configuration and the category data we have created above. Note that, in this case, we do not use the dataSource property, as series data and category values are passed directly in the configuration.

On line 42, we are setting a single color for all series. This makes RadChart look like it has only a single non-contiguous line series, while it actually has many series with the same color.

On line 47 we are using a custom template for our category labels. The template essentially hides every other category label. As we have 2 identical category labels for every date, only one of them is displayed, thus avoiding clutter in our view.

The result is the following chart layout:



Modified sample page is attached. I hope this helps.
 
Regards,
Veli
the Telerik team

[Nikhil]

Hi Veli,

I'm impressed with your support and actually being able to plot what I need (I've been looking around at quite a few solutions). Looks like I'll be using RadControls for my app dev :-).  I look forward to seeing what features you guys add over the next couple of months!

Thanks!