X-Axis DateTime format Customize issue

[SenSeo]

Hello Team,

We are generating the chart for Bar/Line/PointXY. We are using the date-time/date format for the X-Axis. The problem is, we are unable to customize the X-Axis date/date-time format. Below is my code,

Chart1.axes.bottom.setMinMax(new Date(2000, 1, 1, 0, 0, 0).getTime(), new Date(2000, 1, 2, 0, 0, 0).getTime());
Chart1.axes.bottom.labels.dateFormat = "shortTime";

Can you please assist to customize the X-Axis values for the Date/Date-Time format?

We have attached the images for your reference.

[Yeray]

Hello,

Have you included Steven Levithan's date.format.js?

Code: Select all

<script src="../src/date.format.js" type="text/javascript"></script>

[SenSeo]

Yes. the js file "date.format.js" is added along with other reference.

[Yeray]

Hello,

According to dateFormat.masks in date.format.js, "shortTime" means "h:MM TT" so your image looks correct, isn't it? What result would you expect?
Or maybe you are getting another result and the image shows the result expected. In that case, could you please post the wrong result you are getting?

[SenSeo]

Yes. Date time format is displaying as expected. The problem is, I would like to set the increment option to the bottom axes(X-Axis). I have attached the expected output as image here for your reference.

If the bottom axes is an integer, we could able to set the increment option. But, for the date time format, unable to set the increment.

Note : Actually, I need to show only 12:00 AM, 6:00 AM, 12:00 PM, 6:00 PM etc., instead of showing the complete 12 hour format.

[Yeray]

Hello,

To set a 6h increment:

Code: Select all

  var oneDay = 86400000;
  var oneHour = oneDay / 24;
  Chart1.axes.bottom.increment = oneHour * 6;

[SenSeo]

Thanks for the response. The x-axis should start from 12:00 AM with 6h increment. I have used the below code to achieve that. But, by default it is showing as "5:30 AM, 11:30 AM etc.". Please refer the attached image.

Chart1.axes.bottom.setMinMax(new Date(2000, 1, 1, 0, 0, 0).getTime(), new Date(2000, 1, 2, 0, 0, 0).getTime());
var oneDay = 86400000;
var oneHour = oneDay / 24;
Chart1.axes.bottom.increment = oneHour * 6;


I'd like to show the axis value from "12:00 AM" to "12:00 AM" with 6hr increment. Please let me know, If I need to do any modification to the above mentioned code.

Thanks!

[SenSeo]

In addition to my previous reply, how to customize the time zone for X-axis? I am in IST time zone and by default it's displaying "5:30 AM".

[Yeray]

Hello,

I'm afraid custom labels aren't implemented in TeeChart JavaScript as in the other versions. That's a request already present in the public tracker. Note the issue description differs a little bit from the problem you describe, but custom labels would allow to solve both situations.
http://bugs.teechart.net/show_bug.cgi?id=404

Feel free to add your mail to the CC list to be automatically notified when an update arrives.

[SenSeo]

We tried to resolve timezone issue of x-axis value but still facing the same issue. Let me explain with example for better understanding

We have data which populates within 5 minutes like [2016-03-23 10:10:12.000,2016-03-23 17:18:12.000,2016-03-23 17:23:12.000 , .......... ,2016-04-24 00:53:12.000] .In this case our start date is 2016-03-23 17:10:12.000 and end date is 2016-04-24 00:53:12.000 . Based on the sample data the x-axis label value should be like 23mar 10am ,23mar 5pm, etc.

We are setting Min and max time using below code based on x-axis value start and end date time.

Chart1.axes.bottom.setMinMax( new Date(2016, 3, 23, 10, 10, 12).getTime(), new Date(2016, 4, 24, 00, 53, 12).getTime());

Here the major problem is that the time value is changing based on user's local timezone setting. The start date time 10am should be constant for all time zones that we could not able to achieve.

Please help us to resolve this issue.

[Yeray]

Hello,

Thanks for the explanation.
I still think custom labels would allow you to achieve what you require. You could dynamically add the labels at the positions you wish, showing the texts you like.

[SenSeo]

Thanks for your suggestion.

We have tried with the custom label option for the x axis values. Actually, we need to plot the graph for 12:30 AM,1:30 AM,2:30 AM......., 11:30 PM and the x axis label should display as 12:00 AM,4:00 AM, 8:00 AM....12:00 AM.

