Display Chart with timeline & series name column trigger JS error

[avsdev-cw]

Steps to reproduce

1. Create a time series data set with with a column for series label. (columns: timestamp, series, value)
2. Use the Display Chart utility
3. Select "Timeline" as the graph type (x-axis is the timestamp column, y axis is the value column)
4. Check "Series names are in a column"

Expected behaviour

Graph should be drawn similar to the line/spline graph but the spacing of the x axis should scale with the timestamp series.

Actual behaviour

Error: d.getTime is not a function
(formal error report also sent in addition to this ticket)

Server configuration

Operating system: Debian Buster
Web server: Apache 2.4.33
Database: MariaDB
PHP version: 7.0.29-1
phpMyAdmin version: 4.6.6deb5

Client configuration

Browser: Firefox ESD
Operating system: Debian Buster

[williamdes]

Can you try to reproduce with version 4.8.1 ?
https://demo.phpmyadmin.net/QA_4_8/
https://demo.phpmyadmin.net/master-config/

[avsdev-cw]

Reproducible on both 4.8.2 and 5.0.0-dev:

(edited to add TS gaps and 2nd series)

-- phpMyAdmin SQL Dump
-- version 4.8.2-dev
-- https://www.phpmyadmin.net/
--
-- Host: 192.168.30.23
-- Generation Time: Jun 12, 2018 at 07:15 PM
-- Server version: 8.0.3-rc-log
-- PHP Version: 7.2.6-1+0~20180611145758.22+stretch~1.gbpe20e8b

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

--
-- Database: `bt14395`
--

-- --------------------------------------------------------

--
-- Table structure for table `tstable`
--
-- Creation: Jun 12, 2018 at 05:03 PM
--

