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

  • 1
  • Question
  • Updated 3 months ago
  • Answered
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. 
Photo of Matt Small

Matt Small

  • 876 Points 500 badge 2x thumb
  • Goofy

Posted 3 months ago

  • 1
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,120 Points 5k badge 2x thumb

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 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!