Custom label with multiple series - Urgent

SenSeo · Post by **SenSeo** » Thu May 12, 2016 2:55 pm

Hi,

I need to draw the multiple series based on x and y axis values. Y axis have a numeric value between 10 to 500 , X-axis has a dateTime with interval 5 minutes.To overcome the timezone issue, I populated the datetime values to label of series instead of using X-axis value property and draw the series. But the problem is that when I tried to draw the 2 series with a different date range. The second series is not drawn properly based on date range. Is there any way to fix this issue?

Below is the sample program which I have used for demo

----------Sample program

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>TeeChart JavaScript Custom Axis Labels Example</title>

<!--[if lt IE 9]>
    <script src="../../src/excanvas/excanvas_text.js"></script>
    <script src="../../src/excanvas/canvas.text.js"></script>
<![endif]-->

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

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

function draw() {
    Chart1 = new Tee.Chart("canvas");
    gcLine = new Tee.Line();
 
    gcLine.data.values = [109, 109, 106, 107, 110, 109, 115, 116, 117, 118];
   gcLine.data.labels = ["2016-03-03T00:02:04", "2016-03-04T00:07:04", "2016-03-03T00:12:04", "2016-03-03T00:17:04", "2016-03-03T00:22:04", "2016-03-03T00:27:04", "2016-03-03T00:32:04", "2016-03-07T00:37:04", "2016-03-07T00:42:04", "2016-03-07T00:47:04"];
 
    gcLine1 = new Tee.PointXY();
    gcLine1.data.values = [150, 91, 172, 148, 123, 231, 196, 144, 139, 131];
    gcLine1.data.labels = ["2016-03-04T06:29:28", "2016-03-04T19:27:20", "2016-03-04T06:19:10", "2016-03-04T08:32:42", "2016-03-04T21:38:26", "2016-03-05T07:27:02", "2016-03-05T21:13:04", "2016-03-06T07:53:06", "2016-03-06T20:51:22", "2016-03-07T21:54:24"];

    Chart1.axes.bottom.labels.labelStyle = "text"
    Chart1.addSeries(gcLine).pointer.visible = false;


    Chart1.addSeries(gcLine);
    Chart1.addSeries(gcLine1);

  Chart1.title.text="Custom Axis Labels";

  //Chart1.axes.bottom.labels.ongetlabel=function(value,s) {
  //  if (value==4) {
  //     this.format.font.fill="lime";
  //     this.format.font.style="14px Verdana";
  //     return "Four";
  //  }
  //  else
  //  {
  //     this.format.font.fill="black";
  //     this.format.font.style="11px Tahoma";
  //     return s;
  //  }
  //}

 

  Chart1.draw();
}

</script>
</head>
<body onload="draw()">

<center>
<br><canvas id="canvas" width="1000" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</center>

</body>
</html>

Post by **Yeray** » Fri May 13, 2016 10:16 am

Hello,

SenSeo wrote:To overcome the timezone issue, I populated the datetime values to label of series instead of using X-axis value property and draw the series

Have you tried creating the dates as UTC as suggested here?
This way you wouldn't have this problem.

SenSeo · Post by **SenSeo** » Fri May 13, 2016 3:54 pm

Yes. I used UTC to convert all x-axis values to UTC format and assigned values to x-axis using below code and set min and max value to X-axis based on start and end date to increase the x-axis value. But the problem is that x-axis value is not displayed properly. In this case the x-axis value should disply like "3mar,5mar,7mar", value "3mar" is missing in the first index position(refer the screen shot)

Code: Select all

 var s1= new Tee.PointXY();
                    s1.title = "Sensor Glucose";
                    s1.data.values = data.SeriesData;  //data of numeric
                    s1.data.x = fnConvertToDate(data.XAxisValues); 
                    chart1.addSeries(s1).pointer.visible = true;

var eventStartDate = s1.data.x[0];
var eventEndDate = s1.data.x[s1.data.x.length - 1];
var startDate = new Date(Date.UTC(eventStartDate.getYear(), eventStartDate.getMonth(), eventStartDate.getDate(), 0, 0, 0));
var endDate = new Date(Date.UTC(eventEndDate.getYear(), eventEndDate.getMonth(), eventEndDate.getDate(), 23, 59, 59));

