[2 - Testing the D3 visualization in HTML]
5 - Drawing a second indicator as a reference line [coming soon]
2 - Testing the D3 visualization in HTML:
The D3.js code we’ll be using is here. Our goal in this section will be testing, exploring, and preparing our D3 visualization before we import it into Qlik Sense as an extension.
The first thing we’ll do is copy all of the HTML code under the visualization and paste it in the empty Test.html file we downloaded in the introduction article (here if you haven't).
At the top of the HTML code, there are links to the necessary files the visualization uses to run. We’ll need to download these files by opening/saving their references before we jump into extension development. To save time, you can download them here and add them to our extension folder.
We’ll also cut the CSS stylizing code between the <style> tags in the HTML code and paste it in the empty “original.css” file we downloaded in the Introduction article (then get rid of the <style> tags).
After adding all these files to our extension folder, we’ll change the <link> tags at the top of our HTML to refer to them instead of the online links:
Now that we have all our resources ready (our extension folder should be like this now), we’ll execute our new .html file in a browser to check that the D3 visualization works before importing it as an extension in Qlik Sense.
If we change the number 92 to 36, for instance, we can refresh the Test.html webpage in the browser to see the gauge indicator change to 36:
Now we have all our D3 files and testing area ready. In the next section, we’ll start importing the D3 visualization into Qlik as an extension.