Related
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
We have been working on one client requirement where most of the graphs are Combination of line and column chart. We need drop down of minimum two level in each graph and sometimes it goes to three or four level. Now of value axis that is left side we displayed number value of column and on opposite right side we need to show percentage (%) of that value in the form of line. The issue is on the right side of value axis value remain same as of left axis instead of 1 to 100% in percentage if left side is A,B,C,D on right it shows again like A%,B%,C%,D% instead of 1to 100% and whenever we dig into bar graph the line doesn't appear on graph just column with percentage. We want to change it dynamically. We are implementing it in PHP in YII2.
We are passing value of percentage like following:
$('#customchart').highcharts({
chart: {
type: 'column',
style: {
fontFamily: 'Inter'
}
},
title: {
text: 'country',
align: 'left',
margin: 20,
x:15,
style: {
fontWeight: '700',
fontSize: '16px',
}
},
xAxis: {
type: 'category',
labels: {
style: {
color: 'red'
}
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
marker: {
fillColor: '#211F1F',
// lineWidth: ,
lineColor: null // inherit from series
},
dataLabels: {
enabled: true,
formatter: function() {
var pcnt = (this.y / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
return Highcharts.numberFormat(pcnt) + '%';
}
}
}
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1],
fontSize: '12px',
fontWeight: '400'
}
},
title: {
text: 'arriving',
style: {
color: Highcharts.getOptions().colors[1],
fontSize: '12px',
fontWeight: '600',
color: '#211F1F'
}
}
}, { // Secondary yAxis
title: {
text: '% arriving',
style: {
color: Highcharts.getOptions().colors[0],
fontSize: '12px',
fontWeight: '600',
color: '#211F1F'
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[1],
fontSize: '12px',
fontWeight: '400'
},
formatter:function() {
// var pcnt = (this.value / this.series.data.map(p => p.y).reduce((a, b) => a + b, 0)) * 100;
return Highcharts.numberFormat(this.value, 0, ',') + '%';
}
},
linkedTo: 0,
opposite: true
}],
series: [{
name: 'No. of Patients',
colorByPoint: false,
color:'#F7A4A4',
data: <?php echo $countryJson?>,
type: 'column',
yAxis: 1
},
{
name: '% of Patients',
colorByPoint: false,
color:'#A82828',
data: <?php echo $countryJson?>,
type: 'spline'
}],
drilldown: {
series: <?=$countrystateArrJson ?>
}
})
Attached is screenshot for same.
First of all, if the left axis is related to columns, the series.yAxis should be 0, and 1 for the spline series.
Secondly, the yAxis.linkedTo option duplicates the scales, which as I understand is not expected. I set min=0 and max= 100 for the right axis to simulate the percentage scale.
When it comes to the line data, you edit them only in the dataLabels.formatter(), which means, they are really the same, but only the labels change. If you want to count your data and show them as they are on the scale it has to be done i.e. in the chart load() event.
I simplified your config to make it more understandable.
Check the following demo: https://jsfiddle.net/BlackLabel/5c4367wg/
API Reference:
https://api.highcharts.com/highcharts/yAxis.linkedTo
https://api.highcharts.com/highcharts/chart.events.load
So I've experienced some problems with one of my PHP pages using ChartJS, when I load my charts (Pie/Bar), with a good amount of data, then the google tab on revisit can not respond / say out of memory or something like that. I've read that it should be possible to make ChartJS be garbage-collected by calling .destroy(), but that removes my chart, so I don't know how that should be done?
Is there a proper way to create a chart, and then do some kind of clean-up after, and still show the chart on the webpage?
This is the function for barChart
**function barChart(barChartVal) {
const color = new chartColor();
new Chart(document.getElementById("chart-area-last-5-runs"), {
type: 'bar',
data: {
labels: [barChartVal[5][0], barChartVal[5][1], barChartVal[5][2], barChartVal[5][3], barChartVal[5][4]],
datasets: [{
data: [barChartVal[0][0], barChartVal[0][1], barChartVal[0][2], barChartVal[0][3], barChartVal[0][4]],
label: 'Passed',
backgroundColor: color.green(),
}, {
data: [barChartVal[1][0], barChartVal[1][1], barChartVal[1][2], barChartVal[1][3], barChartVal[1][4]],
label: 'Failed',
backgroundColor: color.red(),
}, {
data: [barChartVal[2][0], barChartVal[2][1], barChartVal[2][2], barChartVal[2][3], barChartVal[2][4]],
label: 'Error',
backgroundColor: color.yellow(),
}, {
data: [barChartVal[3][0], barChartVal[3][1], barChartVal[3][2], barChartVal[3][3], barChartVal[3][4]],
label: 'Not Run',
backgroundColor: color.blue(),
}, {
data: [barChartVal[4][0], barChartVal[4][1], barChartVal[4][2], barChartVal[4][3], barChartVal[4][4]],
label: 'Not Applicable',
backgroundColor: color.black(),
}]
},
options: {
scales: {
xAxes: [{
stacked: true,
ticks: {
display: false //this will remove only the label
}
}],
yAxes: [{ stacked: true }]
},
tooltips: {
/* tooltip text made smaller to longer labels fit */
mode: 'index',
intersect: false,
titleFontSize: 14,
bodyFontSize: 13,
bodySpacing: 0,
titleSpacing: 0,
xPadding: 2,
yPadding: 2,
cornerRadius: 2,
titleMarginBottom: 2
},
hover: {
mode: 'index',
intersect: false
},
animation: false, //No animations
parsing: false,
normalized: true
}
});
}**
Yes you can do something like that, you can transform the chart to an image and display that, then you can delete your chart which will free up the memory. Downside of this will be that its not interactable anymore:
const options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
backgroundColor: 'pink'
}
]
},
options: {
animation: false
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chartContainer = document.getElementById('chartJSContainer');
const chartImage = document.getElementById('chartImage');
const chart = new Chart(ctx, options);
const base64Chart = chart.toBase64Image();
// Set image source to chart image
chartImage.src = base64Chart;
// Destroy chart and remove canvas
chart.destroy();
chartContainer.remove();
<body>
<img id="chartImage">
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>
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
}
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" .