Updating custom variable, array values on runtime #2723

sandeept07 · 2021-10-25T14:05:40Z

sandeept07
Oct 25, 2021

Hi,

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>

Answered by sandeept07

Oct 31, 2021

Please click here to see the solution.

Thanks,
Sandeep

View full answer

sandeept07 · 2021-10-31T07:17:54Z

sandeept07
Oct 31, 2021
Author

Please click here to see the solution.

Thanks,
Sandeep

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Updating custom variable, array values on runtime #2723

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Updating custom variable, array values on runtime #2723

Uh oh!

sandeept07 Oct 25, 2021

Replies: 1 comment

Uh oh!

sandeept07 Oct 31, 2021 Author

sandeept07
Oct 25, 2021

sandeept07
Oct 31, 2021
Author