charts in version 1.8 and charts in 2018.1 - Not working!

OL Connect Professional Designer
1

Hi - I am testing the upgrade on some existing templates I have that use a lot of graphs. It seems as though none of my graphs work now. There is no error, just no showing. Is there an easy way to convert them so that they work with the upgrade? Will I have to redo all my graphs in all my templates?

I have done some reading and it looks like if I want a graph then I have to have detail tables otherwise I have edit my code every time. For example - I have this extraction and out of this extraction I actually have six graphs. It is not transactional data. The bolded tags below would be for one graph. So with this type of extraction, am I going to have to edit the script? I have tried using the graph wizard and its just not getting me the simple bar chart I previously had.

<Longitudinal>
<PlnBalToday>267,447,925</PlnBalToday>
<PlnBalYr1>243,136,468</PlnBalYr1>
<PlnBalYr2>202,940,171</PlnBalYr2>
<PlnBalYr3>152,256,160</PlnBalYr3>
<PAbalToday>92,369</PAbalToday>
<PAbalYr1>93,283</PAbalYr1>
<PAbalYr2>77,361</PAbalYr2>
<PAbalYr3>0</PAbalYr3>
<PArateToday>85.61</PArateToday>
<PArateYr1>81.98</PArateYr1>
<PArateYr2>80.79</PArateYr2>
<PArateYr3>0.00</PArateYr3>
<DefToday>5.88</DefToday>
<DefYr1>0.00</DefYr1>
<DefYr2>0.00</DefYr2>
<DefYr3>0.00</DefYr3>
<EligToday>284</EligToday>
<PartToday>2,387</PartToday>
<EligYr1>327</EligYr1>
<PartYr1>2,145</PartYr1>
<EligYr2>279</EligYr2>
<PartYr2>2,147</PartYr2>
<EligYr3>0</EligYr3>
<PartYr3>0</PartYr3>
<Less3Today>600</Less3Today>
<Less3Yr1>744</Less3Yr1>
<Less3Yr2>407</Less3Yr2>
<Less3Yr3>0</Less3Yr3>
</Longitudinal>

Thank You

2

We did our best to make them backwardscompatible but also know this doesn’t for all scenarios (especially when they are scripted). Could you share your template and data with me?

Erik

3

I tried to send it to the server but it says it is too big.

4

Could you put it on an FTP for me? You got my email address.

5

To follow up our offline conversation and to help others, below a JavaScript code snippet (Connect Designer user script) to programmatically construct the chart and populate it with values of specific data fields (in this case take from the first record of your Longitudinal table.

In short:
First we populate an array with objects containing the values, labels and optionally set colors (each bar or segment can have its own). Subsequently we construct a chart object following the API of the amchart library documentation (which could also be copied from the online amchart editor, see: Online Chart Maker | amCharts)

The last line in our stringifies the chart object and writes it the data-amchart attribute on the Connect chart element.

Hope this is of some help,

Erik

Selector:
#some-connect-chart-object

Script code:

var chartData = [
       {
             'value_label' : '24 months<br> prior',
             'the_value' : record.tables['Longitudinal'][0].fields['PAbalYr2'],
             'my_color': '#232c68'
       },
       {      
             'value_label' : '12 months<br> prior',
             'the_value' : record.tables['Longitudinal'][0].fields['PAbalYr1'],
             'my_color': '#232c68'
       }, 
       {
             'value_label' : 'As of'+ '<br>' + record.fields["rpt_asof"],
             'the_value' : record.tables['Longitudinal'][0].fields['PAbalToday'],
             'my_color': '#232c68'
       }
];

var config = { 
       type : 'serial',
       dataProvider : chartData,
       categoryField : 'value_label',
       categoryAxis: {
           gridThickness: 0
       },
       graphs : [ 
            { 
            title: '',
            valueField: "the_value",
            type: "column",
            fillAlphas: 1,
            lineAlpha: 0,
            fillColorsField: "my_color"
        }
       ]
};

results.attr('data-amchart', JSON.stringify(config));

6

Thank you - it helps tremendously !!!

7

We’ve added a new article to our How To section. It provides background information on how Connect renders Charts/Graphs and describes how to programmatically configure a Chart object:

https://learn.objectiflune.com/en-us/howto/Programmatically-configure-a-Chart-object