Embed Kendo UI Chart

  • 1
  • Problem
  • Updated 4 years ago
  • (Edited)
Hi, 

Attempting to embed a KendoUI Chart in a Template component.  I've added the KendoUI Static Resource.  Not sure how to properly code a Inline JavaScript snippet.  

Here's the VF Page code that I am trying to replicate in Skuid:

<apex:page > 
<head>
<apex:stylesheet value="{!URLFOR($Resource.KendoUI, '/styles/kendo.common.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.KendoUI, '/styles/kendo.default.min.css')}" />
<apex:stylesheet value="{!URLFOR($Resource.KendoUI, '/styles/kendo.dataviz.min.css')}" />
<apex:stylesheet value="{!URLFOR($Resource.KendoUI, '/styles/kendo.dataviz.default.min.css')}" />

<apex:includeScript value="{!URLFOR($Resource.KendoUI, '/js/jquery.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.KendoUI, '/js/kendo.all.min.js')}"/>
<apex:includeScript value="{!URLFOR($Resource.KendoUI, '/js/angular.min.js')}"/>
</head>
<body>
<div id="chart"></div>
<script>
function createChart() {
$("#chart").kendoChart({
title: {
text: "Job Growth for 2011"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bubble"
},
series: [{
data: [{
x: -2500,
y: 50000,
size: 500000,
category: "Microsoft"
}, {
x: 500,
y: 110000,
size: 7600000,
category: "Starbucks"
}, {
x: 7000,
y: 19000,
size: 700000,
category: "Google"
}, {
x: 1400,
y: 150000,
size: 700000,
category: "Publix Super Markets"
}, {
x: 2400,
y: 30000,
size: 300000,
category: "PricewaterhouseCoopers"
}, {
x: 2450,
y: 34000,
size: 90000,
category: "Cisco"
}, {
x: 2700,
y: 34000,
size: 400000,
category: "Accenture"
}, {
x: 2900,
y: 40000,
size: 450000,
category: "Deloitte"
}, {
x: 3000,
y: 55000,
size: 900000,
category: "Whole Foods Market"
}]
}],
xAxis: {
labels: {
format: "{0:N0}",
skip: 1
},
axisCrossingValue: -5000,
majorUnit: 2000,
plotBands: [{
from: -5000,
to: 0,
color: "#00f",
opacity: 0.05
}]
},
yAxis: {
labels: {
format: "{0:N0}"
},
line: {
width: 0
}
},
tooltip: {
visible: true,
format: "{3}: {2:N0} applications",
opacity: 1
}
});
}
$(document).ready(createChart); </script>
</body>
</apex:page>
Any help would be appreciated.

Regards,
Irvin
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
There are two strategies that could be used here. 

1. You could wrap the VF page in an iFrame in the template component.   Don't change your VF code - just call it from the iFrame. 

2. You could take the contents of your VF page and adjust them so tehy are Javascript resources in your skuid page.  

A: Each referenced resource in the script above would need to be resources called from the Static Resource.  (See this help file:  http://help.skuidify.com/m/supercharge-your-ui/l/102514-including-custom-javascript-in-a-skuid-page

B: The script statement in the VF page would become a Inline Javascript resource. 

C: Finally - a template component would be used to actually put the "Chart" div on the page. 

See this forum post where Glenn Elliott outines his strategy for including Kendo charts on Skuid pages.   https://community.skuidify.com/skuid/topics/google_charts_in_skuid_template  (I know it says Google Charts - but Glenn describes his Kendo Strategy in some detail). 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glad to hear!  Would you mind posting a picture of what your finished page looks like?  We love to see some of these more advanced use cases..
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Here you go:

Photo of Glenn Elliott

Glenn Elliott, Champion

  • 7,738 Points 5k badge 2x thumb
Looks great!
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Yep, waiting for the Skuid bits.