var oneHour = 60 * 60 * 1000;
dateTimeInterval = oneHour * 4
glucoseTrendChartLine.axes.bottom.increment = dateTimeInterval;
glucoseTrendChartLine.axes.bottom.setMinMax(startDate.getTime(), endDate.getTime());
glucoseTrendChartLine.axes.bottom.labels.dateFormat = "UTC: dd mmm h:MM TT";
glucoseTrendChartLine.axes.bottom.labels.roundFirst = true;
glucoseTrendChartLine.axes.bottom.coustom = true;
glucoseTrendChartLine.axes.bottom.ticks.visible = true;
glucoseTrendChartLine.axes.bottom.automatic = false;
glucoseTrendChartLine.axes.bottom.format.stroke.size = 0;
glucoseTrendChartLine.axes.bottom.labels.angle = 90;



 function fnConvertToDate(originalDates) {
                var convertedDate = [];
                if (originalDates == null) return;

                for (var i = 0; i < originalDates.length; i++) {
                    var eventDate = new Date(originalDates[i]);
                    var date = new Date(Date.UTC(eventDate.getYear(), eventDate.getMonth(), eventDate.getDate(), eventDate.getHours(), eventDate.getMinutes(), eventDate.getSeconds(), eventDate.getMilliseconds()));
                    convertedDate.push(date);
                }

                return convertedDate;
            }

Post by **Yeray** » Tue May 17, 2016 10:24 am

Hello,

I see you are playing with two different chart variables in that code: chart1 and glucoseTrendChartLine.
I also miss the data initialization so I can't reproduce the issue here.
Please, try to arrange a simple example we can run as-is to reproduce the problem here.

Thanks in advance.

SenSeo · Post by **SenSeo** » Tue May 17, 2016 1:29 pm

Hi,

