Does anyone have any experience using a custom java script insights?

Matt SmallMatt Small Member
edited May 2018 in Questions
Hey team,

I want to insert the insights from this example

onto my skuid page. 

Not really sure where to start. 

Does anyone know a good reference for setting this up. I want the graph to have it's field values change according to it's respective field inside my skuid models. 


  • Amy DewaalAmy Dewaal Member, Skuad ✭✭
    edited May 2018

    Check out this example page XML:
    <skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" tabtooverride="Opportunity">   <models>         <model id="OpportunityAgg" limit="100" query="true" createrowifnonefound="false" sobject="Opportunity" datasource="salesforce" type="aggregate">         <fields><field id="Amount" name="sumAmount" function="SUM"/></fields>         <conditions/>         <actions/>      <groupby method="simple"><field id="StageName" name="stageName"/></groupby></model></models>   <components>      <wrapper uniqueid="sk-3ph6ah-90">                     <components>                        <template multiple="true" uniqueid="sk-3ph8ni-97" allowhtml="true" model="">                           <contents>&lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</contents>                        <renderconditions logictype="and"/></template>                     </components>                     <styles>                        <styleitem type="background" bgtype="none"/>                        <styleitem type="border"/>                        <styleitem type="size" width="custom" height="custom">                           <styles>                              <styleitem property="min-width" value="310px"/>                              <styleitem property="min-height" value="400px"/>                           </styles>                        </styleitem>                     </styles>                  </wrapper><skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" model="OpportunityAgg" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-1HVg6G-1423">    <fields>        <field id="StageName" name="stageName" hideable="true" uniqueid="fi-1HVi0y-1432"/>        <field id="Amount" name="sumAmount" hideable="true" uniqueid="fi-1HVi0z-1433"/>    </fields>    <rowactions/>    <massactions usefirstitemasdefault="true"/>    <views>        <view type="standard"/>    </views></skootable>               </components>   <resources>      <labels/>      <css/>      <javascript>         <jsitem location="external" name="Highcharts" cachelocation="false" url="">var params = arguments[0],$ = skuid.$;</jsitem>         <jsitem location="external" name="Treemap" cachelocation="false" url="var">">var params = arguments[0],$ = skuid.$;</jsitem>         <jsitem location="inline" name="pageLoad" cachelocation="false" url="">(function(skuid){var $ = skuid.$;$(document.body).one('pageload',function(){            var opps = skuid.model.getModel('OpportunityAgg');        var rows = opps.getRows();                //define first level of treemap:        var oppdata = [];        oppdata.push({id: 'I', name: 'In Progress Stages', color:"#EC2500"});        oppdata.push({id: 'C', name: 'Closed Stages', color:'#EC9800'});        //define second level of treemap        $.each(rows, function(i, row){           var sName = row.stageName;           if (sName == 'Closed Won' || sName == 'Closed Lost') {                oppdata.push({name: row.stageName, parent:'C', value:row.sumAmount});           } else {               oppdata.push({name: row.stageName, parent:'I', value:row.sumAmount});           }        });                /*        var exampledata = [{                    id: 'A',                    name: 'Apples',                    color: "#EC2500"                }, {                    id: 'B',                    name: 'Bananas',                    color: "#ECE100"                }, {                    id: 'O',                    name: 'Oranges',                    color: '#EC9800'                }, {                    name: 'Anne',                    parent: 'A',                    value: 5                }, {                    name: 'Rick',                    parent: 'A',                    value: 3                }, {                    name: 'Peter',                    parent: 'A',                    value: 4                }, {                    name: 'Anne',                    parent: 'B',                    value: 4                }, {                    name: 'Rick',                    parent: 'B',                    value: 10                }, {                    name: 'Peter',                    parent: 'B',                    value: 1                }, {                    name: 'Anne',                    parent: 'O',                    value: 1                }, {                    name: 'Rick',                    parent: 'O',                    value: 3                }, {                    name: 'Peter',                    parent: 'O',                    value: 3                }, {                    name: 'Susanne',                    parent: 'Kiwi',                    value: 2,                    color: '#9EDE00'                }];        */                                         $('#container').highcharts({            series: [{                type: "treemap",                layoutAlgorithm: 'stripes',                alternateStartingDirection: true,                levels: [{                    level: 1,                    layoutAlgorithm: 'sliceAndDice',                    dataLabels: {                        enabled: true,                        align: 'left',                        verticalAlign: 'top',                        style: {                            fontSize: '15px',                            fontWeight: 'bold'                        }                    }                }],                data: oppdata            }],            title: {                text: 'Opportunity Revenue By Stage'            }        });});})(skuid);</jsitem>      </javascript>   </resources>   <styles>      <styleitem type="background" bgtype="none"/>   </styles></skuidpage> 
    I extended the example that Irvin gave here to add in an (admittedly contrived) example based on opportunity data. It's not the same type of highchart as you want to show, but I hope it will get you started in the right direction!

Sign In or Register to comment.