How to use amCharts graph

OL Connect Professional Designer
1

Hi,

I chose a gauge graph from amCharts. I included amcharts.js, gauge.js and I pasted the code that creates the graph in a new javascript and included it in the print context page:

var chart = AmCharts.makeChart( "chartdiv", {

	    "type": "gauge",...

        "arrows": [ {} ]
			} );

I created the div with id=chartdiv

In the preview pane the graph is displayed correctly.

I created a text script with selector #chartdiv and pasted the following code in it:

let params = JSON.parse(results.attr(“data-params”));

params.arrows[0].setValue(parseFloat(record.fields[“PieBalPerc”]));

results.attr(“data-params”, JSON.stringify(params));

I get the following error on the line marked in red above:

Cannot read property “arrows” from null

What am I missing?

Thanks.

2

Download Example (add a counter as data)

Try these steps:

  • import at least the following libraries and include them in your Section: amcharts.js, gauge.js
  • click on File > Add Data > Generate counters and set the number of records to 10. Skip this if you have an actual datamapper from which you will be getting the gauge value. This example is based on a counter generated by the Designer.
  • add a box\div on the page with an a css ID of #chartdiv
  • add a script in the Script pane with the Selector #chartdiv an dthe following code:
var gaugeValue = '<input id="gaugeValue" value="' + parseFloat(record.fields.counter)*10 + '" hidden="">';
results.html(gaugeValue);

This script uses the parseFloat(record.fields.counter)*10 as the gauge value, if you have a field in your datamapper for this, use it instead. The purpose of this script is to create a hidden HTML element with a css ID (#gaugeValue) in the DOM which accepts a value, (the gauge value in this case). We will later search the DOM for this element (though its css ID), to get the gauge value and pass it to the function which builds the chart. I have used the <input> element but you could use any other element which accepts value as as attribute.

  • Now that we have our value, add the following script to the JavaScript folder and make sure it is included as the last script in your Section. You may name the JavaScript anything you like. I have named it animatedGauge.js
var gaugeValue = document.getElementById("gaugeValue").value;

AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "gauge",
  "axes": [{
    "topTextFontSize": 20,
    "topTextYOffset": 70,
    "axisColor": "#31d6ea",
    "axisThickness": 1,
    "endValue": 100,
    "gridInside": true,
    "inside": true,
    "radius": "50%",
    "valueInterval": 10,
    "tickColor": "#67b7dc",
    "startAngle": -90,
    "endAngle": 90,
    "unit": "%",
    "bandOutlineAlpha": 0,
    "bands": [{
      "color": "#0080ff",
      "endValue": 100,
      "innerRadius": "105%",
      "radius": "170%",
      "gradientRatio": [0.5, 0, -0.5],
      "startValue": 0
    }, {
      "color": "#3cd3a3",
      "endValue": 0,
      "innerRadius": "105%",
      "radius": "170%",
      "gradientRatio": [0.5, 0, -0.5],
      "startValue": 0
    }]
  }],
  "arrows": [{
    "alpha": 1,
    "innerRadius": "35%",
    "nailRadius": 0,
    "radius": "170%",
    "value": gaugeValue
  }]
});

Please note that this is an animated chart and as such may not work as expected when generating print output. You may have to go into the amchart.js and gauge.js libraries to comment out the lines of code which animate the chart.

3

Thank you very much Rod. The explanation and example were what i exactly needed.

I didn’t know that the selection scripts are executed before the javascript files.

You made not my day but my whole week :slight_smile:

Best Regards.

4

One more question. When I proof print the print section the gauge’s blue color is replaced with black and the needle disappears.

I have set the animation to off (startDuration = 0).

What could be wrong?