Chart - Heatmap

Wappler General Need Help
9

Hi guys,

Here you have a simple example.

<!doctype html>
<html>

<head>
    <base href="/">
    <script src="/dmxAppConnect/dmxAppConnect.js"></script>
    <meta charset="UTF-8">
    <title>Untitled Document</title>
    <script src="/js/jquery-3.4.1.slim.min.js"></script>
    <link rel="stylesheet" href="/fontawesome4/css/font-awesome.min.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/bootstrap/4/css/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script>
        dmx.Component('apex-chart', {
          attributes: {
            type: { type: String, default: 'bar'},
            height: { type: String, default: '400'},
            data: { type: Array, default: [] },
            xaxis: { type: Array, default: [] }
          },
          render: function (el) {
            var options = {
              chart: {
                type: this.props.type,
                height: this.props.height+"px"
              },
              series: [{
                data: this.props.data
              }],
              xaxis: {
                categories: this.props.xaxis
              }
            };
            
            var chart = new ApexCharts(el, options);
            chart.render();
          }
        });
    </script>
</head>

<body is="dmx-app" id="test">
    <dmx-value id="data1" dmx-bind:value="[30,40,35,50,49,60,70,91,125]"></dmx-value>
    <dmx-value id="xaxis1" dmx-bind:value="[1991,1992,1993,1994,1995,1996,1997,1998,1999]"></dmx-value>

    <dmx-value id="data2" dmx-bind:value="[2,0,6,7]"></dmx-value>
    <dmx-value id="xaxis2" dmx-bind:value="['apples', 'oranges', 'bananas', 'tomatoes']"></dmx-value>

    <div id="chart1" is="dmx-apex-chart" type="bar" dmx-bind:data="data1.value" dmx-bind:xaxis="xaxis1.value" height="400"></div>
    <div id="chart2" is="dmx-apex-chart" type="bar" dmx-bind:data="data2.value" dmx-bind:xaxis="xaxis2.value" height="400"></div>

    <script src="/bootstrap/4/js/popper.min.js"></script>
    <script src="/bootstrap/4/js/bootstrap.min.js"></script>
</body>

</html>

In this example I'm using a custom dmx component. That means it will play well with App Connect. As you can see I'm loading data from Wappler variables.

There are a lot of things missing in this example and I need to understand better how a dmx component and its methods work. Also you can't use the UI so you need to add everything in code view.

Fortunately the team already confirmed they will be improving the experience of custom components with UI support and documentation.

1 Like