label of the last bar in jqplot bar chart not displaying - php

I am having a strange issue in jqplot bar chart. THe bar chart label in last bar is displaying sometimes and disappearing other times. I have added a screen shot and my script.!
Here is the script i have used.
plot1 = $.jqplot('chart1', [s1], {
// Only animate if we're not using excanvas (not in IE 7 or IE 8)..
animate: !$.jqplot.use_excanvas,
seriesColors:<?php echo json_encode($barColor ); ?>,
<?php if(isset($_POST['additionalSubmit'])){ ?>
negativeSeriesColors: ["#792A86"],
<?php } else { ?>
negativeSeriesColors: <?php echo json_encode($barColornegative ); ?>,
<?php } ?>
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true,
barWidth: 30,
varyBarColor :true
},
pointLabels: {
show: true,
formatString :"€ %'s",
escapeHTML: false
}
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'zeroline',
y: 0,
lineWidth: 2,
xOffset: 0,
color: '#BBCCDD',
shadow: false
}}
]
},
axes: {
xaxis: {
autoscale:true,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '8pt',
fontWeight: 'normal',
angle:-20,
},
borderColor: "#BBCCDD",
borderWidth:5
},
yaxis: {
autoscale:true,
tickOptions:{ prefix: '€' , formatString: "%'d",} ,
borderColor: "#BBCCDD",
borderWidth:5,
label: 'resultant in EURO',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
legend: {
show: true,
placement: 'outside',
noColumns: 1
},
series: [
{
fill: true,
label: '<?php echo $_POST['scenario']; ?>'
}
],
highlighter: { show: false }
});
Thanks in advance.

The labels will not show when they 'hit' the edges. To avoid this detection, set the edgeTolerance for your pointLabels like this:
pointLabels: {
show: true,
formatString :"€ %'s",
escapeHTML: false,
edgeTolerance: -100
}

Related

How do i get date and time in points highchart?