I created a sample program with test data. If you run this program, you can see the chart as attached image here. Here the problem is that x-axis start date is 26/2/2016, so the x-axis label value should start with this date from 0th grid but started from 1st grid of graph.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>TeeChart JavaScript Custom Axis Labels Example</title>

    <!--[if lt IE 9]>
        <script src="../../src/excanvas/excanvas_text.js"></script>
        <script src="../../src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <script src="../../src/teechart.js" type="text/javascript"></script>
    <script type="text/javascript">
        var Chart1;

        function draw() {
            Chart1 = new Tee.Chart("canvas");
            var gcSeries1 = null; 
            var gcSeries2 = null; 

            var minYAxisValue = 0;
            var maxYAxisValue = 450;
            var yAxisIncrement = 15;

            var SeriesData = [169, 175, 174, 175, 177, 189, 194, 205, 215, 223, 222, 226, 226, 223, 227, 233, 239, 237, 248, 252, 251, 258, 256, 253, 148, 147, 150, 149, 147, 145, 141, 144, 142, 142, 143, 141, 123, 121, 117, 113, 112, 110, 112, 112, 113, 113, 101, 109, 108, 110, 114, 121, 128, 134, 133, 137, 136, 135, 135, 136, 133, 138, 138, 143, 145, 147, 145, 148, 146, 148, 148, 145, 149, 151, 149, 147, 145, 136, 141, 143, 142, 139, 141, 139, 141, 144, 141, 140, 135, 129, 122, 118, 115, 111, 114, 113, 117, 121, 121, 120];
            var XAxisValues = ["2016-2-26 9:16:54.0", "2016-2-26 9:21:54.0", "2016-2-26 9:26:54.0", "2016-2-26 9:31:54.0", "2016-2-26 10:36:54.0", "2016-2-26 11:41:54.0", "2016-3-26 9:46:54.0", "2016-3-26 9:51:54.0", "2016-3-26 9:56:54.0", "2016-2-26 10:1:54.0", "2016-4-26 10:6:54.0", "2016-2-26 10:11:54.0", "2016-2-26 10:16:54.0", "2016-2-26 10:21:54.0", "2016-2-26 10:26:54.0", "2016-2-26 10:31:54.0", "2016-2-26 10:36:54.0", "2016-2-26 10:41:54.0", "2016-2-26 10:46:54.0", "2016-2-26 10:51:54.0", "2016-2-26 10:56:54.0", "2016-2-26 11:1:54.0", "2016-2-26 11:6:54.0", "2016-2-26 11:11:54.0", "2016-2-26 11:16:56.0", "2016-2-26 11:21:54.0", "2016-2-26 11:26:54.0", "2016-2-26 11:31:54.0", "2016-2-26 11:36:54.0", "2016-2-26 11:41:54.0", "2016-2-26 11:46:54.0", "2016-2-26 11:51:54.0", "2016-2-26 11:56:54.0", "2016-2-26 12:1:54.0", "2016-2-26 12:6:54.0", "2016-2-26 12:11:54.0", "2016-2-26 12:16:56.0", "2016-2-26 12:21:56.0", "2016-2-26 12:26:56.0", "2016-2-26 12:31:56.0", "2016-2-26 12:36:56.0", "2016-2-26 12:41:56.0", "2016-2-26 12:46:56.0", "2016-2-26 12:51:56.0", "2016-2-26 12:56:56.0", "2016-2-26 13:1:56.0", "2016-2-26 13:22:16.0", "2016-2-26 13:27:16.0", "2016-2-26 13:32:16.0", "2016-2-26 13:37:16.0", "2016-2-26 13:42:16.0", "2016-2-26 13:47:16.0", "2016-2-26 13:52:16.0", "2016-2-26 13:57:16.0", "2016-2-26 14:2:16.0", "2016-2-26 14:7:16.0", "2016-2-26 14:12:16.0", "2016-2-26 14:17:16.0", "2016-2-26 14:22:16.0", "2016-2-26 14:27:16.0", "2016-2-26 14:32:16.0", "2016-2-26 14:37:16.0", "2016-2-26 14:42:16.0", "2016-2-26 14:47:16.0", "2016-2-26 14:52:16.0", "2016-2-26 14:57:16.0", "2016-2-26 15:2:16.0", "2016-2-26 15:7:16.0", "2016-2-26 15:12:16.0", "2016-2-26 15:17:16.0", "2016-2-26 15:22:16.0", "2016-2-26 15:27:16.0", "2016-2-26 15:32:16.0", "2016-2-26 15:37:16.0", "2016-2-26 15:42:16.0", "2016-2-26 15:47:16.0", "2016-2-26 15:52:16.0", "2016-2-26 15:57:16.0", "2016-2-26 16:2:16.0", "2016-2-26 16:7:16.0", "2016-2-26 16:12:16.0", "2016-2-26 16:17:16.0", "2016-2-26 16:22:16.0", "2016-2-26 16:27:16.0", "2016-2-26 16:32:16.0", "2016-2-26 16:37:16.0", "2016-2-26 16:42:16.0", "2016-2-26 16:47:16.0", "2016-2-26 16:52:16.0", "2016-2-26 16:57:16.0", "2016-2-26 17:2:16.0", "2016-2-26 17:7:16.0", "2016-2-26 17:12:16.0", "2016-2-26 17:17:16.0", "2016-2-26 17:22:16.0", "2016-2-26 17:27:16.0", "2016-2-26 17:32:16.0", "2016-2-26 17:37:16.0", "2016-2-26 17:42:16.0",  "2016-4-27 12:50:26.0", "2016-4-27 12:54:36.0", "2016-4-27 12:55:26.0", "2016-4-27 12:59:36.0", "2016-4-27 13:0:26.0", "2016-4-27 13:4:36.0", "2016-4-27 13:5:26.0", "2016-4-27 13:9:36.0", "2016-4-27 13:10:26.0", "2016-4-27 13:14:36.0", "2016-4-27 13:15:26.0", "2016-4-27 13:19:36.0", "2016-4-27 13:20:26.0", "2016-4-27 13:24:36.0", "2016-4-27 13:25:26.0", "2016-4-27 13:29:36.0", "2016-4-27 13:30:26.0", "2016-4-27 13:34:36.0", "2016-4-27 13:35:26.0", "2016-4-27 13:39:34.0", "2016-4-27 13:40:26.0", "2016-4-27 13:44:36.0", "2016-4-27 13:49:36.0"];

            var XAxisStartDate = "2016-2-26 9:16:54.0";
            var YAxisEndDate = "2016-4-27 13:49:36.0";



            var diffDays = 10;

                gcSeries1 = new Tee.PointXY();
                gcSeries1.data.values.clear;
                gcSeries1.title = "Series1";
                gcSeries1.data.values = SeriesData;  //data value
                gcSeries1.data.x = ConvertDateForXAxis(XAxisValues); // XAxisDateValue;
                gcSeries1.pointer.style = "ellipse";
                ApplyStylesToSeries(gcSeries1, "#4E4839", 7, 7);
                Chart1.addSeries(gcSeries1);

            var eventStartDate = new Date(XAxisStartDate);
            var eventEndDate = new Date(YAxisEndDate);

            var startDate = new Date(Date.UTC(eventStartDate.getYear(), eventStartDate.getMonth(), eventStartDate.getDate(), 0, 0, 0));
            var endDate = new Date(Date.UTC(eventEndDate.getYear(), eventEndDate.getMonth(), eventEndDate.getDate(), 23, 59, 59));


            var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
            var oneHour = 60 * 60 * 1000;
            var dateTimeInterval = 0;
            var dateFormate = "h:MM TT";
            var setVisibilty = 1;

           
            dateTimeInterval = oneDay * 14;
            dateFormate = "dd mmm";

           // endDate.setHours(endDate.getHours() + setVisibilty);

            Chart1.panel.format.stroke.fill = "silver";
            Chart1.panel.format.stroke.size = 1;
            Chart1.panel.format.gradient.colors[0] = "white";
            Chart1.panel.format.gradient.colors[1] = "white";


            //Axes - Y
            Chart1.axes.left.title.text = "data";
            Chart1.axes.left.labels.roundFirst = true;
            Chart1.axes.left.title.visible = true;
            Chart1.axes.left.title.format.font.setSize(20);
            Chart1.axes.left.increment = yAxisIncrement;
            Chart1.axes.left.labels.decimals = 1;
            Chart1.axes.left.setMinMax(minYAxisValue, maxYAxisValue);
            Chart1.axes.left.ticks.visible = true;
            Chart1.axes.left.labels.angle = 90;
            Chart1.axes.left.labels.format.font.setSize(12);
            //Axes - X
            Chart1.axes.bottom.title.text = "Test1";
            Chart1.axes.bottom.title.format.font.setSize(20);
            Chart1.axes.bottom.increment = dateTimeInterval;
            Chart1.axes.bottom.setMinMax(startDate.getTime(), endDate.getTime());
            Chart1.axes.bottom.labels.dateFormat = "UTC: " + dateFormate;
            // glucoseTrendChartLine.axes.bottom.labels.dateFormat = dateFormate;
            Chart1.axes.bottom.labels.roundFirst = true;
            Chart1.axes.bottom.ticks.visible = true;
            Chart1.axes.bottom.automatic = false;
            Chart1.axes.bottom.format.stroke.size = 0;
            Chart1.axes.bottom.labels.angle = 90;
            Chart1.axes.bottom.labels.format.font.setSize(12);

            //Title
            Chart1.title.visible = true;
            Chart1.title.margins.bottom = 20;
            Chart1.title.text = "Test";
            Chart1.title.format.font.fill = "black";

            //Legend
            Chart1.legend.title.visible = false;
            Chart1.legend.title.format.font.setSize(12);
            Chart1.legend.format.font.setSize(12);
            Chart1.legend.format.stroke.fill = "silver";
            Chart1.legend.format.stroke.size = 3;
            Chart1.legend.format.font.shadow.visible = false;
            Chart1.legend.format.shadow.visible = false;
            Chart1.legend.position = "bottom";
            Chart1.legend.symbol.width = 20;
            Chart1.legend.symbol.height = 20;
            Chart1.legend.symbol.padding = 20;



            Chart1.draw();
        }

        function ApplyStylesToSeries(seriesObject, fillColor, width, height) {
            seriesObject.pointer.width = width;
            seriesObject.pointer.height = height;
            seriesObject.pointer.format.stroke.size = 0.01;
            seriesObject.pointer.format.fill = fillColor;
            seriesObject.pointer.format.stroke.visible = true;
            seriesObject.pointer.format.shadow.visible = false;
            seriesObject.format.shadow.visible = false;
            //Legend
            seriesObject.format.fill = fillColor;
        }



        //convert original date to UTC date for X-axis plot
        function ConvertDateForXAxis(originalDate) {
            var convertedDate = [];
            var date = null;
            if (originalDate == null) return;
            for (var i = 0; i < originalDate.length; i++) {
                var eventDate = null;

                eventDate = new Date(originalDate[i]);

                date = new Date(Date.UTC(eventDate.getYear(), eventDate.getMonth(), eventDate.getDate(), eventDate.getHours(), eventDate.getMinutes(), eventDate.getSeconds()));
                convertedDate[i] = date;
            }
            return convertedDate;
        }



    </script>
