Skip to content

Adding functions to JQPlot Graph Y Axis for plotting values (Solution)

November 2, 2012

T0 those that were interested in finding out how I resolved the problem from the previous post I had used a JQPlot Canvas Axis Tick Render for plotting values on the y Axis rather than DateAxis Renderer with format String %T which didn’t work as it converts it only to a maximum of 2 digits each of hours, minutes, and seconds so its calcuations behind that function is rather unclear, as you pass in long integer values and it just computes it to hours, minuts and seconds but to what reference?

Firstly, I wanted to test what CanvasAxisTickRenderer actually did, initially thinking you can add strings to the values, but this was not so, as the graph didn’t plot with the test I wrote.

See below for my test:-

plot = $.jqplot(‘totalTimeSessionPerDayChart’, ret, {
axes: {
xaxis: {
label: ‘Date’,
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: ‘%Y/%#m/%#d’ }
},
yaxis: {
label: ‘Total Session Time’,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: { formatter: function(format, value) {return “this is ” + value; },
min: 0
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: true,
zoom: true,
tooltipLocation: ‘sw’
}
});

Secondly to resolve this, you simply removed the formatter option, and pass it as a value inside. This works.

plot = $.jqplot(‘totalTimeSessionPerDayChart’, ret, {
axes: {
xaxis: {
label: ‘Date’,
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: ‘%Y/%#m/%#d’ }
},
yaxis: {
label: ‘Total Session Time (hrs)’,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
min: 0
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: true,
zoom: true,
tooltipLocation: ‘sw’
}
});

Finally in the code behind you compute the seconds with value / 3600 to convert to hours, and JQPlot creates the graph nicely with the number of hours on the Y Axis!

 

Advertisements

From → Uncategorized

2 Comments
  1. Lokesh permalink

    I could not able to understand how you did this, I also want to implement the same: I want hours:minutes:seconds at y-axis. Please help me.

  2. Hi there, many thanks for the reply. I did the date time format for the y-axis which I can set your format of your data using the tick options specifier.

    In my code it is

    tickOptions: { formatString: ‘%Y/%#m/%#d’ }

    Have you tried?

    tickOptions : { formatString: ‘%HH:%mm:%ss’ }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: