I'm using jqPlot to graph out some weight data... if I dont specify just showing the year on the xAxis, the display is cluttered... but it seems like I can't get the full date to show when any data point is highlighted. Is there any way to get the highlighter to use a date-aware formatter, rather than the simple printf stuff?
<link rel="stylesheet" type="text/css" hrf="jqPlot/jquery.jqplot.min.css" />
<script>
$(document).ready(function(){
var line1=
[['1999.03.17',205],
['2001.06.15',189],
['2001.10.11',179],
['2004.01.09',192.5 ],
['2006.04.12',221.5],
['2007.12.06',216.5],
['2009.01.26',220],
['2010.06.22',215],
['2011.01.03',210],
['2012.04.20',208],
['2012.05.09',207.8],
['2013.05.03',201.2],
['2014.01.23',190.9]
];
var plot2 = $.jqplot('chart2', [line1], {
highlighter: {
show: true,
formatString: "%s %d",
tooltipAxes:'xy'
},
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%y'},
tickInterval:'1 years'
}
},
series:[{lineWidth:4, markerOptions:{show:false}}]
});
});
Here is the solution: JsFiddle
$(document).ready(function () {
function tooltipeditor(str, seriesIndex, pointIndex, plot) {
var data = plot.data[seriesIndex][pointIndex]
return "<div>" + data[0] + " , " + data[1] + "</div>";
}
var line1 =
[
['1999/03/17', 205],
['2001/06/15', 189],
['2001/10/11', 179],
['2004/01/09', 192.5],
['2006/04/12', 221.5],
['2007/12/06', 216.5],
['2009/01/26', 220],
['2010/06/22', 215],
['2011/01/03', 210],
['2012/04/20', 208],
['2012/05/09', 207.8],
['2013/05/03', 201.2],
['2014/01/23', 190.9]
];
var plot2 = $.jqplot('chart1', [line1], {
highlighter: {
show: true,
tooltipContentEditor: tooltipeditor
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%y'
},
//tickInterval: '1 years'
}
},
series: [{
lineWidth: 4,
markerOptions: {
show: true
},
}]
});
});
Related
I used full calendar in my CodeIgniter project to manage events. All other parts of the project are working properly. But the calendar output is look like this :
The dates are collapsed in the output. Relevant JavaScript for calendar as follows :
<Script>
$(document).on('click', '.month_select', function() {
var month = $(this).data('month');
var moment = $('#calendar').fullCalendar('getDate');
var currentMonth = moment.format('YYYY') + '-' + month + '-' + 10;
$('#calendar').fullCalendar('gotoDate', currentMonth);
});
$(function() {
$('#viewed,#new,#issued,#recieved,#request,#return, #requestProofs').on('ifChanged', function(event) {
$('#calendar').fullCalendar('refetchEvents');
});
var date = new Date();
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear();
$('#calendar').fullCalendar({
aspectRatio: 1.7,
firstDay: 1,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay',
},
allDay: true,
buttonText: {
today: 'today',
month: 'month',
week: 'week',
day: 'day'
},
events: {
url: "<?= site_url('document/getImprestDocuments') ?>",
data: function() {
return {
viewed: $('#viewed').is(':checked'),
new: $('#new').is(':checked'),
issued: $('#issued').is(':checked'),
recieved: $('#recieved').is(':checked'),
request: $('#request').is(':checked'),
requestProofs: $('#requestProofs').is(':checked'),
return: $('#return').is(':checked'),
};
},
error: function() {
$('#script-warning').show();
}
},
eventClick: function(event) {
if (event.url) {
window.open(event.url);
event.color = event.default_color;
$('#calendar').fullCalendar('updateEvent', event);
return false;
}
},
eventRender: function(event, element) {
},
loading: function(bool) {
if (bool) {
$(this).block({
message: '<div class="loading-message"><h3 style="margin: 5px;"><img style="width:35px;" src="<?= base_url() ?>public/dist/img/ring-alt.gif" > Processing...</h3></div>',
cenrerY: true,
css: {
border: '3px solid rgb(221, 75, 57)'
}
});
} else {
$(this).unblock();
}
}
});
});
$(document).ready(function() {
var table = $("#request_imprest").DataTable({
"order": [
[1, "desc"]
],
columnDefs: [{
sortable: false,
"class": "index",
targets: 0
}]
})
table.on('order.dt search.dt', function() {
table.column(0, {
search: 'applied',
order: 'applied',
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
});
}).draw();
})
</script>
url: "<?= site_url('document/getImprestDocuments') ?>" is also working fine. What may be going wrong ? Can anyone help ?
I have recently started using jqplot library for rendering graphs in our web app. I have downloaded version 1.0.8r1250. I am working with version 1.7 of jquery. I am trying to draw one bar graph and one line graph in the same canvas. Based on the documentation and the examples in the jqplot distribution, here is how I have configured it.
function drawGraph(data) {
$("#char1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var lockinMarkupData = 'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0;
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]])
}
var recommendations = [1,2,3,4,5,6];
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: false,
showLine: false,
pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
I have the following div on the page -
<div id="chart1" style="height:400px;width:500px; "></div> and I am executing the above function on the click of a button.
What is happening is, I am getting this error - Uncaught illegal access in jquery.jqplot.min.js.
If I just have one series, it is working fine. I have been struggling with error since yesterday afternoon. Can somebody please tell me what I am doing wrong?
I have included following js and css files on my page
jquery-1.7.min.js
jquery.jqplot.min.js
jqplot.barRenderer.min.js
jqplot.categoryAxisRenderer.min.js
jqplot.pointLabels.min.js
jqplot.canvasTextRenderer.min.js
jqplot.canvasAxisTickRenderer.min.js
jqplot.canvasAxisLabelRenderer.min.js
jquery.jqplot.min.css
Thanks for your help.
here is the solution: jsFiddle link
$(document).ready(function(){
function drawGraph(data) {
$("#chart1").empty();
$.jqplot.config.enablePlugins = true;
var lockinsByMarkup = [];
var recommendations = [];
var lockinMarkupData = {'N/A':0, '<=10':16, '>10-20':15, '>20-30':1, '>30-40':0, '>40-50':3, '>50-60':10, '>60-70':0, '>70-80':12, '>80-90':0, '>90-100':0, '>100':0};
for (var prop_name in lockinMarkupData) {
lockinsByMarkup.push([prop_name, lockinMarkupData[prop_name]]);
recommendations.push([prop_name, Math.round(Math.random()*10)]);
}
var plot1 = $.jqplot('chart1', [lockinsByMarkup, recommendations], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
title: 'Current Customer Item Prices (CIP)',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showGridline: false
}
},
seriesDefaults:{
pointLabels: { show:true, hideZeros:true}
},
axes: {
xaxis: {
label:'Markup %',
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontFamily: 'Georgia',
fontSize: '10pt',
angle: -30
}
},
yaxis: {
label: '# of CIP Records',
showTicks: false
}
},
series: [
{
renderer: $.jqplot.BarRenderer
},
{
renderer: $.jqplot.LineRenderer, // this is the default, but specifying just in case
showMarker: true,
showLine: true,
// pointLabels: {labels: ['CFP', 'Min', 'Peer', 'Start', 'Default', 'Upper Limit']}
}
],
grid:{
drawBorder: true,
shadow: false
}
});
}
drawGraph();
});
I am having an issue using a line chart getting the calculated labels in the x-axis to space properly. If I want to have 5 data points with a few missing (e.g. [1,50.1],[2,49.2],[5,20.4],[6,17],[7,23.3]), the x-axis will show 1 then 2 then a space where 3 and 4 should have been then 5, 6, and 7. What I would like is to have the 5th data point beside the 2nd data point (in the position where the 3rd data point would ideally be). Basically I am trying to hide a data point yet keep the x-axis value in the grid.
Any assistance is much appreciated.
Try this:
<script type="text/javascript">
$(document).ready(function () {
var plot2 = $.jqplot('chart2', [[[1,50],[2,49],[5,20],[6,17],[7,23]]], {
title: 'Plot',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "X Axis",
pad: 0,
ticks:[1,2,5,6,7] //you can create this dynamically
},
yaxis: {
label: "Y Axis"
}
}
});
});
UPDATE:
<script type="text/javascript">
$(document).ready(function () {
var producciones = [];
for (var i = 0; i < 2000; i++) { producciones.push(new Number(i),new Number(i)) }
var plot2 = $.jqplot('chart2', [producciones], {
title: 'Plot',
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
axes: {
xaxis: {
label: "X Axis",
pad: 0,
numberTicks: 100
},
yaxis: {
label: "Y Axis"
}
}
});
});
I have the following codes to render a bar chart and a pie chart. Both receives the same set of JSON data from the server as follows:
A: 115.00
B: 55.00
C: 0.00
D: 29.04
For some reasons, the bar chart is able to render it. But nothing appears for the pie chart.
var AjaxDataRenderer = function(url, plot, options) {
var ret;
$.ajax({
async: false, // Needed
url: "getData.php",
dataType:"json",
success: function(data) {
ret = data;
}
});
return ret;
};
var plot = $.jqplot('id-BarChart', [],{
title: "TRIAL",
dataRenderer: AjaxDataRenderer,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true}
},
series:[{color:'#5FAB78',label:"Actual"}],
legend: {
show: true,
placement: "insideGrid",
rendererOptions: {
textColor: "#FFFFFF",
fontSize: "10pt"
}},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
},
yaxis: {
min: 10,
max: 300,
tickOptions: {
formatString: '$%d'
}
}
}
});
var plot = $.jqplot('id-PieChart', [],{
dataRenderer: AjaxDataRenderer,
title: 'Expenditure pattern for this session',
seriesDefaults: {
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
padding: 8,
showDataLabels: true
}
},
});
Anybody can help?
Had done some debugging and found the following works.
This is the PHP codes I have:
$rows = array();
$rows1 = array();
$j = 1;
while($category = mysql_fetch_assoc($allCategories))
{
$current = 0 + $category['ExpenditureCurrent'];
$toDate = 0 + $category['ExpenditureToDate'];
$j += 1;
$rows[] = array($category['Name'], $toDate);
$rows1[] = array($category['Name'], $current);
}
echo json_encode(array($rows,$rows1));
For some reasons, the bar chart works with these:
$current = $category['ExpenditureCurrent'];
$toDate = $category['ExpenditureToDate'];
While the pie chart needs these:
$current = 0 + $category['ExpenditureCurrent'];
$toDate = 0 + $category['ExpenditureToDate'];
I am using Date Axes Renderer When there is only one data the graph is
plotted, with the x axis tick but the y axis value is not shown !
Please help me out ! Below is my code :-
function plotgraph(data)
{
var mydata = [];
var dateticks = [];
$.each(data, function (index, value) {
var date = formatdate(data[index].TextColumnString);
dateticks.push([date]);
mydata.push([date, s]);
});
$.jqplot.config.enablePlugins = true;
plot1 = $.jqplot('newgraph', [mydata], {
title: 'Revenue',
legend: { show: true, location: 'ne' },
grid: {
drawBorder:false,
borderWidth: null,
background: '#ffffff',
gridLineColor: '#e0e0e0',
shadow:false
},
axes:
{
xaxis:
{
label: 'Dates',
numberTicks: dateticks.length,
ticks:dateticks,
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
fontSize: '10px',
fontFamily: 'Arial',
angle:-30
},
},
yaxis: { label: 'Revenue(in $)', autoscale:true,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: { formatString: '$%.2f'} }
},
series:[
{ showLabel: true, lineWidth: 3.5, label:
'Revenue', markerOptions: { style: 'circle'}}],
highlighter : { show : true, sizeAdjust : 7.5},
cursor : { show : false }
});
}
}
//this function is used to format the date from the given to required format.
function formatdate(date) {
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
date = date.replace(',', '');
var fdate = date.split(' ');
var day = fdate[0];
var month = months.indexOf(fdate[1], 0);
month = Number(month) + 1;
var year = fdate[2];
var mydate = year + '-' + month + '-' + day;
return mydate;
}
Thanks in advance !