Skip to main content
Nintex Community Menu Bar
Question

Chart before render snippet not working

  • July 10, 2024
  • 4 replies
  • 3 views
  • Translate
G
Forum|alt.badge.img+10

I want to slow down the default animation for a chart. I have a before render snippet which seems like it should work, but doesn’t. The labels part of the snippet works, but I’ve tried two different methods to affect the animation (which are documented in the Highcharts API docs) and they don’t work at all.

I’ve tried it on a column and line chart with no luck, failing on initial page load and on selection of a different chart type from the picklist. The chart simply animates with the usual 250ms animation.

Has anyone else done this successfully?

Here’s my snippet:

var chartObj = arguments[0], $ = skuid.$; $.extend(true, chartObj.xAxis[0],{ labels: { step: 2, rotation: 300 }, plotOptions: { series: { animation: { duration: 3000 } } }, chart: { animation: { duration: 3000 } } });<br>
Did this topic help you find an answer to your question?

4 replies

B
Forum|alt.badge.img+10

Glenn,

I just tried this in my developer org. I am getting the same results. The chart renders at the normal speed. I also console.logged the chart object and I can clearly see that the animation speed has been changed by the before render snippet.

I added a template component and rendered a chart manually using a sample from Highcharts (http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/plotopt…). This works as expected. The animation is slower. This is on the same page side by side with the Skuid chart. I think that Skuid must be setting the animation speed after the snippet runs in their rendering of the chart.

Here is my xml (setup on version 10).

Thanks,

Bill

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="OppByProduct" limit="" query="true" createrowifnonefound="false" datasource="salesforce" type="aggregate" sobject="OpportunityLineItem">
            <fields>
                <field id="Opportunity.Amount" name="sumOpportunityAmount" function="SUM"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" field="TotalPrice" operator="gte" inactive="true" enclosevalueinquotes="false" name="__autofilter__nstart__TotalPrice" state="filterableoff" value=""/>
                <condition type="fieldvalue" field="TotalPrice" operator="lte" inactive="true" enclosevalueinquotes="false" name="__autofilter__nend__TotalPrice" state="filterableoff" value=""/>
            </conditions>
            <actions/>
            <groupby method="simple">
                <field id="Product2Id" name="product2Id"/>
                <field id="Product2.Name" name="product2Name"/>
            </groupby>
        </model>
    </models>
    <components>
        <filterset model="OppByProduct" searchmethod="server" searchbox="true" uniqueid="sk-1SjSmB-97">
            <filters>
                <filter type="numericrange" filteroffoptionlabel="New Filter" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto" conditionfield="TotalPrice"/>
            </filters>
        </filterset>
        <grid uniqueid="sk-2NDBOi-102">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <skuidvis__chart model="OppByProduct" maintitle="Skuid Chart" type="column" uniqueid="sk-PQVRj-123" rendersnippet="beforeChartRenderSnippet">
                            <dataaxes>
                                <axis id="axis1"/>
                            </dataaxes>
                            <categoryaxes>
                                <axis id="categories" categorytype="field" field="product2Name"/>
                            </categoryaxes>
                            <serieslist>
                                <series valuefield="sumOpportunityAmount" splittype="none"/>
                            </serieslist>
                            <colors/>
                            <legend layout="horizontal" halign="center" valign="bottom"/>
                            <renderconditions logictype="and"/>
                        </skuidvis__chart>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <template multiple="false" uniqueid="sk-2NDDxF-113" allowhtml="true">
                            <contents>&amp;lt;div id="container"&amp;gt;&amp;lt;/div&amp;gt;</contents>
                        </template>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="beforeChartRenderSnippet" cachelocation="false">var chartObj = arguments[0],
$ = skuid.$;
console.log(chartObj);
$.extend(true, chartObj,{
    plotOptions: {
        series: {
            animation: {
                duration: 2000,
                easing: 'easeOutBounce'
            }
        }
    },
    
});
console.log(chartObj);</jsitem>
            <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
/**
 * Easing function from <a target="_blank" rel="nofollow" href="https://github.com/danro/easing-js/blob/master/easing.js">https://github.com/danro/easing-js/blob/master/easing.js
</a> */
Math.easeOutBounce = function (pos) {
    if ((pos) &amp;lt; (1 / 2.75)) {
        return (7.5625 * pos * pos);
    }
    if (pos &amp;lt; (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
    }
    if (pos &amp;lt; (2.5 / 2.75)) {
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
    }
    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
};


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
    },
    title: {
      text: 'Manually Rendered Highchart'  
    },
    plotOptions: {
        series: {
            animation: {
                duration: 2000,
                easing: 'easeOutBounce'
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 111]
    }]
});
});
})(skuid);</jsitem>
        </javascript>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Translate
