CGDevTools Forum

I have a horizontal stacked bar chart where I want to put custom labels on the X axis. currently it shows default numbers from 0 to 70000, but these actually represent minutes over a 6 week period. I would like to create labels that represent a date (ex. May 3) and have the tick at location represented by integer for May 3 (ex, 5368). I would put as many dates as I could fit on the axis. In reading the help i think this can be done but I have been failing in trying to specify the correct Delphi statements to make it so. Help . . .

Hi gbh100,

You must use the formatter property, and tranform the value via javascript.
here you have the simple example:

delphi code

Axis:= IWCGJQPlot1.JQPlotOptions.Axes.Add;
Axis.AxisType:= jqpoxyXAxis;
Axis.Options.TickAxisOptions.Formatter.Script:= 'function(fs, lbl){ var d = (1 + (lbl - 1) * 7); return new Date(2018, 0, d).toLocaleDateString(); }';

Best Regards.

Thank you that was helpful.

The component help talks about having a axis.option called 2D that allows you to send the tick index and a label. I don't suppose that is implemented is it? I still find the axis very difficult to control as I don't seem to be able to set the tickinterval for example and have it work.

Hi gbh100,

The component help talks about having a axis.option called 2D that allows you to send the tick index and a label.

It's a array dimension of JQPlotData property.

Alexander Bulei wrote:Hi gbh100,

The component help talks about having a axis.option called 2D that allows you to send the tick index and a label.

It's a array dimension of JQPlotData property.

what is the syntax for it if I wanted 1440 to be "Day1", 2880 to be "Day 2", etc.

Hi gbh100,

what is the syntax for it if I wanted 1440 to be "Day1", 2880 to be "Day 2", etc.

Check the example in main demo...

e.g:

delphi code

IWCGJQPlot1.JQPlotData:= '[[[2,1], [4,2], [6,3], [3,4]],[[5,1], [1,2], [3,3], [4,4]],[[4,1], [7,2], [1,3], [2,4]]]';

Best Regards.

I use Plotdata for the data currently. What I am referring to is the documentation on axisDefaults.ticks:

axesDefaults: { show: false, // whether or not to render the axis. Determined automatically. min: null, // minimum numerical value of the axis. Determined automatically. max: null, // maximum numerical value of the axis. Determined automatically. pad: 1.2, // a factor multiplied by the data range on the axis to give the // axis range so that data points don’t fall on the edges of the axis. ticks: [], // a 1D [val1, val2, ...], or 2D [[val, label], [val, label], ...] // array of ticks to use. Computed automatically. numberTicks: undefined, renderer: $.jqplot.LinearAxisRenderer, // renderer to use to draw the axis, rendererOptions: {}, // options to pa . . .