Skip to main content

Hi All. 

I hope that you can give me some hints. Thank you for your time :) I’m trying to meet a requirement to show chart data labels on demand e.g. by a button click. 

So in short, I have a chart which has 4 series, 2 columns and 2 lines as this is how the client want to see it. Of course they see the data while hoovering but they also want to do a screenshot with data for a given axis. Showing all labels is not a solution (chart is not looking good).

The best would be to have button for each of axis or axis grouping (like 2 columns = group 1 & 2 lines = group 2): 
1. Action first - deactivate not required axis on the chart; 
2. Action two - show data labels for left axis. 

Additional button - revert to normal view. 

I know that I can get the data labels using a snippet e.g. http://jsfiddle.net/gewgcwm8/
But how to make this all work correctly? 

Would be grateful for any advice. 

Cheers! 
J.

Jakub,


Here is a sample page to get you started. I have 2 snippets on this page: a snippet that runs before the chart renders and a second snippet to render the chart after the action to enable/disable the chart labels.


I used a UI Only model to hold the value of what to display. In the before the chart renders snippet I get the value from the UI Only model to pass into the value to enable/disable the labels. I use the same value to render 2 buttons to act as a toggle for the labels.


Thanks,


Bill


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Task">

    <models>

        <model id="Task" limit="100" query="true" createrowifnonefound="false" sobject="Task">

            <fields>

                <field id="Subject"/>

                <field id="CreatedDate"/>

                <field id="Status"/>

            </fields>

            <conditions/>

            <actions/>

        </model>

        <model id="TaskDonut" limit="" query="true" createrowifnonefound="false" adapter="" type="aggregate" sobject="Task">

            <fields>

                <field id="Id" name="countId" function="COUNT"/>

            </fields>

            <conditions/>

            <actions/>

            <groupby method="simple">

                <field id="Status" name="status"/>

            </groupby>

        </model>

        <model id="UIOnly" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">

            <fields>

                <field id="LabelsEnabled" displaytype="BOOLEAN" label="LabelsEnabled" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="false"/>

            </fields>

            <conditions/>

            <actions/>

        </model>

    </models>

    <components>

        <pagetitle model="Task" uniqueid="sk-10WJIG-74">

            <maintitle>

                <template>{{Model.labelPlural}}</template>

            </maintitle>

            <subtitle>

                <template>Home</template>

            </subtitle>

            <actions>

                <action type="multi" label="Enable Labels" uniqueid="sk-2B8D-345">

                    <renderconditions logictype="and">

                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="LabelsEnabled" value="false"/>

                    </renderconditions>

                    <enableconditions/>

                    <actions>

                        <action type="updateRow" fieldmodel="UIOnly" affectedrows="context" field="LabelsEnabled" enclosevalueinquotes="false" value="true"/>

                        <action type="custom" snippet="rerenderChart"/>

                    </actions>

                </action>

                <action type="multi" label="Disable Labels" uniqueid="sk-2B8D-450">

                    <actions>

                        <action type="updateRow" fieldmodel="UIOnly" affectedrows="context" field="LabelsEnabled" enclosevalueinquotes="false" value="false"/>

                        <action type="custom" behavior="toggle" componentid="sk-10WKeA-87" snippet="rerenderChart"/>

                    </actions>

                    <renderconditions logictype="and">

                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="LabelsEnabled" value="true"/>

                    </renderconditions>

                    <enableconditions/>

                </action>

                <action type="savecancel" uniqueid="sk-2B8D-197"/>

            </actions>

        </pagetitle>

        <skuidvis__chart model="TaskDonut" maintitle="{{Model.labelPlural}}" type="donut" uniqueid="sk-10WKeA-87" rendersnippet="beforeRenderSnippet">

            <dataaxes>

                <axis id="axis1"/>

            </dataaxes>

            <categoryaxes>

                <axis id="categories" categorytype="field"/>

            </categoryaxes>

            <serieslist>

                <series valuefield="countId" splittype="field" splitfield="status"/>

            </serieslist>

            <colors/>

            <legend layout="horizontal" halign="center" valign="bottom"/>

            <renderconditions logictype="and"/>

        </skuidvis__chart>

        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Task" mode="read" uniqueid="sk-10WJIG-75">

            <fields>

                <field id="Status" valuehalign="" type="" uniqueid="sk-2B8D-215"/>

                <field id="Subject" allowordering="true" uniqueid="sk-2B8D-218"/>

                <field id="CreatedDate" allowordering="true" valuehalign="" type="" uniqueid="sk-2B8D-221"/>

            </fields>

            <rowactions>

                <action type="edit"/>

                <action type="delete"/>

            </rowactions>

            <massactions usefirstitemasdefault="true">

                <action type="massupdate"/>

                <action type="massdelete"/>

            </massactions>

            <views>

                <view type="standard"/>

            </views>

        </skootable>

    </components>

    <resources>

        <labels/>

        <css>

            <cssitem location="inline" name="newcss" cachelocation="false">.sk-chart-innertext {

    visibility: hidden;

}</cssitem>

        </css>

        <javascript>

            <jsitem location="inlinesnippet" name="beforeRenderSnippet" cachelocation="false">var params = arguments[0],

$ = skuid.$;

console.log(params);

    var enable=skuid.model.map().UIOnly.data[0].LabelsEnabled;

    

params.chart.events={

          load:function(){

          var chart = this,

            series = chart.series[0],

              firstPoint = series.data[0].y,

              nextPoint = series.data[1].y,

              percent = (firstPoint / (firstPoint + nextPoint)) * 100,

            value = 0;

              

          chart.setTitle({

          text: 100 - percent + '%',

          align: 'center',

            verticalAlign: 'middle'

          });

        }

    

};

    params.plotOptions.pie.dataLabels = {

    enabled: enable,

    format: '&amp;lt;b&amp;gt;{point.name}&amp;lt;/b&amp;gt;: {point.y:,.0f}',

        };

    

    params.colors =  ['#8edc00', '#e8eb00', '#e8aabb'];

    

</jsitem>

            <jsitem location="inlinesnippet" name="rerenderChart" cachelocation="false">var params = arguments[0],

$ = skuid.$;

skuid.$C('sk-10WKeA-87').render();</jsitem>

        </javascript>

        <actionsequences uniqueid="sk-2B8D-291"/>

    </resources>

    <styles>

        <styleitem type="background" bgtype="none"/>

    </styles>

</skuidpage>

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings