Hi, I’m trying to create a heatmap (55 matrix which you plot data on) and i would ideally like to be able to colour each block in the matrix a colour signifying the importance Green, Red and Amber (see attached image happens to be 66). Alternatively is it possible to have a background image which has the colours on with the graph plotting the co-ordinates over the image?
Is this possible?
Thanks
For me, I would personally look at using another JavaScript chart library, I’ve found https://apexcharts.com/javascript-chart-demos/heatmap-charts/ to be very attractive, well documented and free.
If you haven’t used a 3rd party library outside of Wappler before it does take a bit of research and custom JavaScript files. I think though they are good skills to learn as that way if you ever want to use something specific not currently provided then you’ll have the skills to do so.
Outside of using a different chart library, you may be able to do it in Wappler by creating a table with values in it and then use different CSS and dynamic classes with a variety of conditions to change the background colour of each cell. I.e if value between 1 and 3, make background colour green.
Couple of different ways to go about based on your scenario.
Hi Philip, Many thanks, just looked at the link and it looks really good… i haven’t used 3rd party libraries so will have to work out how to do that .
Regards,
Nigel
It’s not that difficult, I’ve used a few and prior to my Wappler journey hadn’t done any programming at all.
The Alexcharts documents are good and easier than most others for us newbies.
A few things you’ll find out if you go down this path:
Loading up things like charts that use data from your server actions need to happen after you page is fully loaded. This is done a few ways and can be looked into.
You’ll end up making use of two features in Wappler, dmx.parse and dmx.app.set. These allow you to basically send data and variables to and from your app connect and you custom JavaScript code. (Like the server connect data for your heatmap)
Good luck
Thanks again…gives me somewhere to start
Any luck with your attempt to use Alexcharts.com? I am very interested in learning to install extras like this in some apps that I have on some current job requests.
Thanks for any assistance you can provide!
If I find some time I’ll try to put up a quick tutorial during the weekend. I am using Apexcharts in my app.
Hi JR, im still a bit of a newbie, but have managed to get some nice charts with apexcharts… a lot of trial and error though.
The thing I’m struggling with is getting data from the app connect into data for apexcharts, two challenges:
i’m still hopeful of being able to fix these and if i can apexcharts provide some nice charts, animations etc. Sorry cant be a bit more helpful.
I’m very excited about any examples JonL might be able to offer .
all the best
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>
Kapture 2021-06-12 at 12.40.26
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.
Thanks a lot Jon!
thanks Jon