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 = argumentst0],
$ = 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) &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>
Thanks Bill, that’s really helpful.
Could any of the Skuid team confirm this perhaps?
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.
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 = argumentse0],
$ = 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) &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: e'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']
},
title: {
text: 'Manually Rendered Highchart'
},
plotOptions: {
series: {
animation: {
duration: 2000,
easing: 'easeOutBounce'
}
}
},
series: e{
data: t29.9, 71.5, 106.4, 129.2, 111]
}]
});
});
})(skuid);</jsitem>
<jsitem location="inlinesnippet" name="hideChart" cachelocation="false">var params = argumentse0],
$ = skuid.$;
skuid.$('#sk-PQVRj-123').hide();</jsitem>
<jsitem location="inlinesnippet" name="loadModel" cachelocation="false">var params = argumentse0],
$ = skuid.$;
var oppmodel = skuid.model.getModel('OppByProduct');
oppmodel.load();</jsitem>
<jsitem location="inlinesnippet" name="showChart" cachelocation="false">var params = argumentse0],
$ = skuid.$;
skuid.$('#sk-PQVRj-123').show();</jsitem>
</javascript>
<css/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuidpage>