But, when we used the custom label, the graph is plotting based on the customized label value. For example, If we pass the label option as ["12:00 AM", "2:00 AM", "4:00 AM", "6:00 AM"] the graph is plotting to 12:00 AM, 2:00 AM.... instead of 12:30 AM, 1:30 AM,2:30 AM....

Below is my sample code,

Code: Select all

<html>
<head>
    <title></title>
    <script src="Scripts/TeeChart/teechart.js"></script>
    <script src="Scripts/TeeChart/teechart-extras.js"></script>
    <script src="Scripts/TeeChart/teechart-animations.js"></script>
    <script src="Scripts/TeeChart/date.format.js"></script>

    <script type="text/javascript">
        var Chart1;

        function draw() {
           

            Chart1 = new Tee.Chart("canvas");
            var lineChart = new Tee.Line();
            var ohlc = new Tee.Candle();
            var bar1MinValues = [30,70,150,250];
            var bar1MaxValues = [ 200, 250, 350, 450];
            var bar2MinValues = [ 50, 100, 200, 300];
            var bar2MaxValues = [ 100, 200, 300, 400];
            var lineValues = [ 70, 150, 250, 350];
            lineChart.data.values = [];
            ohlc.data.x = [];
            lineChart.data.x = [];
            ohlc.add = function (open, close, high, low) {
                var d = this.data;
                var count;

                if (d.open) count = d.open.length + 1; else count = 1;
                d.values.length = count;
                d.close = d.values;

                if (d.open) d.open.length = count; else d.open = new Array(1);
                if (d.close) d.close.length = count; else d.close = new Array(1);
                if (d.high) d.high.length = count; else d.high = new Array(1);
                if (d.low) d.low.length = count; else d.low = new Array(1);

                d.open[count - 1] = open;
                d.close[count - 1] = close;
                d.high[count - 1] = high;
                d.low[count - 1] = low;
            }

            for (var i = 0; i < bar1MinValues.length ; i++) {
                var o = bar2MinValues[i];
                var c = bar2MaxValues[i];
                var h = bar1MaxValues[i];
                var l = bar1MinValues[i];
                ohlc.add(o, c, h, l);
                ohlc.data.x[i] = new Date(2000, 1, 1, i, 30, 0);
                lineChart.data.values[i] = lineValues[i];
                lineChart.data.x[i] = new Date(2000, 1, 1, i, 30, 0);
            }
            //ohlc.data.labels = ["12:00 AM", "2:00 AM", "4:00 AM", "6:00 AM"];
            //lineChart.data.labels = ["12:00 AM", "2:00 AM", "4:00 AM", "6:00 AM"];
            Chart1.axes.bottom.labels.dateFormat = "shortTime";
            //Chart1.axes.bottom.increment = 2;
            var oneDay = 86400000;
            var oneHour = oneDay / 24;
            Chart1.axes.bottom.increment = oneHour * 2;
            Chart1.addSeries(ohlc);
            Chart1.addSeries(lineChart);
            //Chart1.axes.bottom.setMinMax(0, 10000000);
            Chart1.axes.left.setMinMax(0, 500);
            Chart1.axes.left.increment = 30;
            Chart1.draw();
        }


    </script>
</head>
<body onload="draw()">
    <center>
        <br><canvas id="canvas" width="600" height="400">
            This browser does not seem to support HTML5 Canvas.
        </canvas>
    </center>
</body>
</html>

[Yeray]

Hello,

I'm afraid there's some confusion here. Let me explain the options:
- Default labels:
When you don't have labels in a series, you can play with the increment to modify the distance between labels.

- Series labels (I see in your code you are using this):
It consists on assigning a string to each point in a series (data.labels array). Then, when a series has labels, depending on the axis labelStyle property, it will display these strings:

Code: Select all

// options are:  “auto”, “none”, “value”, “mark”, “text”, “x”
Chart1.axes.left.labels.labelStyle = “text”; 

- OnGetLabel:
You can capture this event to modify the string and the text format when an axis label is going to be drawn. This is shown in the CustomLabels demo here (I believe this demo should be named "OnGetLabel" instead of "CustomLabels").

- Custom Labels:
This would allow you to manually calculate and place your labels and texts:
http://bugs.teechart.net/show_bug.cgi?id=404