In chart I want to get integer values on Y-axis and X-axis in place of decimal value (1 in place of 1.0).
so please give me solution
I have used this...
"axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
ticks: ticks,
tickOptions:
{ formatString: '%d'
}
}
}"
Try this formatString: "%.0f". This will display whole numbers.
Related
I am using jqplot 1.0.8 and experience problems with the CategoryAxisRenderer. The y-axis displays numeric values and the x-axis displays either numeric values or string values. That is why I chose the CategoryAxisRenderer. Basically, everything is rendered correctly except for the highlighter. If I hover over a point, I do not get the value for the x-axis, but instead, I get only the index of the value.
Initialization
PLOT = $.jqplot(that.getId() + '-CONTENT', [array], {
width: $('#' + elemId).width() - 30,
height: 500,
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
angle: -90,
fontSize: '8pt'
}
},
yaxis:{
min:1
}
},
highlighter: {
show: true,
tooltipLocation: 'ne',
sizeAdjust: 7.5,
useAxesFormatters: false,
formatString: '%s, %d'
},
cursor: {
show: false
}
});
Output
Expected results
1) 1978, 1
2) University of Ljubljana, 37
I got the exactly same problem and my own solution is that customize the tooltip using tooltipContentEditor.
highlighter: {
tooltipContentEditor: function (str, seriesIndex, pointIndex, plot) {
var content = plot.axes.xaxis.ticks[pointIndex] + ", " + str.split(',')[1];
return content;
}
},
If you want to display the categorized x-axis values, you have to follow this workaround: https://groups.google.com/d/msg/jqplot-users/ZeXgxATxMyI/Fs3DnBAecu0J
I need to generate a horizontal bar chart like given code but with Y-axis as some string not numbers.
What are the changes I need to do to this code for my work. It is working fine with numbers from 1-4 but once I put some string in place of numbers for Y-Axis, graph is not getting plotted.
My Code:
plot4 = $.jqplot('chartdiv', [[[2,1], [6,2], [7,3], [10,4]], [[7,1], [5,2],[3,3],[2,4]]], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
I need to plot plot4:
$.jqplot('chartdiv', [[[2,'a'], [6,'b'], [7,'c'], [10,'d']], [[7,'a'],
[5,'b'],[3,'c'],[2,'d']]], {
What you want to use for this are the so called "ticks".
You want the data in the plot to stay the same, however you want to edit the yaxis options:
var ticks = ['axis1', 'axis2', 'axis3']; //String array for each axis
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
Here a list of the full option list: http://www.jqplot.com/docs/files/jqPlotOptions-txt.html
Hope this was usefull :)
I'm trying to generate a bar chart with jqplot. All of my values are floating numbers as below:
var s1 = [17.1, 18.2];
var s2 = [50.2, 53];
var s3 = [93.9, 93];
var s4 = [34.1, 34];
But it's rounding them to integers.
Here is the working example: http://jsfiddle.net/JkBKs/
How can I fix this?
try this,it works
axes:
{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
min: 0 ,
tickOptions: {
formatString: '%.1f'
}
}
},
please see the ‘formatString’ content
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15, formatString: '%.1f' },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
Hi I'm using jqplot and is there a way to shorten the tick labels on numeric axis. Suppose there is a y series like this [100,250,125000000,14000000,300,..]. here according to the biggest values axis is scaled and rendered with large tick values. I want to simplify this ticks to millions or billions rendered with mill or bill with the axis. Any ideas?
Thanks in advance.
I use this on my initialization, pay attention at the "formatString" option, ".2F" means that the number (a float) will be rounded after the 2nd decimal (####.##), it's just a matter of finding the right format string you need.
Plot = $j.jqplot('divPerformancePlot',[Data],{
title: Title,
axes: {
xaxis: {
renderer: $j.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%b %#d, %T'
},
numberTicks: 4
},
yaxis: {
tickOptions: {
formatString: '%.2f '
}
}
},
highlighter: {
sizeAdjust: 10,
show: true,
tooltipLocation: 'n',
useAxesFormatters: true
},
cursor: {
show: true,
zoom: true
}
});
Just as the title says. Have a look at the screen-shot below the see what I mean. Version is 0.9.7r635. Any ideas?
Screenshot
There is a years worth of data, that is, a plot for every single day. Here is a sample:
[[["01-01-2012", 0], ["01-02-2012", 0], ["01-03-2012", 0],...]]
And here is the javascript:
$.jqplot('jqplot', chartData, {
seriesDefaults: {
color: '#09c',
showMarker: false,
rendererOptions: {
smooth: true
}
},
axes: {
xaxis: {
pad: 0,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -90
},
tickInterval: ( 'year' == duration ) ? '1 month' : '1 day'
},
yaxis: {
min: 0,
tickOptions: {
formatString: '%d',
}
}
}
});
In this instance, the tickInterval is set to '1 month'.
Try without this $.jqplot.CanvasAxisTickRenderer. When this is there the date values are treated as labels. So the dateaxis renderer cannot render the dates well. I had this same problem.
For me updating jqplot (as this question is quite old) solves a lot of issues, in order to get tickinterval working the accepted answer here helped me:
jqPlot DateAxis tickInterval not working