I want to update graph on runtime. I have 2 custom variable arrays in my code (data_action and data_alt) which I am trying to update. But, it's not working. All predefined variables, arrays are updated without any problem.
In example below, on clicking "Update Graph" button, graph data and x-axis labels are updated. But, tooltip on each data point is not updated. Please advise.
Thanks, Sandeep
<!doctype html>
<html lang="en">
<head>
<title>Document</title>
<style>
#chart {
max-width: 950px;
border:1px solid #367ee9;
}
#chart .chart-tooltip {
padding:10px;
font-family:tahoma,Verdana,Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
}
</style>
</head>
<body>
<div id="imgDiv" style="display:none;"><img id="imgElem"></img></div>
<div id="chart"></div>
<br />
<center><input type="button" value="Update Graph" onclick="fnUpdGraph()" /></center>
<script src='https://cdn.jsdelivr.net/npm/apexcharts'></script>
<script>
var options = {
series: [{
name: 'Denied Charges ($)',
data: [33111, 27510, 27377, 14947, 4312, 7279, 70988, 2903, 29575, 65, 9861, 3416],
data_action: ["dot1_action", "dot2_action", "dot3_action", "dot4_action", "dot5_action", "dot6_action", "dot7_action", "dot8_action", "dot9_action", "dot10_action", "dot11_action", "dot12_action"],
data_alt: ["dot1_alt", "dot2_alt", "dot3_alt", "dot4_alt", "dot5_alt", "dot6_alt", "dot7_alt", "dot8_alt", "dot9_alt", "dot10_alt", "dot11_alt", "dot12_alt"]
}],
colors:['#367ee9'],
chart: {
height: 450,
type: 'line',
events: {
dataPointSelection: function(event, chartContext, config) {
bar_number = config.dataPointIndex;
alert(chartContext.w.config.series[0].data_action[bar_number])
},
dataPointMouseEnter: function(event, chartContext, config) {
event.target.style.cursor = 'pointer';
}
},
animations:{
enabled: true,
}
},
dataLabels: {
enabled: false,
formatter: function (val) {
return "$" + val.toLocaleString();
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
stroke: {
width:2,
curve: 'smooth',
},
markers:{
size:5,
},
xaxis: {
categories: ["Jul 19", "Aug 19", "Sep 19", "Oct 19", "Nov 19", "Dec 19", "Jan 20", "Feb 20", "Mar 20", "Apr 20", "May 20", "Jun 20"],
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#367ee9',
colorTo: '#367ee9',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: true,
formatter: function (val) {
return "$" + val.toLocaleString();
}
},
title: {
text: 'Denied Charges ($)',
style: {
color: '#000',
fontSize: '16px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-title',
},
}
},
tooltip: {
enabled: true,
intersect:true,
shared:false,
custom: function({series, seriesIndex, dataPointIndex, w}) {
return '<div class="chart-tooltip">' + w.config.series[0].data_alt[dataPointIndex] + '</div>'
}
},
title: {
text: 'Total Benefits Exceeded ($231,345) (Claim Date)',
floating: true,
offsetY: 430,
align: 'center',
style: {
color: '#000'
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
function fnUpdGraph(){
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
try{
chart.updateOptions({
series: [{
data: [23111, 7410, 27977, 74447, 3412, 4979, 4944, 9403, 4575, 11645, 861, 74416],
data_alt: ["1dot1_alt", "1dot2_alt", "1dot3_alt", "1dot4_alt", "1dot5_alt", "1dot6_alt", "1dot7_alt", "1dot8_alt", "1dot9_alt", "1dot10_alt", "1dot11_alt", "1dot12_alt"]
}],
xaxis:{
categories: ["Jul 20", "Aug 20", "Sep 20", "Oct 20", "Nov 20", "Dec 20", "Jan 21", "Feb 21", "Mar 21", "Apr 21", "May 21", "Jun 21"]
}
})
}
catch(e){
alert(e)
}
}
</script>
</body>
</html>
Initially, I created "data_action" and "data_alt" as separate variables in "series". Since, these are not apex library variables, "updateOptions" did not update them. So, I had to add them inside "data".
Please see the solution below.
function fnPrint(){
try{
var oIframe = document.getElementById('printContent');
var gr = document.getElementById('chart').innerHTML;
gr = gr.substring(0,gr.indexOf('<div class="apexcharts-legend"'));
var oDoc = (oIframe.contentWindow || oIframe.contentDocument);
if (oDoc.document) oDoc = oDoc.document;
oDoc.write("<html><head><title>Line Graph</title>");
oDoc.write("</head><body onload='this.focus(); this.print();'>");
oDoc.write("<center><br /><br />" + gr + "</center></body></html>");
oDoc.close();
}
catch(e){
self.print();
}
}
var options = {
series: [{
name: 'Denied Charges ($)',
data: [
{
x:"Jul 19",
y:33111,
data_action:"dot1_action",
data_alt:"dot1_alt"
},
{
x:"Aug 19",
y:27510,
data_action:"dot2_action",
data_alt:"dot2_alt"
},
{
x:"Sep 19",
y:27377,
data_action:"dot3_action",
data_alt:"dot3_alt"
},
{
x:"Oct 19",
y:14947,
data_action:"dot4_action",
data_alt:"dot4_alt"
},
{
x:"Nov 19",
y:4312,
data_action:"dot5_action",
data_alt:"dot5_alt"
},
{
x:"Dec 19",
y:7279,
data_action:"dot6_action",
data_alt:"dot6_alt"
},
{
x:"Jan 20",
y:70988,
data_action:"dot7_action",
data_alt:"dot7_alt"
},
{
x:"Feb 20",
y:2903,
data_action:"dot8_action",
data_alt:"dot8_alt"
},
{
x:"Mar 20",
y:29575,
data_action:"dot9_action",
data_alt:"dot9_alt"
},
{
x:"Apr 20",
y:65,
data_action:"dot10_action",
data_alt:"dot10_alt"
},
{
x:"May 20",
y:9861,
data_action:"dot11_action",
data_alt:"dot11_alt"
},
{
x:"Jun 20",
y:3416,
data_action:"dot12_action",
data_alt:"dot12_alt"
}
],
}],
colors:['#367ee9'],
chart: {
height: 450,
type: 'line',
events: {
dataPointSelection: function(event, chartContext, config) {
bar_number = config.dataPointIndex;
alert(chartContext.w.config.series[0].data[bar_number].data_action)
},
dataPointMouseEnter: function(event, chartContext, config) {
event.target.style.cursor = 'pointer';
},
},
animations:{
enabled: true,
}
},
dataLabels: {
enabled: false,
formatter: function (val) {
return "$" + val.toLocaleString();
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
stroke: {
width:2,
curve: 'smooth',
},
markers:{
size:5,
},
xaxis: {
type:'category',
position: 'top',
axisBorder: {
show: false
},
axisTicks: {
show: false
},
crosshairs: {
fill: {
type: 'gradient',
gradient: {
colorFrom: '#367ee9',
colorTo: '#367ee9',
stops: [0, 100],
opacityFrom: 0.4,
opacityTo: 0.5,
}
}
},
tooltip: {
enabled: true
},
},
yaxis: {
axisBorder: {
show: false
},
axisTicks: {
show: false,
},
labels: {
show: true,
formatter: function (val) {
return "$" + val.toLocaleString();
}
},
title: {
text: 'Denied Charges ($)',
style: {
color: '#000',
fontSize: '16px',
fontFamily: 'Helvetica, Arial, sans-serif',
fontWeight: 600,
cssClass: 'apexcharts-yaxis-title',
},
}
},
tooltip: {
enabled: true,
intersect:true,
shared:false,
custom: function({series, seriesIndex, dataPointIndex, w}) {
return '<div class="chart-tooltip">' + w.config.series[0].data[dataPointIndex].data_alt + '</div>'
}
},
title: {
text: 'Total Benefits Exceeded ($231,345) (Claim Date)',
floating: true,
offsetY: 430,
align: 'center',
style: {
color: '#000',
}
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
function fnUpdGraph(){
try{
chart.updateOptions({
series: [{
data: [
{
x:"Jul 20",
y:23111,
data_action:"dot1_action (new)",
data_alt:"dot1_alt (new)"
},
{
x:"Aug 20",
y:7410,
data_action:"dot2_action (new)",
data_alt:"dot2_alt (new)"
},
{
x:"Sep 20",
y:27977,
data_action:"dot3_action (new)",
data_alt:"dot3_alt (new)"
},
{
x:"Oct 20",
y:74447,
data_action:"dot4_action (new)",
data_alt:"dot4_alt (new)"
},
{
x:"Nov 20",
y:3412,
data_action:"dot5_action (new)",
data_alt:"dot5_alt (new)"
},
{
x:"Dec 20",
y:4979,
data_action:"dot6_action (new)",
data_alt:"dot6_alt (new)"
},
{
x:"Jan 21",
y:4944,
data_action:"dot7_action (new)",
data_alt:"dot7_alt (new)"
},
{
x:"Feb 21",
y:9403,
data_action:"dot8_action (new)",
data_alt:"dot8_alt (new)"
},
{
x:"Mar 21",
y:4575,
data_action:"dot9_action (new)",
data_alt:"dot9_alt (new)"
},
{
x:"Apr 21",
y:11645,
data_action:"dot10_action (new)",
data_alt:"dot10_alt (new)"
},
{
x:"May 21",
y:861,
data_action:"dot11_action (new)",
data_alt:"dot11_alt (new)"
},
{
x:"Jun 21",
y:74416,
data_action:"dot12_action (new)",
data_alt:"dot12_alt (new)"
}
]
}],
});
}
catch(e){
alert(e)
}
}#chart {
max-width: 950px;
border:1px solid #367ee9;
}
#chart .chart-tooltip {
padding:10px;
font-family:tahoma,Verdana,Arial, Helvetica, sans-serif;
font-size:13px;
color:#000000;
}<iframe id="printContent" name="printContent" width="0" height="0" marginheight="0" marginwidth="0" framespacing="0" frameborder="0" style="display:none;"></iframe>
<div id="chart"></div>
<a href="javascript:fnPrint();">Print Graph</a>
<br />
<center><input type="button" value="Update Graph" onclick="fnUpdGraph()" /></center>
<script src='https://cdn.jsdelivr.net/npm/apexcharts'></script>