</head>
<body onload="draw()">

    <center>
        <br><canvas id="canvas" width="1000" height="700">
            This browser does not seem to support HTML5 Canvas.
        </canvas>
    </center>

</body>
</html>

Post by **Yeray** » Wed May 18, 2016 11:01 am

Hello,

First of all a couple of notes:
- The bottom axis labels dateFormat you are setting isn't working fine because you haven't included the date.format.js.
- The UTC dates you are creating have an incorrect year. That's why you get that "116". Change all the getYear() calls in your code for getUTCFullYear() to fix it.
- I see you are using labels.angle to rotate the bottom axis labels without effect; try with labels.rotation.

Regarding the issue with the first label at the left part of the bottom axis, try setting roundFirst to false:

Code: Select all

Chart1.axes.bottom.labels.roundFirst = false;

: 2016-05-18_13-05-57.png (46.42 KiB) Viewed 17889 times

SenSeo · Post by **SenSeo** » Thu May 19, 2016 12:16 pm

Hello,
Thanks for your reply.I done the modification as per your instruction and attached the code below. I am still facing the first label at the left part of the bottom axis, label is not displayed at the first position of the grid. Am I missing something in the code below?

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>TeeChart JavaScript Custom Axis Labels Example</title>

    <!--[if lt IE 9]>
        <script src="../../src/excanvas/excanvas_text.js"></script>
        <script src="../../src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <script src="../../src/teechart.js" type="text/javascript"></script>
    <script src="../../src/date.format.js"></script>
    <script type="text/javascript">
        var Chart1;

        function draw() {
            Chart1 = new Tee.Chart("canvas");
            var gcSeries1 = null; 
            var gcSeries2 = null; 

            var minYAxisValue = 0;
            var maxYAxisValue = 450;
            var yAxisIncrement = 15;

            var SeriesData = [169, 175, 174, 175, 177, 189, 194, 205, 215, 223, 222, 226, 226, 223, 227, 233, 239, 237, 248, 252, 251, 258, 256, 253, 148, 147, 150, 149, 147, 145, 141, 144, 142, 142, 143, 141, 123, 121, 117, 113, 112, 110, 112, 112, 113, 113, 101, 109, 108, 110, 114, 121, 128, 134, 133, 137, 136, 135, 135, 136, 133, 138, 138, 143, 145, 147, 145, 148, 146, 148, 148, 145, 149, 151, 149, 147, 145, 136, 141, 143, 142, 139, 141, 139, 141, 144, 141, 140, 135, 129, 122, 118, 115, 111, 114, 113, 117, 121, 121, 120];
          //  var XAxisValues = ["2016-2-26 9:16:54.0", "2016-2-26 9:21:54.0", "2016-2-26 9:26:54.0", "2016-2-26 9:31:54.0", "2016-2-26 10:36:54.0", "2016-2-26 11:41:54.0", "2016-3-26 9:46:54.0", "2016-3-26 9:51:54.0", "2016-3-26 9:56:54.0", "2016-2-26 10:1:54.0", "2016-4-26 10:6:54.0", "2016-2-26 10:11:54.0", "2016-2-26 10:16:54.0", "2016-2-26 10:21:54.0", "2016-2-26 10:26:54.0", "2016-2-26 10:31:54.0", "2016-2-26 10:36:54.0", "2016-2-26 10:41:54.0", "2016-2-26 10:46:54.0", "2016-2-26 10:51:54.0", "2016-2-26 10:56:54.0", "2016-2-26 11:1:54.0", "2016-2-26 11:6:54.0", "2016-2-26 11:11:54.0", "2016-2-26 11:16:56.0", "2016-2-26 11:21:54.0", "2016-2-26 11:26:54.0", "2016-2-26 11:31:54.0", "2016-2-26 11:36:54.0", "2016-2-26 11:41:54.0", "2016-2-26 11:46:54.0", "2016-2-26 11:51:54.0", "2016-2-26 11:56:54.0", "2016-2-26 12:1:54.0", "2016-2-26 12:6:54.0", "2016-2-26 12:11:54.0", "2016-2-26 12:16:56.0", "2016-2-26 12:21:56.0", "2016-2-26 12:26:56.0", "2016-2-26 12:31:56.0", "2016-2-26 12:36:56.0", "2016-2-26 12:41:56.0", "2016-2-26 12:46:56.0", "2016-2-26 12:51:56.0", "2016-2-26 12:56:56.0", "2016-2-26 13:1:56.0", "2016-2-26 13:22:16.0", "2016-2-26 13:27:16.0", "2016-2-26 13:32:16.0", "2016-2-26 13:37:16.0", "2016-2-26 13:42:16.0", "2016-2-26 13:47:16.0", "2016-2-26 13:52:16.0", "2016-2-26 13:57:16.0", "2016-2-26 14:2:16.0", "2016-2-26 14:7:16.0", "2016-2-26 14:12:16.0", "2016-2-26 14:17:16.0", "2016-2-26 14:22:16.0", "2016-2-26 14:27:16.0", "2016-2-26 14:32:16.0", "2016-2-26 14:37:16.0", "2016-2-26 14:42:16.0", "2016-2-26 14:47:16.0", "2016-2-26 14:52:16.0", "2016-2-26 14:57:16.0", "2016-2-26 15:2:16.0", "2016-2-26 15:7:16.0", "2016-2-26 15:12:16.0", "2016-2-26 15:17:16.0", "2016-2-26 15:22:16.0", "2016-2-26 15:27:16.0", "2016-2-26 15:32:16.0", "2016-2-26 15:37:16.0", "2016-2-26 15:42:16.0", "2016-2-26 15:47:16.0", "2016-2-26 15:52:16.0", "2016-2-26 15:57:16.0", "2016-2-26 16:2:16.0", "2016-2-26 16:7:16.0", "2016-2-26 16:12:16.0", "2016-2-26 16:17:16.0", "2016-2-26 16:22:16.0", "2016-2-26 16:27:16.0", "2016-2-26 16:32:16.0", "2016-2-26 16:37:16.0", "2016-2-26 16:42:16.0", "2016-2-26 16:47:16.0", "2016-2-26 16:52:16.0", "2016-2-26 16:57:16.0", "2016-2-26 17:2:16.0", "2016-2-26 17:7:16.0", "2016-2-26 17:12:16.0", "2016-2-26 17:17:16.0", "2016-2-26 17:22:16.0", "2016-2-26 17:27:16.0", "2016-2-26 17:32:16.0", "2016-2-26 17:37:16.0", "2016-2-26 17:42:16.0", "2016-4-27 12:25:26.0", "2016-4-27 12:29:36.0", "2016-4-27 12:30:26.0", "2016-4-27 12:34:36.0", "2016-4-27 12:35:26.0", "2016-4-27 12:39:36.0", "2016-4-27 12:40:26.0", "2016-4-27 12:44:36.0", "2016-4-27 12:45:26.0", "2016-4-27 12:49:36.0", "2016-4-27 12:50:26.0", "2016-4-27 12:54:36.0", "2016-4-27 12:55:26.0", "2016-4-27 12:59:36.0", "2016-4-27 13:0:26.0", "2016-4-27 13:4:36.0", "2016-4-27 13:5:26.0", "2016-4-27 13:9:36.0", "2016-4-27 13:10:26.0", "2016-4-27 13:14:36.0", "2016-4-27 13:15:26.0", "2016-4-27 13:19:36.0", "2016-4-27 13:20:26.0", "2016-4-27 13:24:36.0", "2016-4-27 13:25:26.0", "2016-4-27 13:29:36.0", "2016-4-27 13:30:26.0", "2016-4-27 13:34:36.0", "2016-4-27 13:35:26.0", "2016-4-27 13:39:34.0", "2016-4-27 13:40:26.0", "2016-4-27 13:44:36.0", "2016-4-27 13:49:36.0"];
            var XAxisValues = ["2016-2-26 9:16:54.0", "2016-2-26 9:21:54.0", "2016-2-26 9:26:54.0", "2016-2-26 9:31:54.0", "2016-2-26 10:36:54.0", "2016-2-26 11:41:54.0", "2016-3-26 9:46:54.0", "2016-3-26 9:51:54.0", "2016-3-26 9:56:54.0", "2016-2-26 10:1:54.0", "2016-4-26 10:6:54.0", "2016-2-26 10:11:54.0", "2016-2-26 10:16:54.0", "2016-2-26 10:21:54.0", "2016-2-26 10:26:54.0", "2016-2-26 10:31:54.0", "2016-2-26 10:36:54.0", "2016-2-26 10:41:54.0", "2016-2-26 10:46:54.0", "2016-2-26 10:51:54.0", "2016-2-26 10:56:54.0", "2016-2-26 11:1:54.0", "2016-2-26 11:6:54.0", "2016-2-26 11:11:54.0", "2016-2-26 11:16:56.0", "2016-2-26 11:21:54.0", "2016-2-26 11:26:54.0", "2016-2-26 11:31:54.0", "2016-2-26 11:36:54.0", "2016-2-26 11:41:54.0", "2016-2-26 11:46:54.0", "2016-2-26 11:51:54.0", "2016-2-26 11:56:54.0", "2016-2-26 12:1:54.0", "2016-2-26 12:6:54.0", "2016-2-26 12:11:54.0", "2016-2-26 12:16:56.0", "2016-2-26 12:21:56.0", "2016-2-26 12:26:56.0", "2016-2-26 12:31:56.0", "2016-2-26 12:36:56.0", "2016-2-26 12:41:56.0", "2016-2-26 12:46:56.0", "2016-2-26 12:51:56.0", "2016-2-26 12:56:56.0", "2016-2-26 13:1:56.0", "2016-2-26 13:22:16.0", "2016-2-26 13:27:16.0", "2016-2-26 13:32:16.0", "2016-2-26 13:37:16.0", "2016-2-26 13:42:16.0", "2016-2-26 13:47:16.0", "2016-2-26 13:52:16.0", "2016-2-26 13:57:16.0", "2016-2-26 14:2:16.0", "2016-2-26 14:7:16.0", "2016-2-26 14:12:16.0", "2016-2-26 14:17:16.0", "2016-2-26 14:22:16.0", "2016-2-26 14:27:16.0", "2016-2-26 14:32:16.0", "2016-2-26 14:37:16.0", "2016-2-26 14:42:16.0", "2016-2-26 14:47:16.0", "2016-2-26 14:52:16.0", "2016-2-26 14:57:16.0", "2016-2-26 15:2:16.0", "2016-2-26 15:7:16.0", "2016-2-26 15:12:16.0", "2016-2-26 15:17:16.0", "2016-2-26 15:22:16.0", "2016-2-26 15:27:16.0", "2016-2-26 15:32:16.0", "2016-2-26 15:37:16.0", "2016-2-26 15:42:16.0", "2016-2-26 15:47:16.0", "2016-2-26 15:52:16.0", "2016-2-26 15:57:16.0", "2016-2-26 16:2:16.0", "2016-2-26 16:7:16.0", "2016-2-26 16:12:16.0", "2016-2-26 16:17:16.0", "2016-2-26 16:22:16.0", "2016-2-26 16:27:16.0", "2016-2-26 16:32:16.0", "2016-2-26 16:37:16.0", "2016-2-26 16:42:16.0", "2016-2-26 16:47:16.0", "2016-2-26 16:52:16.0", "2016-2-26 16:57:16.0", "2016-2-26 17:2:16.0", "2016-2-26 17:7:16.0", "2016-2-26 17:12:16.0", "2016-2-26 17:17:16.0", "2016-2-26 17:22:16.0", "2016-2-26 17:27:16.0", "2016-2-26 17:32:16.0", "2016-2-26 17:37:16.0", "2016-2-26 17:42:16.0", "2016-4-27 12:25:26.0", "2016-4-27 12:29:36.0", "2016-4-27 12:30:26.0", "2016-4-27 12:34:36.0", "2016-4-27 12:35:26.0", "2016-4-27 12:39:36.0", "2016-4-27 12:40:26.0", "2016-4-27 12:44:36.0", "2016-4-27 12:45:26.0", "2016-4-27 12:49:36.0", "2016-4-27 12:50:26.0", "2016-4-27 12:54:36.0", "2016-4-27 12:55:26.0", "2016-4-27 12:59:36.0",  "2016-4-27 13:35:26.0", "2016-4-27 13:39:34.0", "2016-4-27 13:40:26.0", "2016-4-27 13:44:36.0", "2016-4-27 13:49:36.0"];

            var XAxisStartDate = "2016-2-26 9:16:54.0";
            var YAxisEndDate = "2016-4-27 13:49:36.0";



            var diffDays = 10;

                gcSeries1 = new Tee.PointXY();
                gcSeries1.data.values.clear;
                gcSeries1.title = "Series1";
                gcSeries1.data.values = SeriesData;  //data value
                gcSeries1.data.x = ConvertDateForXAxis(XAxisValues); // XAxisDateValue;
                gcSeries1.pointer.style = "ellipse";
                ApplyStylesToSeries(gcSeries1, "#4E4839", 7, 7);
                Chart1.addSeries(gcSeries1);

            var eventStartDate = new Date(XAxisStartDate);
            var eventEndDate = new Date(YAxisEndDate);

            var startDate = new Date(Date.UTC(eventStartDate.getUTCFullYear(), eventStartDate.getMonth(), eventStartDate.getDate(), 0, 0, 0));
            var endDate = new Date(Date.UTC(eventEndDate.getUTCFullYear(), eventEndDate.getMonth(), eventEndDate.getDate(), 23, 59, 59));


            var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
            var oneHour = 60 * 60 * 1000;
            var dateTimeInterval = 0;
            var dateFormate = "h:MM TT";
            var setVisibilty = 1;

           
            dateTimeInterval = oneDay * 14;
            dateFormate = "dd mmm";

           // endDate.setHours(endDate.getHours() + setVisibilty);

            Chart1.panel.format.stroke.fill = "silver";
            Chart1.panel.format.stroke.size = 1;
            Chart1.panel.format.gradient.colors[0] = "white";
            Chart1.panel.format.gradient.colors[1] = "white";


            //Axes - Y
            Chart1.axes.left.title.text = "data";
            Chart1.axes.left.labels.roundFirst = false;
            Chart1.axes.left.title.visible = true;
            Chart1.axes.left.title.format.font.setSize(20);
            Chart1.axes.left.increment = yAxisIncrement;
            Chart1.axes.left.labels.decimals = 1;
            Chart1.axes.left.setMinMax(minYAxisValue, maxYAxisValue);
            Chart1.axes.left.ticks.visible = true;
            Chart1.axes.left.labels.angle = 90;
            Chart1.axes.left.labels.format.font.setSize(12);
            //Axes - X
            Chart1.axes.bottom.title.text = "Test1";
            Chart1.axes.bottom.title.format.font.setSize(20);
            Chart1.axes.bottom.increment = dateTimeInterval;
            Chart1.axes.bottom.setMinMax(startDate.getTime(), endDate.getTime());
            Chart1.axes.bottom.labels.dateFormat = "UTC: " + dateFormate;
            // glucoseTrendChartLine.axes.bottom.labels.dateFormat = dateFormate;
            Chart1.axes.bottom.ticks.visible = true;
            Chart1.axes.bottom.automatic = false;
            Chart1.axes.bottom.format.stroke.size = 0;
            Chart1.axes.bottom.labels.angle = 90;
            Chart1.axes.bottom.labels.format.font.setSize(12);

            //Title
            Chart1.title.visible = true;
            Chart1.title.margins.bottom = 20;
            Chart1.title.text = "Test";
            Chart1.title.format.font.fill = "black";

            //Legend
            Chart1.legend.title.visible = false;
            Chart1.legend.title.format.font.setSize(12);
            Chart1.legend.format.font.setSize(12);
            Chart1.legend.format.stroke.fill = "silver";
            Chart1.legend.format.stroke.size = 3;
            Chart1.legend.format.font.shadow.visible = false;
            Chart1.legend.format.shadow.visible = false;
            Chart1.legend.position = "bottom";
            Chart1.legend.symbol.width = 20;
            Chart1.legend.symbol.height = 20;
            Chart1.legend.symbol.padding = 20;

            Chart1.axes.bottom.labels.roundFirst = false


            Chart1.draw();
        }

        function ApplyStylesToSeries(seriesObject, fillColor, width, height) {
            seriesObject.pointer.width = width;
            seriesObject.pointer.height = height;
            seriesObject.pointer.format.stroke.size = 0.01;
            seriesObject.pointer.format.fill = fillColor;
            seriesObject.pointer.format.stroke.visible = true;
            seriesObject.pointer.format.shadow.visible = false;
            seriesObject.format.shadow.visible = false;
            //Legend
            seriesObject.format.fill = fillColor;
        }



        //convert original date to UTC date for X-axis plot
        function ConvertDateForXAxis(originalDate) {
            var convertedDate = [];
            var date = null;
            if (originalDate == null) return;
            for (var i = 0; i < originalDate.length; i++) {
                var eventDate = null;

                eventDate = new Date(originalDate[i]);

                date = new Date(Date.UTC(eventDate.getUTCFullYear(), eventDate.getMonth(), eventDate.getDate(), eventDate.getHours(), eventDate.getMinutes(), eventDate.getSeconds()));
                convertedDate[i] = date;
            }
            return convertedDate;
        }



    </script>
</head>
<body onload="draw()">

    <center>
        <br><canvas id="canvas" width="1000" height="700">
            This browser does not seem to support HTML5 Canvas.
        </canvas>
    </center>

</body>
</html>

Post by **Yeray** » Thu May 19, 2016 1:38 pm

Hello,

I've only changed the includes to be sure we are using exactly the same version:

Code: Select all

    <!--[if lt IE 9]>
    <script src="http://www.steema.com/files/public/teechart/html5/latest/src/excanvas/excanvas_text.js"></script>
    <script src="http://www.steema.com/files/public/teechart/html5/latest/src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <script src="http://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
    <script src="http://www.steema.com/files/public/teechart/html5/latest/src/date.format.js" type="text/javascript"></script>

And I got a correct result in Chrome:

: VB6_2016-05-19_15-37-11.png (46.68 KiB) Viewed 17865 times

Custom label with multiple series - Urgent

Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

Re: Custom label with multiple series - Urgent

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy