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

Jerry

I'm opening a drawer through the multiple actions option on my table, and in the drawer I'm creating a line graph using Highcharts that represents data from the record on the table.

Everything works great with one catch:

Because I have to create a division with a unique id to cast my chart into, I'm running into an issue where if I open a drawer, and then immediately open a second without closing the first both graphs now show the data for the second record instead of their appropriate graph.

The bug gets worse the more drawers I open.

My question is: Is it possible to locate the control I want in javascript, and programmatically change it's unique id so that no other drawers will overwrite the graph in the first drawer. I would like to set the id using information from the context row that I know won't be duplicated.

Jerry

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.

Pat Vachon

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

No need for js.

Jerry

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/skuid/topics/skuid-line-graph-question

Pat Vachon

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.

Jerry

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...

Pat Vachon

Where's the data coming from now then?

Jerry

It's coming from the original records, with highcharts, I can just plug my data points in
<code>
$('#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]
    }]
});
</code>

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.

Pat Vachon

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.

Jerry

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

Pat Vachon

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);

Jerry

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

Matt Sones

Pat is everyone's hero.

Jerry

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

Pat Vachon

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.

Jerry

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.
<code>
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;
</code>

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