How can I handle NaN values for legendValueText for amcharts? In the code below, I am setting legendValueText to valueY - but the value of valueY is NaN for some data - so I want to make it zero.
const series = chart.series.push(
am5xy.LineSeries.new(this.root, {
name: commodity,
xAxis: this.xAxis,
yAxis: this.yAxis,
valueYField: commodity,
stacked: true,
categoryXField: "timeUnit",
stroke: am5.color(this.getTrendColor(commodity)),
valueYShow: "valueYTotalPercent",
legendValueText: "{valueY}",
tooltip: am5.Tooltip.new(this.root, {
pointerOrientation: "horizontal",
labelText: "[bold]{name}[/]\n{categoryX}: {valueYTotalPercent.formatNumber('#.0')}% ({valueY})"
})
})
);
Related
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>
I am trying to create a map with a range of values that includes negative to positive.
The negative numbers in my data file change my map to all black.
What can I do?
Thanks
$(function(){
$('#world-map').vectorMap({
map: 'world_mill_en',
backgroundColor: "#FFFFFF",
series: {
regions: [{
values: mapData,
min: jvm.min(mapData),
max: jvm.max(mapData),
scale: ['#C8EEFF', '#0071A4'],
normalizeFunction: 'polynomial'
}]
},
onRegionLabelShow: function (event, label, code) {
label.html("<div class='tooltip'><div class='ttText'><div class='ttName'>" + label.html() + "</div><div class='ttState'>" + (mapData[code]) + "%</div></div></div>")
},
regionStyle: {
initial: {
fill: '#ccc'
},
hover: {
fill: '#000'
}
}
});
});
Change your normalize function to linear:
normalizeFunction: 'linear'
I am using jqplot to create a graphic.
I have an issue about the nonexisting values.
I create a graphic with 5 lines as shown http://www.popularjava.net/wp-content/uploads/statisticGraphic.png
As you see from the picture, there is only one value for some lines such as orange line.
However, I would like to show such nonexisting values with y=0.
I mean, I want to put y=0 for all dates if there is no point for any date.
Here is my code.
var minGraphicXValue = response.minGraphicXValue;
var maxGraphicXValue = response.maxGraphicXValue;
var dataSeriesList = response.dataSeriesList;
var plot1 = $.jqplot('countGraphicGrid', response.countArray, {
title: 'Count/Time Graphic - ' + selectedItemType + ":" + itemValue + " - " + StatisticGraphic.selectedGraphicPeriod,
axes: {
xaxis: {
label: "Time",
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions: {
fontFamily: 'Helvetica',
fontSize: '14pt'
},
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: StatisticGraphic.tickFormatPattern,
angle: -30
},
tickInterval: StatisticGraphic.tickIntervalTime,
min: minGraphicXValue,
max: maxGraphicXValue,
drawMajorGridlines: false
},
yaxis: {
label: "Count",
tickOptions: {
formatString: '%d'
},
min: 0,
max: 100,
autoscale: true
}
},
legend: {
show: true,
placement: 'outside'
},
seriesDefaults: {
rendererOptions: {
smooth: true,
animation: {
show: true
}
},
showMarker: true
},
series: dataSeriesList,
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipOffset: 9
},
grid: {
background: 'rgba(57,57,57,0.0)',
drawBorder: false,
shadow: false,
gridLineColor: '#666666',
gridLineWidth: 1
}
});
I think the best way to do it is to format your data before your render them on your plot.
I mean add values for your nonexisting ones. You can use your (min|max)GraphicXValue and set them to 0 if non existing.
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' }
],
});
I am using jqplot charting library to draw the bar chart in my application.
I have used following code to draw the horizontal bar chart.
var plot = $.jqplot('chart', [dataSlices], {
seriesDefaults: {
shadow: false,
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -55 },
rendererOptions: {
barDirection: 'horizontal',
barMargin: 5,
highlightMouseOver: false,
fillToZero: true
}
},
axesDefaults: {
},
axes: {
grid: {
drawBorder: false
},
xaxis: {
pad: 0,
tickOptions: {
show: true,
mark: 'cross',
thousandsSeparator: ',',
formatString: "%d"
},
numberTicks: null,
min: null,
max: null,
showTickMarks: true
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: yAxisLabels,
tickOptions: {
showMark: false,
showGridline: false
}
}
},
grid: {
gridLineColor: '#ffffff', /**/
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 0,
shadow: false
},
series: [{ color: '#f39f02' }]
});
$.jqplot.thousandsSeparator = ',';
//$.jqplot.formatString = "%'d";
gridCanvas = $($('.jqplot-grid-canvas')[0])
seriesCanvas = $($('.jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
plot.replot({ resetAxes: true });
I am getting the chart without grid lines.
Is there any idea, how to do this?
Call the following lines after replot, you will get the expected result
gridCanvas = $($(item + ' .jqplot-grid-canvas')[0])
seriesCanvas = $($(item + ' .jqplot-series-canvas')[0])
gridCanvas.detach();
seriesCanvas.after(gridCanvas);
I tried its working fine for me,.
GridLineColor set to white (#FFFFFF) explains why you aren't wiewing vertical lines.
BorderWidth set to 0 explains why you aren't viewing borders of your plot (drawn with a size of 0px)
If you doesn't need particular color and/or size of your grid (vertical lines and border) remove the grid part of your code.
If you need particular color and/or size choose carefully your values (#FFFFFF if your background if already white - or a borderWidth of 0px) :
grid: {
gridLineColor: '#FF0000',
borderColor: '#509790',
background: 'rgba(0,0,0,0)',
shadowWidth: 0,
borderWidth: 2,
shadow: false
},
Please see working example here (I have delete yAxisLabels and add fictional data in order to draw a plot)