Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ReportChartCmp
<aura:component controller="ReportChartCntrl" implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<!-- load chart js library from static resource-->
<ltng:require scripts="/resource/Chart_Js/Chart.js-2.1.6/dist/Chart.bundle.js" />
<aura:attribute name="reports" type="list"/>
<aura:attribute name="chartObj" type="object" access="public"/>
<aura:attribute name="isChartReady" type="Boolean" default="false"/>
<aura:attribute name="chartType" type="list"/>
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>
<aura:attribute name="Spinner" type="boolean" default="false"/>
<aura:attribute name="property1" type="string"/>
<aura:attribute name="selectedReport" type="string"/>
<aura:attribute name="selectedChartType" type="string"/>
<div class="slds">
<div id="bodypart" style="background-color:white;">
<aura:if isTrue="{!v.Spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<div class="slds-page-header">
<lightning:icon iconName="utility:chart" alternativeText="Chart" size="small"/>
&nbsp;&nbsp;<b>MY CHART.JS</b>
</div>
<div class="slds-grid">
<div class="slds-col slds-size--4-of-12 d1">
<lightning:select aura:id="report" onchange="{!c.onSelectReportChange}" class="select" label="Select Report">
<aura:iteration items="{!v.reports}" var="level">
<option text="{!level.label}" value="{!level.value}" selected="{!level.selected}"/>
</aura:iteration>
</lightning:select>
</div>&nbsp;&nbsp;
<div class="slds-col slds-size--4-of-12">
<lightning:select aura:id="type" onchange="{!c.onSelectChartTypeChange}" class="select" label="Select Chart Type">
<aura:iteration items="{!v.chartType}" var="type">
<option text="{!type.label}" value="{!type.value}" selected="{!type.selected}"/>
</aura:iteration>
</lightning:select>
</div>
<div class="slds-col slds-size--4-of-12">
</div>
</div><br/>
<div aura:id="chartContainer" style=" ">
<canvas aura:id="myChart" id="{!v.property1}" /><!--reportChart-->
</div>
</div>
<div class="slds-page-header">
<div class="slds-grid">
<div class="slds-col slds-size--6-of-12">
Powered By: <a href="https://www.chartjs.org/">ChartJS</a>
</div>
<div class="slds-col slds-size--3-of-12">
</div>
<div class="slds-col slds-size--3-of-12">
<b> <a href="https://sfdclesson.com/" target="_blank">SFDC LESSONS</a></b>
</div>
</div>
</div>
</div>
</aura:component>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment