Generate graphs jquery in advanced html dink plugin

Follow
graph1.png
 
To create a graph in powerpoint you need to use both Advanced HTML and Computations functions in the plugin. You need the extended version of the powerpoint plugin to use the Advanced HTML function. 

Graphs can be easily created using the jqPlot plugin http://www.jqplot.com/. The dINK platform already includes a few basic plugins needed to create graphs. Other jQuery scripts can be included inside the advanced HTML.

To find out which jQuery scripts to include, find the sort of graph you want to create in the jqPlot documentation, for example bar charts: http://www.jqplot.com/examples/barTest.php

At the bottom of each page of the documentation you will see the necessary scripts required. It is likely that for certain types of charts you will need extra jqPlot files. 

 

Following scripts are already included into the dINK platform and do not need to be added (can be viewed from "View page source" when you view the publication in the admin on browser):

  • jqGrid.min
  • barRenderer.min
  • categoryAxisRenderer.min
  • pointLabels.min
  • imageMarkerRender
  • donutRenderer.min
  • pieRenderer.min

Seeing the error: "XMLHttpRequest cannot load http://dink-kiosk.appspot.com/mag/stats/issues. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://admin.dink.eu' is therefore not allowed access" is normal when you open the debugger console in browser while viewing the publication. This is because some aspects of the HTML depend on the app so it will show you these errors in the browser. But it should not block the publication itself. 

Other scripts can easily be copy pasted into the HTML file within the <script> tag which you can include through the Advanced HTML option in the PPT plugin. Take note that HTML tags of <html> and <body> are not required to be typed in in the html file. This is because the HTML codes will be included at the end of the publication when d!NK file is created and uploaded. 

Also, remember to remove any includes of jQuery before you include the file in ppt. The jQuery library is needed to make the jqPlot libraries work, but jQuery is included in the d!NK framework and including another version of jQuery might result in the following error: "dink.compiled.js - Uncaught TypeError: $(...).frame is not a function". 

 

An example of a html structure included in the Advanced HTML would be: 

<script> 

</script>

<style> 

</style> 

<div>

</div> 

 

Aside from the scripts you need a div html placeholder to create the graph on. Because the div needs to be visible before we can create a graph we need to add a button to trigger the creation of the graph. If the button gets pressed we’re sure the placeholder div is visible as well. In the HTML file we place a 2 divs, one to represent the placeholder and one to represent the button.

CSS can also be added in this file (in <style> tag) to format the button (with class displayChart in this example) and to define the width and height of the chart (with id chart1).

Include the HTML using the Advance HTML option:

graph2.png

 

In this example, we have chosen bar chart to represent the market share of company Medicure over the selected years, with a history record from 2007 to 2016. The user will select the start year and end year based on the Multiple Choice function in the Plugin. The chart will subsequently display the market share performance based on the selected start and end year.

graph3.png

Now that we have included and positioned the Advanced HTML component and we have created the StartYear field, you can open up the Computations.

As shown above, the dropdown option allows user to select the year and we can access user’s response using the codes below (similarly for end year):

var start = data[StartYear];

The return value stored in variable start will be the year chosen by the user, i.e. the answer value.

Comments are attached in //…  below to explain the JavaScript involved in retrieving the input value chosen by the user.

//make-up values for company Medicure’s market share performance over the years 2007 to 2016. Market share is represented in percentage

var ticks = ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016'];

var marketShare = [25, 26, 29, 35, 40, 48, 56, 57, 60, 65];

//data[StartYear] and data[EndYear] to retrieve the input value selected by the user in dropdown box

var start = data[StartYear];

var end = data[EndYear];

var display;

//check if start year and end year has been selected by the user using indexOf method in an array

if (ticks.indexOf(start) != -1  && ticks.indexOf(end) != -1){

  var startInt = parseInt(start);

  var endInt = parseInt(end);

//checks if start year is greater, i.e. later, than end year. If yes, assign the end year to be equivalent to start year

  if (endInt <= startInt){

    end = start;

  }

 

  var startIndex = ticks.indexOf(start);

  var endIndex = ticks.indexOf(end);

 //The slice() method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument. This explains for the (+1) at for the end index.

  display = marketShare.slice(startIndex, endIndex + 1);

  var ticks = ticks.slice(startIndex, endIndex + 1);

 

} else {

  display=[""];

  // reloads after start year is chosen because after every selection, the JavaScript is rerun

  //otherwise the graph will be displayed empty

  reload();

}

JavaScript Setting for Triggering the Graph:

Once you have the creation of the graph in place, it’s necessary to detect the click on button to trigger this creation.

 graph4.png

//hide the graph at the initial setup, resting within the placeholder div, #chart5

$('#chart5').hide();

$('.displayChart').html('<p>Click here!</p>');

$('.displayChart').css({

    'height' : '30px',

    'width' : '140px',

    'text-align': 'center',

    'background-color' : '#247BA0',

    'padding-top' : '15px',

    'color': 'white'

});

 

$('.displayChart').click(function(){

   $('#chart5').show();

   $('#chart5').html('');

   $('.displayChart').hide();

   createGraph();

});

 

If there are elements on the same slide that can influence the graph and should render the graph again with new information, you can check on the visibility of the button, if it was already clicked (i.e. "displayChart" has been set to "hide"), it means the graph is visible and the graph can be recreated:

 

if($('.displayChart').css('display') == 'none'){

  $('#chart5').show();

  $('#chart5').html('');

  createGraph();

}

 

Do note that it’s necessary to empty the html of the div placeholder for the graph, otherwise the graphs will be layered on top of each other.

 

To make sure the graph does not get generated before the placeholder is visible it is important to put the creation of the graph into a function that does not get triggered automatically, i.e. createGraph function in this example below. 

var createGraph = function(){

         plot1 = $.jqplot('chart5', [display], {

            title: 'Market Share for Medicure',

            animate: !$.jqplot.use_excanvas,

            seriesDefaults:{

                renderer:$.jqplot.BarRenderer,

                pointLabels: { show: true }

            },

            axes: {

                xaxis: {

                    renderer: $.jqplot.CategoryAxisRenderer,

                    ticks: ticks,

                    label: "Year",

                    labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                    pad: 0,

                    labelOptions:{

                        fontFamily:'Calibri',

                        fontSize: '15pt'

                    }

                },

                yaxis:{

                  label: "Market Share in Percentage",

                  labelRenderer: $.jqplot.CanvasAxisLabelRenderer,

                  labelOptions: {

                    fontFamily: 'Calibri',

                    fontSize: '15pt'

                  }

                }

            },

            highlighter: { show: false }

          });  

};

To adjust the code to create the graph please read through the jqPlot documentation. There you can find lots of examples for every kind of graph you can create.

Have more questions? Submit a request

Comments

Powered by Zendesk