I am using Date Axes Renderer, When there is only one point the graph canvas is plotted, with the x axis tick but the y axis value is not shown - jqgrid

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 !

Related

Amcharts 5 Separate Label into points with the same date

I use AmCharts 5 and sometimes the data can come with a different value but with the same date
Result example:
[
{"result":"AAA","date":"2022-06-09T23:00:00","value":155},
{"result":"BBB","date":"2022-06-10T07:00:00","value":25},
{"result":"CCC","date":"2022-06-11T07:00:00","value":85},
{"result":"DDD","date":"2022-06-12T07:00:00","value":65},
{"result":"EEE","date":"2022-06-12T08:00:00","value":198},
]
But when there is more than one record on the same date, it shows the points, but there is an equal Label for all points.
My code is:
https://jsfiddle.net/sNniffer/9xk6q3eu/17/
I need each point to have its Label, even if they are on the same date
In your example, date strings are all unique!
The easiest solution here is to use hour as timeUnit in the settings of your DateAxis.
am5.ready(function() {
var root = am5.Root.new("chartdiv");
var chart = root.container.children.push(am5xy.XYChart.new(root, {}));
var xAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
baseInterval: {
timeUnit: "hour", // Put "hour" instead of "day"
count: 1
},
renderer: am5xy.AxisRendererX.new(root, {}),
tooltip: am5.Tooltip.new(root, {})
}));
var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {})
}));
var cursor = chart.set("cursor", am5xy.XYCursor.new(root, {
xAxis: xAxis
}));
cursor.lineY.set("visible", false);
var series = chart.series.push(am5xy.SmoothedXLineSeries.new(root, {
name: "Series",
xAxis: xAxis,
yAxis: yAxis,
categoryXField: "result",
valueXField: "date",
valueYField: "value",
tooltip: am5.Tooltip.new(root, {
labelText: "[bold]Result:[/] {categoryX}\n[bold]Date:[/] {valueX.formatDate()}\n[bold]Value:[/] {valueY}"
})
}));
series.fills.template.setAll({
visible: true,
fillOpacity: 0.2
});
series.bullets.push(function() {
return am5.Bullet.new(root, {
sprite: am5.Circle.new(root, {
radius: 8,
stroke: root.interfaceColors.get("background"),
strokeWidth: 2,
interactive: false,
fill: series.get("fill")
})
});
});
var data = [
{result: "AAA", date: new Date("2022-06-09T23:00:00").getTime(), value: 155},
{result: "BBB", date: new Date("2022-06-10T07:00:00").getTime(), value: 25},
{result: "CCC", date: new Date("2022-06-11T07:00:00").getTime(), value: 85},
{result: "DDD", date: new Date("2022-06-12T07:00:00").getTime(), value: 65},
{result: "EEE", date: new Date("2022-06-12T08:00:00").getTime(), value: 198}
];
series.data.setAll(data);
});
#chartdiv {
width: 100%;
height: 350px;
}
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<div id="chartdiv"></div>

Plot two lines on same month with different dates with Base-unit :month

I am developing a chart on Kendo-UI, where we need to plot a vertical line w.r.t dates available on the x-axis. The challenge, that I am facing is my x-axis contains BaseUnit: months. when I am plotting bands w.r.t two different dates in the same month, the system generates vertical line but captures a complete month section rather than plotting two different lines in the same month.
Sample Code:
var DateRange = [];
var PlotData = [];
var AllData = [];
function BindDates() {
for (var startmonth = 01; startmonth <= 12; startmonth++) {
for (var startday = 01; startday <= 30; startday++) {
DateRange.push(new Date("2019/" + startmonth + "/" + startday));
AllData.push(Math.floor((Math.random() * startday) * new Date().getMilliseconds()));
}
for (var Initial = 1; Initial <= 3; Initial++) {
var data = null;
if (Initial == 1) {
data = { from: new Date("2019/02/03"), to: new Date("2019/02/03"), color: "red", width: 0.1 };
}
else if (Initial == 2) {
data = { from: new Date("2019/05/03"), to: new Date("2019/05/03"), color: "green", width: 0.1 };
}
else if (Initial == 3) {
data = { from: new Date("2019/06/03"), to: new Date("2019/06/03"), color: "black", width: 0.1 };
}
PlotData.push(data);
}
}
createChart(DateRange, AllData, PlotData);
}
function createChart(datesss, alldata, PlotData) {
$("#chart").kendoChart({
title: {
text: "Chart Title"
},
legend: {
position: "bottom"
},
seriesDefaults: {
type: "area",
area: {
line: {
style: "smooth"
}
}
},
series: [
{
name: "Late",
color: "orange",
data: alldata
}, {
type: "line",
dashType: "dashDot",
name: "Est DT",
color: "grey",
data: alldata
},
{
name: "On time",
color: "blue",
data: alldata
}],
valueAxis: {
labels: {
format: "{0}"
},
line: {
visible: false
},
axisCrossingValue: -10
},
categoryAxis: {
type: "date",
categories: datesss,
baseUnit: "months",
labels: {
dateFormats: {
months: "MMM-yy"
}
},
majorGridLines: {
visible: false
},
labels: {
rotation: "auto",
},
plotBands: PlotData
},
tooltip: {
visible: true,
format: "{0}%",
template: "#= series.name #: #= value #"
}
});
}
BindDates();
$(document).ready(function () {
BindDates();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>
<div id='chart'></div>

jqplot: two y axis (decimal & percentage) for line chart

Is it possible for jqplot to have two y axis for one series in line chart: one for decimal values another for percentages?
Here is my code. There are two lines and their values are in percentages. I need to show two y-axis.
var irr1 = [['2008-09-30', -100], ['2008-10-30', -99.81], ['2008-11-30', -95.73],
['2008-12-30', -80.28], ['2009-01-30', -56.67], ['2009-02-28', -41.54],
['2009-03-30', -30.33], ['2009-04-30', -23.31], ['2009-05-30', -19.93],
['2009-06-30', -8.57], ['2009-07-30', 0.14], ['2009-08-30', 11.24], ['2009-09-30', 20.35]];
var irr2 = [['2008-09-30', -100], ['2008-10-30', -99.10], ['2008-11-30', -86.44], ['2008-12-30', -60.00], ['2009-01-30', -34.43],
['2009-02-28', -20.80], ['2009-03-30', -12.54], ['2009-04-30', -7.88], ['2009-05-30', -5.52],
['2009-06-30', -0.96], ['2009-07-30', 2.09], ['2009-08-30', 5.47], ['2009-09-30', 7.92]];
var data = [irr1, irr2];
var plot1 = $.jqplot(elem.attr('id'), data, {
animate: true,
grid: {
backgroundColor: "#FFFFFF",
gridLineColor: '#000000',
drawBorder: false,
shadow: false,
gridLineWidth: 0.5
},
//title: 'Default Date Axis',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show: true,
location: 'n',
placement: 'outsideGrid',
//shrinkGrid: true,
rendererOptions: {
numberRows: 1
}
},
//legend: {
// renderer: $.jqplot.EnhancedLegendRenderer,
// show: true,
// rendererOptions: {
// numberRows: 1
// }
//},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%Y-%m-%d' },
min: '2008-09-01',
tickInterval: '1 month'
}
},
series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
series: [
{ label: 'IRR' },
{ label: 'MIRR' }
],
});

jqPlot: show full date and value on highlight, just year on axis?

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
},
}]
});
});

JQPlot bar chart OK but pie chart not OK -- using same input data

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'];

Resources