is there a way to set the unique id of a page component in javascript?

Alternately, is it possible to access information from the context row using merge syntax. I could assign the unique Id to the control that way if there is.

You should be able to set the context on the chart component and you should be good to go.

No need for js.

I had to build my chart in highcharts because the source of my data is not compatible with the way skuids chart components are populated. I had a question floating around about how to use the skuid chart for my needs, but that didn’t got a good answer.

https://community.skuid.com/t/skuid-line-graph-question

Not sure how I would proceed. I’d first make absolutely sure the data you need can’t be provided by a model with a Before Render Snippet.

I have thought about making separate models that I could chart from the initial model that holds my data, allowing me to create data that the standard charts could handle. The issue I have with that is the record I’m using is a child record, and the parent records could have several hundred of them… I don’t want to make 12x the number of models I already have…

Where’s the data coming from now then?

It’s coming from the original records, with highcharts, I can just plug my data points in

$(‘#container’).highcharts({
title: ‘Monthly Usage’,
chart: {
renderTo: document.getElementById(“#container”)
},
xAxis: {
categories: [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sep’, ‘Oct’, ‘Nov’, ‘Dec’]
},
yAxis: {
title: {text: ‘Usage’}
},
plotOptions: {
series: {
type: “line”
}
},
series: [{
name: iqModelRow.Utility_Account_Number__c,
data: [iqModelRow.Jan_Load__c, iqModelRow.Feb_Load__c, iqModelRow.Mar_Load__c, iqModelRow.Apr_Load__c,
iqModelRow.May_Load__c, iqModelRow.Jun_Load__c, iqModelRow.Jul_Load__c, iqModelRow.Aug_Load__c,
iqModelRow.Sept_Load__c, iqModelRow.Oct_Load__c, iqModelRow.Nov_Load__c, iqModelRow.Dec_Load__c]
}]
});


If there were a way to just plug datapoints of a single record into a skuid line chart I wouldn’t have this issue I think.

You can achieve this using a snippet I think. You’d do the same type of thing are you’ve done above, but then you’d gain the ability to use Context of the Skuid chart component.

I can load data into a chart using the before render snippet? I looked for examples of this but was unable to find any.

The series can be updated as necessary. Here’s a snippet we used on Opps. You can alter the series as you see fit.

// this snippet has been created in order to sort the series in the chart by the stage order // in the sales process assigned to the Prospect Clinic Record Type var chartObj = arguments[0], Opportunities = skuid.$M('Opportunities'), StageName, sortedSeries= [], $ = skuid.$; // to get the sort order, we need to find the Stage field metadata in the Opportunities models list of fields $.each(Opportunities.fields, function(f,field){ if (field.id === "StageName"){ StageName = field; return false; } }); // now use this field to create a temporary array to replace the current series // loop through entries in order to then find the corresponding series by the same name // in order to add it to the temporary array $.each(StageName.picklistEntries, function(p,entry){ $.each(chartObj.series, function(s,series){ if (series.name === entry.label){ sortedSeries.push(series); } }); }); // empty original series chartObj.series.length = 0; // insert sorted chart $.each(sortedSeries,function(ss,sseries){ chartObj.series.push(sseries); }); // console.log(chartObj); // console.log(Opportunities);<br>

I’ll give this a shot. I think you might just be my hero 🙂

Pat is everyone’s hero.

How do we set the labels for the x axis? All I’m getting is an index for the points I have.

Dunno. I typically either do a console.log of chartObj or add a watch to the variable to explore it in order to figure out what’s possible.

Figured it all out finally, thanks to Pat for all of his help :)…
Our organization has one object with a record for each month that I needed a line graph representation of.
I created an additional model that I update with the Context Row record
I created a row action that opened a drawer
Placed a skuid chart in that drawer
and used a before render snippet to fill it with what was needed:
below is the snippet I used, hope this helps someone in the future.

var params = arguments[0], $ = skuid.$;
var intake = skuid.$M(‘modelContainingContextRowRecord’).getFirstRow();
//add intake data as series in params object which is the chart we are rendering.
//also setup the x axis value labels and the y axis label
var chart = params;
var newSeries = [{
name: intake.Account_Number__c,
data: [intake.Jan_Data__c, intake.Feb_Data__c, intake.Mar_Data__c,
intake.Apr_Data__c, intake.May_Data__c, intake.Jun_Data__c,
intake.Jul_Data__c, intake.Aug_Data__c, intake.Sept_Data__c,
intake.Oct_Data__c, intake.Nov_Data__c, intake.Dec_Data__c]
}];

chart.xAxis[0].categories = [‘Jan’, ‘Feb’, ‘Mar’, ‘Apr’, ‘May’, ‘Jun’, ‘Jul’, ‘Aug’, ‘Sept’, ‘Oct’, ‘Nov’, ‘Dec’];
chart.series = newSeries;


This question is now Answered, I am not sure how to mark it as such though.