Scribd
Upload
3 views2 pages

ChartJS Data Handling in Apex Component

The document outlines a JavaScript controller for a chart component that initializes chart settings based on a legend display, loads chart data from an Apex data provider, and updates the chart when new data or chart type is provided. It includes methods for creating the chart, updating it based on events, and changing the chart type while ensuring the canvas is cleaned before redrawing. The component manages the chart's state and properties effectively to ensure accurate rendering.

Uploaded by

Balayesu Chilakalapudi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views2 pages

ChartJS Data Handling in Apex Component

The document outlines a JavaScript controller for a chart component that initializes chart settings based on a legend display, loads chart data from an Apex data provider, and updates the chart when new data or chart type is provided. It includes methods for creating the chart, updating it based on events, and changing the chart type while ensuring the canvas is cleaned before redrawing. The component manages the chart's state and properties effectively to ensure accurate rendering.

Uploaded by

Balayesu Chilakalapudi
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

({

doInit : function(component, event, helper){


if ([Link]("[Link]") == true){
[Link]("[Link]", "pure-u-1-2");
} else {
[Link]("[Link]", "pure-u-1-1");
}
},
////
// Load data from Apex Data Provider and draw chart.
createChart : function(component, event, helper){
var action = [Link]("[Link]");
[Link]({"dataProviderName":[Link]("[Link]")});
[Link](this, function(a){
var response = [Link]();
if (response == null || response == "" || response == "[]" || response
== "{}"){
[Link]("[Link]", true);
return;
} else {
[Link]("[Link]", false);
}
[Link](component, [Link](response), {});
});
$[Link](action);
},
////
// updateChart is triggered by ChartDateUpdate event. If event provide chart
data, updateChart draws chart with it. Otherwise, do the same as createChart.
updateChart : function(component, event, helper){
var chartData = [Link]("chartData");
var componentName = [Link]("componentName");
if (chartData == null || componentName == null){
var action = [Link]("[Link]");

[Link]({"dataProviderName":[Link]("[Link]")});
[Link](this, function(a){
var response = [Link]();
if (response == null || response == "" || response == "[]" ||
response == "{}"){
[Link]("[Link]", true);
return;
} else {
[Link]("[Link]", false);
}
[Link](component, [Link](response), {});
});
$[Link](action);
} else {
[Link](component, chartData, {});
}
},
////
// changeChartType is triggered when ChartTypeChange event is fired.
changeChartType : function(component, event, helper){
// Retrieve target component id and this component's global id.
// If this component instance is not target, exit.
var globalId = [Link]();
if (globalId != [Link]("componentId")){
return;
}

// Retrieve chart instance and destroy to clean the canvas.


var chart = [Link]("[Link]");
[Link]();

// Draw new chart with new chart type and existing chart data & option.
var ctx = [Link](globalId + "_chart").getContext("2d");
chart = new Chart(ctx)[[Link]("chartType")]
([Link]("[Link]"), [Link]("[Link]"));

// Set new chart instance to component property.


[Link]("[Link]", chart);
[Link]("[Link]", [Link]("chartType"));
}
})

You might also like