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

Kendo Stock Chart DateFormat Problem

4 Answers 90 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Burak
Top achievements
Rank 2
Burak asked on 28 Mar 2014, 02:38 PM
I have a Stock Chart, and somehow I cannot seem to format its CategoryAxis' labels' formatting... 
I use

categoryAxis: {
            labels: {
            dateFormats:
                {
                    months: "MMM",
                    years: "yyyy",
                    weeks: "dd/MM",
                    days: "dd/MM",
                }
            }
}

But I still get the default formats... I need to have "MMM" for months but I always get "MMM 'yy"...
Is there a way to fix this? I am unable to fix it... I know the baseUnit for StockCharts with Navigator is "fit", 
but I tried modifying demos on the web, and it worked, my case is special somehow...

Hope to get the solution asap! Thanks :)

4 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 31 Mar 2014, 05:25 AM
Hi,

I can't spot any problems with the configuration you're using. I applied it to a live demo just to double check:
http://trykendoui.telerik.com/OBeh

Perhaps the actual application differs in some way or another.
It might be the case that the categoryAxis options are declared twice and are being overridden.

Regards,
T. Tsonev
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Burak
Top achievements
Rank 2
answered on 31 Mar 2014, 06:18 AM
I can't seem to see any code in your link...

My implementation is as follows; 

$("#chart").kendoStockChart({
        categoryAxis: {
        roundToBaseUnit: false,
        min : myOpts.xAxisMin,
        max : myOpts.xAxisMax,
            maxDateGroups: "24",
            labels: {
            dateFormats:
                {
                    months: "MMM"
                },
                font: "Calibri Light"
            },
            majorGridLines: {
                visible: false
            },
            line: {
                visible: false
            },
            labels: {
                font: "Calibri Light"
            },
            crosshair: {
                visible: true
            }
        },
        dataSource: chartData,
        dateField: "date",
        valueAxis: {
            plotBands: [{
                from: -100,
                to: 100,
                color: "#E3E5E4"
            }],
            line: {
                visible: false
            },
            majorGridLines: {
                step: 2
            },
            labels: {
                skip: 2,
                step: 2,
                template: "TL #= value/1000 #K",
                font: "Calibri Light",
                margin: 7
            },
            axisCrossingValue: -Number.MAX_VALUE
        },
        navigator: { // reverse order**
        categoryAxis: {
        roundToBaseUnit: false,
        },
            series: [{
                field: "income"
            }, {
                field: "costs"
            }, {
                field: "revenue"
            }],
            select: {
            from: selectFrom,
            to: selectTo
            }
        },
        seriesColors: myOpts.dataColors,
        seriesDefaults: {
            type: "area",
            opacity: 0.2,
            markers: {
                visible: true,
                size: myOpts.markerSize
            },
            line: {
            width: 2
            }
        },
        series: seriesOptions,
        title: {
            text: "Customer's Economic Life (TRY)",
            font: "Calibri Light"
        },
        legend: {
            visible: true,
            position: "right",
            labels: {
                font: "18px Calibri Light"
            }
        },
        tooltip: {
            visible: true,
            shared: true,
            opacity: 0,
            border: {
                width: 0
            },
            template: "TL #= value/1000 #K"
        },
        legendItemClick: events.onLegendItemClick,
        seriesHover: events.onSeriesHover,
        seriesClick: events.onSeriesClick,
        selectEnd: fixLooks,
        zoomEnd: fixLooks,
        dragEnd: fixLooks
    }).data("kendoStockChart");

Please I need to resolve this issue ASAP!
0
Accepted
T. Tsonev
Telerik team
answered on 31 Mar 2014, 08:30 AM
Hello,

The TryKendoUI site was temporary down and was not loading the demo source. Sorry for the inconvenience.

Thanks to the code you've sent I've traced the problem down to a duplicate categoryAxis.labels declaration:
     categoryAxis: {
        roundToBaseUnit: false,
        min : myOpts.xAxisMin,
        max : myOpts.xAxisMax,
            maxDateGroups: "24",
            labels: {
                dateFormats:
                {
                    months: "MMM"
                },
                font: "Calibri Light"
            },

            majorGridLines: {
                visible: false
            },
            line: {
                visible: false
            },
            labels: {
                font: "Calibri Light"
            },

            crosshair: {
                visible: true
            }
        }


That's tricky to debug as the configuration is perfectly valid. The Chart also has no chance to warn you of the error as it receives the merged configuration.

Also note that the label font doesn't follow the CSS font syntax and must include the font-size as first parameter:
      font: "14px Calibri Light"

I hope this helps.

Regards,
T. Tsonev
Telerik
 

Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

 
0
Burak
Top achievements
Rank 2
answered on 31 Mar 2014, 09:01 AM
Hello, and literally Oh My God...

I have been trying to fix this problem for 2 days... and I have never seen that duplicate labels. I am extremely silly... Thanks for pointing it out!! It worked like a charm, thanks a lot!
Tags
Charts
Asked by
Burak
Top achievements
Rank 2
Answers by
T. Tsonev
Telerik team
Burak
Top achievements
Rank 2
Share this question
or