Chart before render snippet not working

  • 1
  • Question
  • Updated 1 year ago
  • Acknowledged
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
            }
    }
});
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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>&lt;div id="container"&gt;&lt;/div&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 https://github.com/danro/easing-js/blob/master/easing.js
 */
Math.easeOutBounce = function (pos) {
    if ((pos) &lt; (1 / 2.75)) {
        return (7.5625 * pos * pos);
    }
    if (pos &lt; (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
    }
    if (pos &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>
Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Thanks Bill, that's really helpful.

Could any of the Skuid team confirm this perhaps?
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
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.
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
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>&lt;div id="container"&gt;&lt;/div&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 https://github.com/danro/easing-js/blob/master/easing.js
 */
Math.easeOutBounce = function (pos) {
    if ((pos) &lt; (1 / 2.75)) {
        return (7.5625 * pos * pos);
    }
    if (pos &lt; (2 / 2.75)) {
        return (7.5625 * (pos -= (1.5 / 2.75)) * pos + 0.75);
    }
    if (pos &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>