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

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. 


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>&amp;lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&amp;gt;&amp;lt;/div&amp;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="<a href="https://code.highcharts.com/highcharts.js&quot;>var">https://code.highcharts.com/highcharts.js">var</a> params = arguments[0],$ = skuid.$;</jsitem> <jsitem location="external" name="Treemap" cachelocation="false" url="<a href="https://code.highcharts.com/modules/treemap.js&quot;>var" title="Link: https://code.highcharts.com/modules/treemap.js&quot;>var">https://code.highcharts.com/modules/treemap.js">var</a> 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: <a href="https://www.highcharts.com/demo/treemap-with-levels" title="Link: https://www.highcharts.com/demo/treemap-with-levels">https://www.highcharts.com/demo/treemap-with-levels</a> 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