G
Forum|alt.badge.img+10

Thanks Bill, that’s really helpful.

Could any of the Skuid team confirm this perhaps?

Translate
A
Forum|alt.badge.img+7

Yep, we see this behavior as well. Thanks for pointing it out! I’ve notified our developers, and we’ll let you know when this is fixed in a future release.

Translate
B
Forum|alt.badge.img+10

Glenn,

I stumbled upon something interesting. If you use this sample page and click the button labelled ‘Load Model’, you will see that the before render snippet does work after the model is reloaded.

Maybe you can load the model as part of the before render snippet? Or maybe you can hide the wrapper around the chart and then show it as the last step of the snippet? This might get you going until Skuid puts in a fix.

Thanks,

Bill

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="OppByProduct" limit="" query="true" createrowifnonefound="false" datasource="salesforce" type="aggregate" sobject="OpportunityLineItem">
            <fields>
                <field id="Opportunity.Amount" name="sumOpportunityAmount" function="SUM"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" field="TotalPrice" operator="gte" inactive="true" enclosevalueinquotes="false" name="__autofilter__nstart__TotalPrice" state="filterableoff" value=""/>
                <condition type="fieldvalue" field="TotalPrice" operator="lte" inactive="true" enclosevalueinquotes="false" name="__autofilter__nend__TotalPrice" state="filterableoff" value=""/>
            </conditions>
            <actions/>
            <groupby method="simple">
                <field id="Product2Id" name="product2Id"/>
                <field id="Product2.Name" name="product2Name"/>
            </groupby>
        </model>
        <model id="DrillDownLineItems" limit="20" query="false" createrowifnonefound="false" datasource="salesforce" type="" sobject="OpportunityLineItem">
            <fields>
                <field id="OpportunityId"/>
                <field id="Opportunity.Name"/>
                <field id="PricebookEntryId"/>
                <field id="PricebookEntry.Name"/>
                <field id="Name"/>
                <field id="ProductCode"/>
                <field id="Product2Id"/>
                <field id="Product2.Name"/>
                <field id="Quantity"/>
                <field id="UnitPrice"/>
                <field id="TotalPrice"/>
                <field id="Subtotal"/>
                <field id="SortOrder"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Product2.Name" state="filterableoff" inactive="true" name="ProductName"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <buttonset uniqueid="sk-5AqSk-156" model="OppByProduct" position="left">
            <buttons>
                <button type="multi" label="Hide Chart" uniqueid="sk-5Aq_N-162">
                    <actions>
                        <action type="custom" snippet="hideChart"/>
                    </actions>
                </button>
                <button type="multi" label="Load Model" uniqueid="sk-5COrt-286">
                    <actions>
                        <action type="custom" snippet="loadModel"/>
                    </actions>
                </button>
                <button type="multi" label="Show Chart" uniqueid="sk-5DIQp-329">
                    <actions>
                        <action type="custom" behavior="standard" snippet="showChart"/>
                    </actions>
                </button>
            </buttons>
        </buttonset>
        <filterset model="OppByProduct" searchmethod="server" searchbox="true" uniqueid="sk-1SjSmB-97">
            <filters>
                <filter type="numericrange" filteroffoptionlabel="New Filter" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto" conditionfield="TotalPrice"/>
            </filters>
        </filterset>
        <grid uniqueid="sk-2NDBOi-102">
            <divisions>
                <division behavior="flex" minwidth="100px" ratio="1">
                    <components>
                        <skuidvis__chart model="OppByProduct" maintitle="Skuid Chart" type="column" uniqueid="sk-PQVRj-123" rendersnippet="beforeChartRenderSnippet">
                            <dataaxes>
                                <axis id="axis1"/>
                            </dataaxes>
                            <categoryaxes>
                                <axis id="categories" categorytype="field" field="product2Name"/>
                            </categoryaxes>
                            <serieslist>
                                <series valuefield="sumOpportunityAmount" splittype="none">
                                    <actions>
                                        <action type="setCondition" model="DrillDownLineItems" condition="ProductName" value="{{$Chart.point.category}}">
                                            <conditions>
                                                <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                            </conditions>
                                        </action>
                                        <action type="requeryModel" model="DrillDownLineItems" behavior="standard">
                                            <conditions>
                                                <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                            </conditions>
                                        </action>
                                        <action type="showPopup">
                                            <conditions>
                                                <condition type="contextrows" field="Id" mergefield="Id" operator="in" autocreated="true"/>
                                            </conditions>
                                            <popup title="New Popup" width="90%">
                                                <components>
                                                    <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="DrillDownLineItems" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-2c7v2g-208">
                                                        <fields>
                                                            <field id="OpportunityId" hideable="true" uniqueid="fi-2c7ypb-222"/>
                                                            <field id="Name" hideable="true" uniqueid="fi-2c7ypc-223"/>
                                                            <field id="PricebookEntryId" hideable="true" uniqueid="fi-2c7ypc-224"/>
                                                            <field id="ProductCode" hideable="true" uniqueid="fi-2c7ypc-225"/>
                                                            <field id="Product2Id" hideable="true" uniqueid="fi-2c7ypc-226"/>
                                                            <field id="Quantity" hideable="true" uniqueid="fi-2c7ypc-227"/>
                                                            <field id="UnitPrice" hideable="true" uniqueid="fi-2c7ypc-228"/>
                                                            <field id="SortOrder" hideable="true" uniqueid="fi-2c7ypc-229"/>
                                                            <field id="Subtotal" hideable="true" uniqueid="fi-2c7ypc-230"/>
                                                            <field id="TotalPrice" hideable="true" uniqueid="fi-2c7ypd-231"/>
                                                        </fields>
                                                        <rowactions>
                                                            <action type="edit"/>
                                                            <action type="delete"/>
                                                        </rowactions>
                                                        <massactions usefirstitemasdefault="true">
                                                            <action type="massupdate"/>
                                                            <action type="massdelete"/>
                                                        </massactions>
                                                        <views>
                                                            <view type="standard"/>
                                                        </views>
                                                        <searchfields/>
                                                    </skootable>
                                                </components>
                                            </popup>
                                        </action>
                                    </actions>
                                </series>
                            </serieslist>
                            <colors/>
                            <legend layout="horizontal" halign="center" valign="bottom" showlabels="true"/>
                            <renderconditions logictype="and"/>
                        </skuidvis__chart>
                    </components>
                </division>
                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                    <components>
                        <template multiple="false" uniqueid="sk-2NDDxF-113" allowhtml="true">
                            <contents>&amp;lt;div id="container"&amp;gt;&amp;lt;/div&amp;gt;</contents>
                        </template>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="beforeChartRenderSnippet" cachelocation="false">var chartObj = arguments[0],
