Build in­ter­ac­tive vis­ual charts

Learn how to cre­ate a sim­ple dy­namic dash­board us­ing the Apex Charts Javascript li­brary

Web Designer - - Contents -

Learn how to cre­ate a sim­ple dy­namic dash­board us­ing the Apex­charts li­brary.

we are wired for vi­su­als. About half of our brain is ded­i­cated for vis­ual func­tions, and 90% of the in­for­ma­tion trans­mit­ted is vis­ual. What this im­plies is that users are more likely to ob­tain clear in­sights from data that is vis­ually and aes­thet­i­cally pre­sented as op­posed to a slew of num­bers.

En­ter data vi­su­al­iza­tion. In sim­ple terms, this in­volves rep­re­sent­ing data graph­i­cally through forms such as charts, in­fo­graph­ics and dash­boards. While soft­ware ap­pli­ca­tions ship with in-built data an­a­lytic fea­tures that pro­vide the sought-af­ter vi­su­al­iza­tion, rep­re­sent­ing data vis­ually in web­sites and web-based projects can be chal­leng­ing, es­pe­cially where in­ter­ac­tive in­ter­pre­ta­tion is needed. A mod­ern Javascript li­brary that is tack­ling this prob­lem is Apex Charts. The li­brary serves two key roles; cre­at­ing beau­ti­ful Javascript charts and pro­vid­ing an ef­fec­tive vis­ual and in­ter­ac­tive rep­re­sen­ta­tion of data. Apex Charts is open-source, easy to use and highly cus­tomis­able. It also pro­vides di­verse chart types that can be com­bined to pro­vide a rich and vis­ual rep­re­sen­ta­tion of data.

In this tu­to­rial, the fun­da­men­tals of the li­brary are dis­cussed and a prac­ti­cal ap­pli­ca­tion of the li­brary demon­strated, whereby a sim­ple dash­board with sev­eral charts is cre­ated. Here’s how…

1. Get­ting started

Be­gin by cre­at­ing a folder, apex, on your desk­top to store the tu­to­rial files. Cre­ate two ad­di­tional fold­ers within it: CSS to store the styling files, and JS to store Javascript files. HTML files will be stored in the root folder (apex). Cre­ate a file ‘styles.css’ in the CSS folder and ‘in­dex.js’ in the JS folder. These will be used in the later sec­tion of the tu­to­rial.

2. Cre­at­ing the main HTML page struc­ture

Open any code ed­i­tor and cre­ate an ‘in­dex.html’ doc­u­ment to con­tain mark up for the main web­page. Be­gin by cre­at­ing the ba­sic struc­ture and give a suit­able ti­tle to the page. <! DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8”> <ti­tle>sim­ple Dash­board us­ing Apex Charts </ti­tle>

</head>

<body> </body>

</html>

De­sign­ing the Dash­board lay­out 3. Adding rows

The aim of the tu­to­rial is to cre­ate a sim­ple dash­board lay­out us­ing the li­brary. As such, the main page will be struc­tured into three sec­tions, each with a dif­fer­ent chart type us­ing the Boot­strap grid lay­out. To do this, cre­ate a main con­tainer class div in the body sec­tion, and within it, add two Boot­strap rows.

<body> <div class=”con­tainer”>

<h1> Sim­ple Dash­board us­ing Apex Charts </h1>

<div class=”row”></div> <div class=”row”></div> </div> </body>

4. Adding col­umns

Es­sen­tially, the dash­board be­ing cre­ated in this tu­to­rial will con­tain a bar graph in the first row and two pie charts in the sec­ond row. Sub­se­quently, the first row con­tains only 1 col­umn while the sec­ond is di­vided into two col­umns. Add the fol­low­ing code in the sec­ond row in or­der to di­vide it into two col­umns while en­sur­ing that the first row re­mains un­changed.

<body> <div class=”con­tainer”>

<h1> Sim­ple Dash­board us­ing Apex Charts </h1>

<div class=”row”></div> <div class=”row”>

<div class=”col-lg-6”></div> <div class=”col-lg-6”></div> </div> </div>

</body>

5. Spec­i­fy­ing chart po­si­tions

