Highcharts not rendering

[sullynivek]

Hi,

I am having an issue with a highcharts line chart, I can get this chart to work in a details report by using a "Filter data based on your pre-defined criteria"  but I want the user to select from a series of filters. The code below works fine pulling in a calculated field for the values in the details report. I have spoken to caspio support and they have mentioned that I need to use an event listener, however, not being a coder per se, I am struggling to understand how to do this. Can anyone of you gurus, ninjas or evangelists help me please.

Thanks in advance

Kevin

<script>

Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'AMIS Journey Projection'
  },
  xAxis: {
    categories: ['2023', '2024', '2025', '2026', '2027', '2028']
  },
  yAxis: [{
    title: {
      text: ''
    },
    labels: {
      formatter: function() {
        return this.value + '%';
      }
    },
    plotBands: [{
      color: 'rgba(255, 0, 0, 0.4)',
      from: 0,
      to: 20
    }, {
      color: 'rgba(255, 140, 0, 0.5)',
      from: 20,
      to: 40
    }, {
      color: 'rgba(0, 118, 0, 0.4)',
      from: 40,
      to: 60
    }, {
      color: 'rgba(108, 0, 108, 0.4)',
      from: 60,
      to: 75
    }, {
      color: 'rgba(50, 60, 200, 0.6)',
      from: 75,
      to: 100
    }],
    tickPositions: [0, 20, 40, 60, 75, 100]
  }, {
    title: {
      text: ''
    },
    opposite: true,
    labels: {
      formatter: function() {
        var labels = [null,'In Effective',null, 'Reactive', null,'In Control',null, 'Innovator',null, 'Excellence',null];
        var colors = ['white','red', 'white', 'orange', 'white', 'green', 'white', 'purple', 'white', 'blue', 'white'];
        var index = this.value / 10;
        var color = colors[index];
        return this.value % 10 === 0 ? '<span style="color:' + color + '">' + labels[index] + '</span>' : '';
      }
    },
    tickPositions: [0,10,20, 30,40, 50,60, 70,80, 90,100],
    gridLineWidth: 0,
    lineWidth: 0,
    tickWidth: 0
  }],
  
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true, // Enable data labels
        formatter: function() {
          return this.y + '%'; // Format the label to display the y value with a percentage sign
        }
      },
      marker: {
        enabled: true,
        radius: 8
      },
      lineWidth: 3
    }
  },
  series: [{
    name: '',
    yAxis: 0,
    color: '#dd7a3b', // Set line color to black
    marker: {
      enabled: true,
      fillColor: '#dd7a3b', // Set data point color to black
      radius: 6 // Set the radius of the data points to 6 pixels
    },
    lineWidth: 3, // Set the line width to 3 pixels
    data: [ [@calcfield:1], [@calcfield:1]+20, [@calcfield:1]+30, [@calcfield:1]+38, [@calcfield:1]+48, [@calcfield:1]+54]
  }, {
    name: 'Secondary Axis Data',
    yAxis: 1,
    data: [null, null, null, null, null, null],
    marker: {
      enabled: false
    },
    enableMouseTracking: false
  }],
  credits: {
    enabled: false
  },
  legend: {
    enabled: false
  }
});

</script>