DROP TABLE IF EXISTS `tstable`;
CREATE TABLE IF NOT EXISTS `tstable` (
  `timestamp` timestamp NOT NULL,
  `series` int(11) NOT NULL,
  `value` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tstable`
--

INSERT INTO `tstable` (`timestamp`, `series`, `value`) VALUES
('2018-06-12 17:07:00', 1, 3283),
('2018-06-12 17:08:00', 1, 3333),
('2018-06-12 17:09:00', 1, 3394),
('2018-06-12 17:10:00', 1, 3573),
('2018-06-12 17:11:00', 1, 3956),
('2018-06-12 17:12:00', 1, 4123),
('2018-06-12 17:13:00', 1, 4523),
('2018-06-12 17:14:00', 1, 4976),
('2018-06-12 17:22:00', 1, 6321),
('2018-06-12 17:23:00', 1, 6411),
('2018-06-12 17:24:00', 1, 6432),
('2018-06-12 17:32:00', 1, 7120),
('2018-06-12 17:33:00', 1, 7140),
('2018-06-12 17:34:00', 1, 7324),
('2018-06-12 17:07:00', 2, 2883),
('2018-06-12 17:08:00', 2, 2933),
('2018-06-12 17:09:00', 2, 3094),
('2018-06-12 17:10:00', 2, 3173),
('2018-06-12 17:11:00', 2, 3356),
('2018-06-12 17:12:00', 2, 3623),
('2018-06-12 17:13:00', 2, 3723),
('2018-06-12 17:14:00', 2, 3876),
('2018-06-12 17:20:00', 2, 3921),
('2018-06-12 17:21:00', 2, 4111),
('2018-06-12 17:22:00', 2, 4132),
('2018-06-12 17:32:00', 2, 5220),
('2018-06-12 17:33:00', 2, 5340),
('2018-06-12 17:34:00', 2, 5724);
COMMIT;


-- phpMyAdmin SQL Dump
-- version 5.0.0-dev
-- https://www.phpmyadmin.net/
--
-- Host: 192.168.30.23
-- Generation Time: Jun 12, 2018 at 07:13 PM
-- Server version: 8.0.3-rc-log
-- PHP Version: 7.2.6-1+0~20180611145758.22+stretch~1.gbpe20e8b
-- --------------------------------------------------------
--
-- Table structure/data same as above
--

[williamdes]

Param	Value
Error Type	TypeError
Error Message	d.getTime is not a function
Exception Type	js
phpMyAdmin version	4.8.6-dev
Incident count	18
Link	Report#57276

This comment is posted automatically by phpMyAdmin's error-reporting-server.

[williamdes]

The issue in code is that the data is not well built

Another issue is trying to hover the labels, but this is due to the incorrect data.

Well built

phpmyadmin/js/tbl_chart.js

Lines 81 to 115 in 3a00dd6

	if (settings.seriesColumn === null) {
	$.each(settings.selectedSeries, function (index, element) {
	dataTable.addColumn(ColumnType.NUMBER, columnNames[element]);
	});
	// set data to the data table
	var columnsToExtract = [settings.mainAxis];
	$.each(settings.selectedSeries, function (index, element) {
	columnsToExtract.push(element);
	});
	var values = [];
	var newRow;
	var row;
	var col;
	for (i = 0; i < data.length; i++) {
	row = data[i];
	newRow = [];
	for (var j = 0; j < columnsToExtract.length; j++) {
	col = columnNames[columnsToExtract[j]];
	if (j === 0) {
	if (settings.type === 'timeline') { // first column is date type
	newRow.push(extractDate(row[col]));
	} else if (settings.type === 'scatter') {
	newRow.push(parseFloat(row[col]));
	} else { // first column is string type
	newRow.push(row[col]);
	}
	} else { // subsequent columns are of type, number
	newRow.push(parseFloat(row[col]));
	}
	}
	values.push(newRow);
	}
	dataTable.setData(values);
	} else {

Build without setting as date

phpmyadmin/js/tbl_chart.js

Lines 115 to 151 in 3a00dd6

	} else {
	var seriesNames = {};
	var seriesNumber = 1;
	var seriesColumnName = columnNames[settings.seriesColumn];
	for (i = 0; i < data.length; i++) {
	if (! seriesNames[data[i][seriesColumnName]]) {
	seriesNames[data[i][seriesColumnName]] = seriesNumber;
	seriesNumber++;
	}
	}
	$.each(seriesNames, function (seriesName, seriesNumber) {
	dataTable.addColumn(ColumnType.NUMBER, seriesName);
	});
	var valueMap = {};
	var xValue;
	var value;
	var mainAxisName = columnNames[settings.mainAxis];
	var valueColumnName = columnNames[settings.valueColumn];
	for (i = 0; i < data.length; i++) {
	xValue = data[i][mainAxisName];
	value = valueMap[xValue];
	if (! value) {
	value = [xValue];
	valueMap[xValue] = value;
	}
	seriesNumber = seriesNames[data[i][seriesColumnName]];
	value[seriesNumber] = parseFloat(data[i][valueColumnName]);
	}
	var values = [];
	$.each(valueMap, function (index, value) {
	values.push(value);
	});
	dataTable.setData(values);
	}

Set as date

phpmyadmin/js/tbl_chart.js

Line 102 in cae463f

newRow.push(extractDate(row[col]));

(Encoded (by myself) array sent to graph)
In the example below the dates where strings and not dates as they should be, and on the good dataset they where JavaScript Date instances

[
    [
        "2018-06-12 19:14:00",
        4976,
        null,
        3876
    ],
    [
        "2018-06-12 19:13:00",
        4523,
        null,
        3723
    ],
    [
        "2018-06-12 19:23:00",
        6411,
        null,
        null
    ],
    [
        "2018-06-12 19:12:00",
        4123,
        null,
        3623
    ],
    [
        "2018-06-12 19:24:00",
        6432,
        null,
        null
    ],
    [
        "2018-06-12 19:11:00",
        3956,
        null,
        3356
    ],
    [
        "2018-06-12 19:32:00",
        7120,
        null,
        null
    ],
    [
        "2018-06-12 19:10:00",
        3573,
        null,
        3173
    ],
    [
        "2018-06-12 19:33:00",
        7140,
        null,
        5340
    ],
    [
        "2018-06-12 19:09:00",
        3394,
        null,
        null
    ],
    [
        "2018-06-12 19:34:00",
        7324,
        null,
        5724
    ],
    [
        "2018-06-12 19:08:00",
        3333,
        null,
        2933
    ],
    [
        "2018-06-12 19:22:00",
        6321,
        null,
        4132
    ],
    [
        "2019-04-25 23:56:30",
        null,
        3283,
        null
    ],
    [
        "2018-06-12 19:21:00",
        null,
        null,
        4111
    ],
    [
        "2018-06-12 19:20:00",
        null,
        null,
        3921
    ]
]

Should be / correct dataset (IMO)

[
    [
        "2018-06-12 19:14:00",
        4976
    ],
    [
        "2018-06-12 19:13:00",
        4523
    ],
    [
        "2018-06-12 19:23:00",
        6411
    ],
    [
        "2018-06-12 19:12:00",
        4123
    ],
    [
        "2018-06-12 19:24:00",
        6432
    ],
    [
        "2018-06-12 19:11:00",
        3956
    ],
    [
        "2018-06-12 19:32:00",
        7120
    ],
    [
        "2018-06-12 19:10:00",
        3573
    ],
    [
        "2018-06-12 19:33:00",
        7140
    ],
    [
        "2018-06-12 19:09:00",
        3394
    ],
    [
        "2018-06-12 19:34:00",
        7324
    ],
    [
        "2018-06-12 19:08:00",
        3333
    ],
    [
        "2018-06-12 19:22:00",
        6321
    ],
    [
        "2019-04-25 23:56:30",
        3283
    ],
    [
        "2018-06-12 19:14:00",
        3876
    ],
    [
        "2018-06-12 19:08:00",
        2933
    ],
    [
        "2018-06-12 19:33:00",
        5340
    ],
    [
        "2018-06-12 19:10:00",
        3173
    ],
    [
        "2018-06-12 19:11:00",
        3356
    ],
    [
        "2018-06-12 19:12:00",
        3623
    ],
    [
        "2018-06-12 19:22:00",
        4132
    ],
    [
        "2018-06-12 19:13:00",
        3723
    ],
    [
        "2018-06-12 19:21:00",
        4111
    ],
    [
        "2018-06-12 19:20:00",
        3921
    ],
    [
        "2018-06-12 19:34:00",
        5724
    ]
]

Happy if this debug info can help someone !

[williamdes]

If someone can find a fix for this issue

@AghaSaad04 or @saurass if you want and have time ;)

[saurass]

Sure, working on it

[AghaSaad04]

yeah sure @williamdes, I will look into this :)