LineChart when dataset contains only one point

Suite and Optimus Suite 5
#1

Hi

LineChart rendered very weird if dataset has only one point. For example, using following sample dhtmlx.com/docs/products/dhtmlxC … _init.html, if I reduce dataset to

var dataset = [
	{ id:1, sales:20, year:"02"}
];

I get this chart - i.imgur.com/MPpB7O7.png
Point is far left, label is far right.
Is it possible to center them somehow?
I can move data point a bit right using “offset” property, but I could find any property to use to move label left.

Thanks in advance

#2

Seems that use case when dataset contains only one point is not taken into account. See “/dhtmlXChart/sources/dhtmlxChart/codebase/dhtmlxchart.js:3466”:

......
		for (var i = 0; i < data.length; i++) {

			if (this._settings.offset === true)
				unitPos = x0 + cellWidth / 2 + i * cellWidth;
			else {
				unitPos = (i == data.length - 1) ? point1.x : x0 + i * cellWidth;
				center = !!i;
			}
			unitPos = Math.ceil(unitPos) - 0.5;
			/*scale labels*/
			var top = ((this._settings.origin != "auto") && (this._settings.view == "bar") && parseFloat(this._settings.value(data[i])) < this._settings.origin));
			this._drawXAxisLabel(unitPos, y0, data[i], center, top); // <=== this method draws label, unitPos is x-coordinate of the label
			/*draws a vertical line for the horizontal scale*/

			if ((this._settings.offset || i) && this._settings.xAxis.lines.call(this, data[i]))
				this._drawXAxisLine(ctx, unitPos, point1.y, point0.y, data[i]);
		}
......

Last label just gets rendered at the most possible right position. And in this case last === first. This code works just fine (inside for loop, “unitPos” calculation):

.......
            if(data.length == 1) {
                unitPos = point0.x + (point1.x - point0.x) / 2;
            } else {
                if (this._settings.offset === true)
                    unitPos = x0 + cellWidth / 2 + i * cellWidth;
                else {
                    unitPos = (i == data.length - 1) ? point1.x : x0 + i * cellWidth;
                    center = !!i;
                }
            }
......

Can this patch affect anything else?
Would you include this code into the lib and release it?

Thanks

#3

There is a similar way to display point in the middle of the chart. See “web/assets/dhtmlXChart/sources/dhtmlxChart/codebase/dhtmlxchart.js:1979”, function “pvt_render_line”. x-coordinate of each point is calculated without any taking into account that there might be only on point. Formula is:

x2 = ((!i)?x0:params.cellWidth*i - 0.5 + x0);

Which is equal to x0 for the first point - the most possible left position on the chart, initial point for further line chart. However, there will not be chat itself. If we consider this use case separately:

if(data.length == 1) {
    x2 = point0.x + (point1.x - point0.x) / 2;
} else {
    x2 = ((!i)?x0:params.cellWidth*i - 0.5 + x0);
}

“chart” will look better - point will be in the middle of the canvas.

Applying two above patches, chart looks like this - i.imgur.com/GVGtKPw.png

So, would you include these fixes into the lib and release it? Or we’ll need to support our own version?
Or maybe you can fix this in another way?

Thanks

#4

Hello Ruslan,

Many thanks your for the suggestions. We will consider them and possibly add into the chart library.