I plot highcharts on my page.
This works great but i have one little problem that in my points when i hover with my mouse on it, i get no date and time with it.
This is what my json is like.:
[{"metingen":"metingen","Datum":"Datum","data":["5-9-2022",14.6,"5-9-2022",14.8,"6-9-2022",15.948,"6-9-2022",17.112,"6-9-2022",
My chart look then like this.:
You see on the left the baloon, it show the number 0: 14.6.
14.6 is the value, thats good but the 0 is number of that value sutch as another point, that gives
But how can i show the date and time thats belong with that number in the baloon?
My chart code is this.:
$.getJSON("mfrmetingen300RG.json", function(data) {
const processedData9 = [];
for (let a = 0; a < data[0].data.length; a += 2) {
processedData9.push([data[0].data[a], data[0].data[a + 1]]);
}
data[0].data = processedData9;
avg = <?php echo $rowj[0]; ?>;
StDev = <?php echo $rowj[1]; ?>;
Aantalwaarden9 = <?php echo $rowj[2]; ?>;
//Cp=(USL-LSL)/(6xstd.Dev) see.:https://www.easycalculation.com/statistics/learn-cp-cpk-calculator.php
//Cpk = (USL-gemiddelde) / (3 x std.Dev) of (gemiddelde-LSL) / (3 x std.Dev)
cpkl1 = (<?php echo $_cpkh10waarde; ?>-<?php echo $_cpkl10waarde; ?>)/(6*StDev);
Cpk1High = (<?php echo $_cpkh10waarde; ?>-avg)/(3*StDev);
Cpk1Low = (avg-<?php echo $_cpkl10waarde; ?>)/(3*StDev);
chart9 = new Highcharts.Chart('container9',{
chart: {
zoomType: 'x',
type: 'line',
marginRight: 130,
marginBottom: 100,
backgroundColor:'azure'
},
rangeSelector: {
buttons: [{
text: '+',
events: {
click() {
return false
}
}
},
{
text: '-',
events: {
click() {
return false
}
}
}]
},
title: {
useHTML: true,
text: "Gemeten MFR waarde van PP 300R Grey Extrusie over de laatste "+(Aantalwaarden9)+" waarden.",
x: -20 //center
},
credits: {
enabled: false
},
subtitle: {text: 'Gem.='+avg.toFixed(2)+' Stdev='+StDev.toFixed(2)+' Cp='+cpkl1.toFixed(2)+' Cpk_High='+Cpk1High.toFixed(2)+' Cpk_Low='+Cpk1Low.toFixed(2)+'',x: -20},
xAxis: {
uniqueNames: false,
type: 'category',
title: {
text: 'Datum'
}
},
yAxis: {
"min":15,
"max":23,
title: {
text: 'MFR'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
plotLines: [{value: <?php echo $_cpkl10waarde; ?>,color: <?php echo $_color_min_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
{value: <?php echo $_cpkh10waarde; ?>,color: <?php echo $_color_max_line; ?>,dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
{value: <?php echo $_cpkm10waarde; ?>,color: <?php echo $_color_guide_line; ?>,dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn'}},
{value: avg.toFixed(2),color: <?php echo $_color_avg_line; ?>,dashStyle: 'spline',width: 2,label: {text: 'Avg'}},
]
},
tooltip: {
formatter: function() {
return '<b>Meetwaarden</b><br/>'+ this.x +': '+ this.y;
}
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'top', x: -100,y: 0,floating: true,borderWidth: 0},
series: data,
plotOptions: {
line: {
dataLabels: {
enabled: true
}
}
},
});
chart9.legend.allItems[0].update({name:'MFR'});
}, 1000);
});```
Because you have category type xAxis, your category name is contained in point.key variable. So, based on your example, you only need to refer to this.key
tooltip: {
formatter: function() {
return '<b>Meetwaarden</b><br/>'+ this.key +': '+ this.y;
}
},
Simplified Demo:
https://jsfiddle.net/BlackLabel/87bousnL/
API Reference:
https://api.highcharts.com/highcharts/tooltip.headerFormat

Highcharts diffent color # Temperature Line

I have a question about highcharts: How can I display my temperature line in red above 0°C and blue below 0°C ? My code currently looks like this:
Highcharts.chart('temperature', {
title: {
text: ''
},
chart: {
type: 'combo-multi-axes',
alignTicks: false,
zoomType: 'x',
animation: true,
events: {
load: function() {
fetchLatestData(this);
}
}
},
yAxis: 1,
name: 'Temperatur',
color: '#de1312',
type: 'spline',
zIndex: 10,
],
Use color and negativeColor properties:
series: [{
...,
color: 'red',
negativeColor: 'blue'
}]
Live demo: http://jsfiddle.net/BlackLabel/9hnef5x2/
API Reference:
https://api.highcharts.com/highcharts/series.line.negativeColor
https://api.highcharts.com/highcharts/series.line.color

How to show values on pie or bar graph chart in php using chart.js

I want to show values on graphs. i search alot but could not find my solution.
Here is the code below:
<script>
var ctx = document.getElementById("barChart");
ctx.height = 100;
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: <?php echo json_encode($Division); ?>,
datasets: [{
label: 'Target',
data: <?php echo json_encode($TARGET_QTY); ?>,
//backgroundColor: "rgba(255, 159, 64, 0.2)",
backgroundColor: "rgb(231, 123, 126)",
borderColor: "rgb(219, 219, 219)",
borderWidth: 1
},
{
label: 'Actual',
data: <?php echo json_encode($DISPATCH_QTY); ?>,
backgroundColor: "rgb(0, 191, 255)",
borderColor: "rgb(252, 252, 252)",
borderWidth: 1
}
]
},
options: {
responsive: true,
tooltips: {
"enabled": false
},
scales: {
yAxes: [{
gridLines: {
display:false,
},
ticks: {
beginAtZero:true
}
}]
},
title: {
display: true,
// position:"bottom",
text: 'Target vs Actual Dispatch'
},
hover: {
// Overrides the global setting
mode: 'label'
},
animation: {
duration: 1,
onComplete: function () {
var chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset, i)
{
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
var data = dataset.data[index];
ctx.fillText(data, bar._model.x, bar._model.y - 5);
});
});
}
},
/*legend: {
display: true,
// position : "bottom",
labels: {
fontColor: 'rgb(0, 0, 0)'
}
}*/
}
});
</script>
<div class="row">
<div class="col-md-12">
<div class="chart">
<canvas id="barChart" style="position: relative; height: 300px;"></canvas>
</div>
</div>
</div>
I search alot but could not show values in the bar graph. In this code value will be shown on the top of the graph but could not show on the bar. i want to show value on the bars of graph. either its a bar chart or pie chart. i use chart.js library. Please help me to get rid of this situation. Thanks in Advance.

Flot chart - Hide x-axis data value if no data found on line chart

I'm trying to hide the x-axis data label if no data is found. Please refer to the screenshot below. I want to show "0" or empty text instead of the date "01/01/1970".
How can I do that? My current code for flot chart is as below:
$.plot(elem, dataset1,
{
lines: { show: true, fill:true },
points: { show: true },
shadowSize: 0,
yaxis : {
show : true,
axisLabel : '<font style="color:#787878"><i>Total Views</i></font>',
position: 'left',
axisLabelPadding: 10,
tickDecimals: 0,
color: "#E0E0E0"
},
xaxis: {
mode: "time",
timeformat: "%d/%m/%Y",
minTickSize: [1, "day"],
color: "#E0E0E0",
axisLabel: '<font style="color:#787878">Date</font>',
axisLabelPadding: 20,
},
grid: {
hoverable: true,
borderWidth: 0
},
legend: { show: true, container: $('#legend-container'), noColumns: 1 },
tooltip: true,
tooltipOpts: {
content: function(label, xval, yval) {
var d = new Date(xval);
return label + ' (' + d.getDate() + '/' + (d.getMonth()+1) + '/' + d.getFullYear() +') : ' + yval
},
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
colors: [ "#4682B4" ]
}
You can add the following to the axis options to only show the axis if there are data points in your data set:
xaxis: {
show: dataset1.length > 0
...

How to add an extra label on a scatter plot point in Highcharts Javascript library?

I am using the Highcharts JavaScript library to visualize some float values, which i feed into the js code via php. As you can see in the following picture, on each point's mouseover are now displayed the two values that correspond to the axes values and the text "text: undefined".
My question is: Is there a way to display a different text for each point of the scatter plot? I have a text that corresponds to each point, but I haven't found a way to display it.
My JavaScript/php code is:
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'scatter',
zoomType: 'xy'},
title: {
text: 'Average 24hrs Sentiment for <?php echo $channel?> by Gender '
},
subtitle: {
text: 'Source: '
},
xAxis: {
title: {
enabled: true,
text: 'Hours ([0-24h].[0-60mins])'
},
startOnTick: true,
endOnTick: true,
showLastLabel: true
},
yAxis: {
title: {
text: 'Sentiment (N. Bayes) %'
}
},
tooltip: {
formatter: function() {
return ''+
this.x +' hrs, '+ this.y +' sentiment, text: ';
}
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 24,
y: 1,
floating: true,
backgroundColor: '#FFFFFF',
borderWidth: 1
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
}
}
},
series: [{
name: 'Female',
color: 'rgba(223, 83, 83, .5)',
data: [
<?php
for($j=0;$j<$i1;$j++)
{
if($females[$j]['Hour'][0] == "0")
{
echo '['.$females[$j]['Hour'][1].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
}
else
echo '['.$females[$j]['Hour'].'.'.$females[$j]['Min'].','.$females[$j]['Sent'].'"]';
if(($j+1)!=$i1)
{
echo ",";
}
}
?>
]},
{
name: 'Male',
color: 'rgba(119, 152, 191, .5)',
data: [
<?php
for($j=0;$j<$i2;$j++)
{
if($males[$j]['Hour'][0] == "0")
{
echo '['.$males[$j]['Hour'][1].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
}
else
echo '['.$males[$j]['Hour'].'.'.$males[$j]['Min'].','.$males[$j]['Sent'].',"'.$males[$j]['Text'].'"]';
if(($j+1)!=$i2)
{
echo ",";
}
}
?>
]}]
});
});
});
Thank you.
If the text is unique to each point, you can pass more than the x and y as values. In the following example I pass three other values: locked, unlocked, and potential. Then to access them in the tooltip formatter, do so by using the this.point.locked
this.x +' hrs, '+ this.y +' sentiment, text: ';
Try to set the text in this code line,
just in order to check whether my suggestion will solve your problem,
try :
this.x +' hrs, '+ this.y +' sentiment, text: '+this.x;
And then check whether (this.x) value appears insted of "undefined" .

Categories