Now that col­umns have been spec­i­fied in the web­page, cre­ate new divs within the dif­fer­ent sec­tions where chart func­tion­al­ity will be added us­ing Javascript. Dif­fer­en­ti­ate these sec­tions by as­sign­ing a unique id to each sec­tion (‘chart’, ‘chart1’, ‘chart2’) re­spec­tively. Sim­i­larly, as­sign a unique CSS class for each sec­tion in or­der to fa­cil­i­tate styling.

<div class=”row”>

<div id=”chart” class=”bar-graph”></div> </div>

<div class=”row”>

<div class=”col-lg-6”>

<div id=”chart1” class=”ra­dial”></ div> </div>

<div class=”col-lg-6”> <div id=”chart2” class=”cir­cle”></div> </div>

</div>

styling the web­page 6. Header and page back­ground

Next, open the ‘styles.css’ file cre­ated ear­lier and spec­ify styling to cen­tralise the head­ing in the web­page and add

a back­ground colour. Copy the code be­low which spec­i­fies the header’s font, size, colour and po­si­tion­ing, and spec­i­fies a white back­ground for the dash­board. h1{ text-align: cen­ter; po­si­tion: rel­a­tive; mar­gin:20px; top:15%; font-fam­ily: Tre­buchet MS, Arial, Hel­vetica, sans-serif; font-size: 25px; color: #167676; } html, body {

back­ground-color: #fff; }

With the header cen­tralised and back­ground set to white, link the stylesheet in the header sec­tion by adding the fol­low­ing code:

<link rel=”stylesheet” href=”css/styles.css” >

Cur­rently, the land­ing page is very ba­sic as it only con­tains coloured text on a white back­ground.

7. Pre­par­ing to add Javascript func­tion­al­ity

Be­gin by link­ing the Apex Charts Javascript li­brary to the web­page. Two al­ter­na­tives ex­ist: ei­ther down­load­ing the file from the of­fi­cial web­site https://apex­charts.com/ down­loads/apex­charts-bun­dle.zip) or di­rectly link­ing it from a CDN source such as unpkg or js­de­livr.

In the for­mer’s case, first down­load and ex­tract the bun­dle in an eas­ily ac­ces­si­ble sec­tion. Next, copy the ‘apex­charts.min.js’ file con­tained within it, and paste it in the JS folder cre­ated in step 1. Link the file as fol­lows in the body sec­tion of the page: <script type=”text/javascript” src=”path/to/ apex­charts.min.js”></script>

In the lat­ter’s case, sim­ply add the link be­low in the head sec­tion.

<script src=” https://unpkg.com/apex­charts/ dist/apex­charts.min.js”></script>

Fi­nally, link the ‘in­dex.js’ file cre­ated ear­lier, by adding the code be­low in the body sec­tion:

<script src=”js/in­dex.js”></script>

Cre­at­ing the Dash­board 8. An over­view

Be­fore pro­ceed­ing to cre­ate dif­fer­ent charts us­ing the li­brary, it is im­por­tant to un­der­stand the flow of logic ad­hered to in cre­at­ing them. In essence, cre­at­ing the li­brary in­volves only three steps.

Step 1: declar­ing the op­tions vari­able and spec­i­fy­ing the chart func­tion­al­ity.

Step 2: declar­ing the chart vari­able and pass­ing two key ar­gu­ments: the doc­u­ment’s sec­tion where the chart is tar­geted and the op­tion spec­i­fi­ca­tions cre­ated in step 1.

Step 3: ren­der­ing the chart.

As such, we’ve fol­lowed this process in cre­at­ing the three dif­fer­ent charts in the tu­to­rial.

9. The bar graph

Open the ‘in­dex.js’ file cre­ated in step 1. Be­gin by declar­ing the op­tions vari­able where the func­tion­al­ity of the Apex Chart will be de­fined. Cre­at­ing a bar graph in­volves five steps: spec­i­fy­ing the graph type, adding se­ries data, spec­i­fy­ing stroke, adding chart ti­tle and data la­bels and fi­nally adding axis de­tails.

Be­gin by spec­i­fy­ing the graph type as line and adding the data to be vis­ually rep­re­sented as shown be­low. var op­tions = { chart: { height: 300, type: “line”

}, se­ries: [

{ name: “Web­site Blog”, type: “col­umn”, data: [440, 505, 414, 671, 227, 413, 201, 352, 752, 320, 257, 160] }, { name: “So­cial Me­dia”, type: “col­umn”, data: [23, 42, 35, 27, 43, 22, 17, 31,

22, 22, 12, 16]

}

],

};

The code above spec­i­fies that a line chart of height 300 will be cre­ated. Fur­ther, it will vis­ually rep­re­sent two types of data in a col­umn for­mat: web­site blog and so­cial me­dia.

10. Chart ti­tle

Next, add the chart ti­tle and data la­bels for the se­ries added in step 10. Copy the code be­low which spec­i­fies a stroke width of size 4 and a smooth an­i­ma­tion of the col­umn data. Like­wise, the chart ti­tle is added and la­bels spec­i­fied for the dif­fer­ent se­ries’ data points.

Add the data be­low. stroke: { width: [0, 4], curve: ‘smooth’

}, ti­tle: {

text: “Traf­fic Sources”

}, la­bels: [

“01 Jan 2001”,

“01 Feb 2001”,

“01 Mar 2001”,

“01 Apr 2001”,

“01 May 2001”,

“01 Jun 2001”,

“01 Jul 2001”,

“01 Aug 2001”,

“01 Sep 2001”,

“01 Oct 2001”,

“01 Nov 2001”,

“01 Dec 2001”

],

11. Axis de­tails

Next, spec­ify the axis de­tails by in­di­cat­ing the data type and spe­cific la­bels for each axis. Copy the code be­low which as­signs a type of date-time to the x axis and

like­wise as­signs la­bels for each axes. xaxis: { type: “date­time”

}, yaxis: [

{ ti­tle: { text: “Web­site Blog”

},} {

op­po­site: true, ti­tle: {

text: “So­cial Me­dia” } } ] };