$ = skuid.$;
console.log(chartObj);
$.extend(true, chartObj,{
    plotOptions: {
        series: {
            animation: {
                duration: 2000,
                easing: 'easeOutBounce'
            }
        }
    },
    
});
console.log(chartObj);</jsitem>
            <jsitem location="inline" name="newInlineJS" cachelocation="false" url="">(function(skuid){
var $ = skuid.$;
$(document.body).one('pageload',function(){
/**
 * Easing function from <a href="https://github.com/danro/easing-js/blob/master/easing.js" title="Link: https://github.com/danro/easing-js/blob/master/easing.js">https://github.com/danro/easing-js/blob/master/easing.js
</a> */
Math.easeOutBounce = function (pos) {
    if ((pos) &amp;lt; (1 / 2.75)) {
        return (7.5625 * pos * pos);
    }
    if (pos &amp;lt; (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
    }
    if (pos &amp;lt; (2.5 / 2.75)) {
        return (7.5625 * (pos -= (2.25 / 2.75)) * pos + 0.9375);
    }
    return (7.5625 * (pos -= (2.625 / 2.75)) * pos + 0.984375);
};


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    xAxis: {
        categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
    },
    title: {
      text: 'Manually Rendered Highchart'  
    },
    plotOptions: {
        series: {
            animation: {
                duration: 2000,
                easing: 'easeOutBounce'
            }
        }
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 111]
    }]
});
});
})(skuid);</jsitem>
            <jsitem location="inlinesnippet" name="hideChart" cachelocation="false">var params = arguments[0],
$ = skuid.$;
skuid.$('#sk-PQVRj-123').hide();</jsitem>
            <jsitem location="inlinesnippet" name="loadModel" cachelocation="false">var params = arguments[0],
$ = skuid.$;
var oppmodel = skuid.model.getModel('OppByProduct');
oppmodel.load();</jsitem>
            <jsitem location="inlinesnippet" name="showChart" cachelocation="false">var params = arguments[0],
$ = skuid.$;
skuid.$('#sk-PQVRj-123').show();</jsitem>
        </javascript>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Translate

Reply


Sidebar Buttons
Nintex Community Home Contact Nintex Support Email Nintex Community Check Nintex Status
Terms & ConditionsCookie Settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie Settings