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: '&lt;b&gt;{point.name}&lt;/b&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>