12. ren­der­ing the bar graph

Now that the de­tails of the chart have been spec­i­fied, a new chart vari­able is cre­ated and the op­tions vari­able passed as an ar­gu­ment to the chart div cre­ated in step 5. The chart is then ren­dered. Copy the code be­low. var chart = new Apex­charts (doc­u­ment. query­s­e­lec­tor (“#chart”), op­tions); chart.ren­der ();

The bar graph should now ren­der.

13. The pie chart (sim­ple donut)

Next, a pie chart is cre­ated in the left col­umn of the sec­ond row, be­neath the bar graph. To do this, cre­ate a new Javascript file ‘chart1.js’ and save it in the JS folder. As pre­vi­ously dis­cussed, three steps are in­volved in cre­at­ing the pie chart: declar­ing the op­tions vari­able, cre­at­ing the charts vari­able and ren­der­ing the chart.

How­ever, un­like the bar graph, cre­at­ing the pie chart is slightly dif­fer­ent: spec­ify the chart type and size, add a ti­tle and add the se­ries data. Copy the code be­low into ‘chart1.js’, which spec­i­fies the chart type of donut, a ti­tle and the se­ries data. chart: { width: 300, type: ‘donut’, }, ti­tle: { text: “Re­spon­dent Age” }, se­ries: [44, 55, 41, 17, 15], la­bels: [“18-30”, “31-40”, “41-50”, “51-60”, “61-70”] }

14. ren­der­ing the pie chart

Next, ren­der the chart by adding the two pa­ram­e­ters to the chart vari­able. Note that the div ‘chart1’ spec­i­fied in step 5 is ref­er­enced in or­der to en­sure the chart ren­ders in the ap­pro­pri­ate col­umn of the dash­board.

var chart = new Apex­charts (

doc­u­ment. query­s­e­lec­tor(“#chart1”), op­tions); chart.ren­der();

How­ever, we need to style them us­ing ab­so­lute po­si­tion­ing. Paste the fol­low­ing CSS code in ‘styles.css’.

.cir­cle{ po­si­tion: ab­so­lute; top: 55%; right: 20%; pad­ding: 10px; } .ra­dial{ po­si­tion: ab­so­lute; top: 55%; left: 20%; pad­ding: 10px; }

Both charts should now ren­der.

15. The mul­ti­ple ra­dial bar charts

At this stage, fi­nalise de­vel­op­ment of the dash­board by cre­at­ing a mul­ti­ple ra­dial bar chart in the right col­umn, next to the donut pie chart. Be­gin by cre­at­ing a new file ‘chart2.js’ in the JS folder.

Four steps are in­volved in cre­at­ing a mul­ti­ple ra­dial bar chart: spec­i­fy­ing the type of chart, declar­ing the plot op­tions, adding chart ti­tle and the se­ries data. Copy the code over the page that spec­i­fies the chart type and de­clares the plot op­tions.

chart: { height: 280, type: “ra­di­al­bar”

}, plo­top­tions: { cir­cle: { data­l­a­bels: { showon: “hover” } }

}, ti­tle: { text: “Sur­vey Re­sponses” }, se­ries: [44, 55, 67, 83], la­bels: [“Dis­agree”, “Strongly Dis­agree”, “Neu­tral”, “Strongly Agree”] };

16. ren­der­ing the mul­ti­ple ra­dial bar charts

Fi­nally, ren­der the chart by pass­ing the ap­pro­pri­ate pa­ram­e­ters sim­i­lar to steps 11 and 13. How­ever, en­sure that ‘chart2’ is ref­er­enced as the page sec­tion where the Apex Chart is ren­dered. Add the code be­low to chart2.js. var chart = new Apex­charts ( doc­u­ment.query­s­e­lec­tor (“#chart2”), op­tions); chart.ren­der ();

The three charts should now ren­der.

tweak­ing the Dash­board 17. Adding an­no­ta­tions to the bar graph y axis

An­no­ta­tions en­able you to write cus­tom text on spe­cific val­ues or on axes val­ues. We can cre­ate an an­no­ta­tion to in­di­cate the value of the high­est web traf­fic (Septem­ber 2001). To do this, sim­ply paste the fol­low­ing code af­ter chart.ren­der() . chart.ad­dyax­isan­no­ta­tion({ y: 752, yax­isin­dex: 0, la­bel: {

text: ‘High­est Web traf­fic’

},

})

The ren­der should ap­pear as shown. No­tice the dot­ted line ren­dered at Septem­ber.

18. And to the x axis

An­no­ta­tions can also be added to the x axis if re­quired. If we wanted to in­di­cate that in May 2001 there was a sys­tem prob­lem that led to poor per­for­mance, we can do this by sim­ply past­ing the code be­low af­ter chart.ren­der(). The ren­der should ap­pear smoothly. Check the code on the Filesilo down­load site.

19. Adding point an­no­ta­tions to the bar graph

Apart from adding an­no­ta­tions to the x and y axes, point an­no­ta­tions can also be added at spe­cific points in the graph. Sup­pose you would like to in­di­cate that the web­site was up­dated in Septem­ber 2001 lead­ing to the im­proved traf­fic. Sim­ply paste the code be­low af­ter chart.ren­der ( ) chart.ad­d­pointan­no­ta­tion ({ x: new Date (‘01 Sep 2001’).get­time(), y: 752, la­bel: {

text: ‘New Web Up­date’

},

})

Ren­der the chart again. Ob­serve the an­no­ta­tion present at Septem­ber without the dot­ted line as was the case in step 17.

ex­plor­ing the apex Charts li­brary 20. ro­bust fea­tures

Un­for­tu­nately, the tu­to­rial can­not cover all the dif­fer­ent unique fea­tures as­so­ci­ated with the li­brary. How­ever, the re­source that can be found at https://apex­charts.com/ fea­tures pro­vides elab­o­rate ex­am­ples of how to style the charts, utilise dif­fer­ent colour pal­ettes, add smooth an­i­ma­tions, an­no­ta­tions and in­ter­ac­tiv­ity. We’d rec­om­mend ex­plor­ing this sec­tion of the Apex Charts world to ad­vance your projects fur­ther. Have fun and let us know how you get on!

6

15

13

17

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.