How to data move to Apexcharts using template

Developing Nodes
1

image

Basic Bar Chart 
<link href="../../assets/styles.css" rel="stylesheet" />

<style>
  
    #chart {
  max-width: 650px;
  margin: 35px auto;
}
  
</style>

<script>
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>'
    )
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/eligrey-classlist-js-polyfill@1.2.20171210/classList.min.js"><\/script>'
    )
  window.Promise ||
    document.write(
      '<script src="https://cdn.jsdelivr.net/npm/findindex_polyfill_mdn"><\/script>'
    )
</script>


<script src="https://cdn.jsdelivr.net/npm/react@16.12/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12/umd/react-dom.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prop-types@15.7.2/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<script src="https://cdn.jsdelivr.net/npm/react-apexcharts@1.3.6/dist/react-apexcharts.iife.min.js"></script>


<script>
  // Replace Math.random() with a pseudo-random number generator to get reproducible results in e2e tests
  // Based on https://gist.github.com/blixt/f17b47c62508be59987b
  var _seed = 42;
  Math.random = function() {
    _seed = _seed * 16807 % 2147483647;
    return (_seed - 1) / 2147483646;
  };
</script>

<div id="app"></div>



<script type="text/babel">
  class ApexChart extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
      
        series: [{
          data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
        }],
        options: {
          chart: {
            type: 'bar',
            height: 350
          },
          plotOptions: {
            bar: {
              borderRadius: 4,
              horizontal: false,
            }
          },
          dataLabels: {
            enabled: true
          },
          xaxis: {
            categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
              'United States', 'China', 'Germany'
            ],
          }
        },
      
      
      };
    }

  

    render() {
      return (
        <div>
          <div id="chart">
            <ReactApexChart options={this.state.options} series={this.state.series} type="bar" height={350} />
          </div>
          <div id="html-dist"></div>
        </div>
      );
    }
  }

  const domContainer = document.querySelector('#app');
  ReactDOM.render(React.createElement(ApexChart), domContainer);
</script>
I want show data in apexcharts using template node, [ { "id": "d11ef169d2055a82", "type": "tab", "label": "Flow 4", "disabled": false, "info": "" }, { "id": "19df53b3fb7177ec", "type": "template", "z": "d11ef169d2055a82", "name": "", "field": "payload", "fieldType": "msg", "format": "handlebars", "syntax": "mustache", "template": "\n\n \n \n \n \n Basic Bar Chart\n\n \n\n \n \n #chart {\n max-width: 650px;\n margin: 35px auto;\n }\n \n \n\n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n\n \n \n
\n\n\n\n \n\n \n \n", "output": "str", "x": 340, "y": 260, "wires": [ [ "af9c164a11632f22" ] ] }, { "id": "af9c164a11632f22", "type": "http response", "z": "d11ef169d2055a82", "name": "", "statusCode": "", "headers": {}, "x": 510, "y": 260, "wires": [] }, { "id": "b4404c868f4eee38", "type": "http in", "z": "d11ef169d2055a82", "name": "", "url": "/book", "method": "get", "upload": false, "swaggerDoc": "", "x": 140, "y": 260, "wires": [ [ "19df53b3fb7177ec" ] ] } ]
2

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.