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

  • 1
  • Question
  • Updated 11 months ago
  • Answered
Hey team,

I want to insert the insights from this example http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/bu...

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

  • 1,182 Points 1k badge 2x thumb
  • Goofy

Posted 11 months ago

  • 1
Photo of Amy Dewaal

Amy Dewaal, Official Rep

  • 8,200 Points 5k badge 2x thumb
Matt, 

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="https://code.highcharts.com/highcharts.js">var params = arguments[0],$ = skuid.$;</jsitem>         <jsitem location="external" name="Treemap" cachelocation="false" url="https://code.highcharts.com/modules/treemap.js">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: https://www.highcharts.com/demo/treemap-with-levels        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!

Thanks!
Amy