skuid line graph question

edited June 25, 2020 in Questions
I have an object with 12 custom fields denoting each of the months. I was wondering is it possible to create a line graph that would show each of those 12 fields as points on the x axis, while displaying the value range as the y axis?


  • Pat VachonPat Vachon 💎💎💎
    edited June 25, 2020
    You can use the graph and a date field to accomplish this without a custom field.
  • edited November 13, 2017
    The 12 custom fields are preexisting and used by other processes, so that's kind of what I have to work with. 
    For example lets assume it's a user record and I have 12 fields for sales (one for each month). Is there a way to construct a proper line graph from that in skuid?
  • edited December 20, 2016
    Is there a way to build my data points in javascript for this? If there is I could just manually construct the 12 points I need from each record.
  • edited June 3, 2020
    It sounds like you're aggregating some data onto a user record, then want to chart that aggregated data.

    Skuid makes this sort of thing pretty simple compared to SF. If you wanted to see won opportunities by owner, you'd create a model with the opportunity object, use conditions to get the won opps, and group by owner and the calendar month of the created date (or whatever date you want to use). Use this model to create a chart and you'll have data graphed by month and user. 

  • edited December 20, 2016
    Thanks for the reply Josh, but my needs are a little different than that. I have a single record that contains all of my data already. User was just the object I used to describe my situation. 

    My actual object is a representation of an customer, and we have 12 individual fields on the record that each show a value for a particular month of the year. I want to make a January - December line graph out of those values.
  • edited November 13, 2017
    Ok, still need help with this one. I've gone the HighCharts direction so I could define my data in javascript since my requirement makes standard charting an impossibility (as far as I can tell). I have the chart rendering it's legend, but no data points show up. 

    Can anyone help me identify what is wrong with this guy?
         var $ = skuid.$; <br> $(document.body).one('pageload',function(){ <br> var myModelRows = skuid.$M('mymodel').getRows(); <br> var chartSeries = []; <br> for(var index = 0; index < myModelRows.length; index++) { <br>   var rowData = buildRowData(myModelRows[index]);     console.log(rowData.split(",")); <br> chartSeries[index] = { <br> name: myModelRows[index].Account_Number__c, <br> data: rowData.split(",") }; <br> } <br> console.log(chartSeries); <br> var chart = $('#container').highcharts({ <br> xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, <br><br> yAxis: { ceiling: 100, floor: 0 }, <br><br> plotOptions: { series: { type: "line", allowPointSelect: true } }, <br><br>series: chartSeries }); }); <br><br> function buildRowData(dataRow) { <br> var data = dataRow.Jan__c + "," + dataRow.Feb__c + "," + dataRow.Mar__c + "," + dataRow.Apr__c + "," + dataRow.May__c + "," + dataRow.Jun__c + "," + dataRow.Jul__c + "," + dataRow.Aug__c + "," + dataRow.Sept__c + "," + dataRow.Oct__c + "," + dataRow.Nov__c + "," + dataRow.Dec__c; return data; <br> }
  • edited June 3, 2020
    I'm not a code expert, Jerry, and am having trouble deciphering exactly what you're doing without the full xml of the page...but it looks like you need to push your data into the chart once you've created the data series via a series: { data: [....],} call.imageimage
  • edited November 13, 2017
    I have looked at that documentation, and the code sample you've provided looks very similar to what I have. I think my problem is in how I create the 'data:'. But, I'm not sure.

    $(document.body).one('pageload',function(){ var myModelRows = skuid.$M('mymodel').getRows();
    var chartSeries = [];
    for(var index = 0; index < myModelRows.length; index++) {
    var rowData = buildRowData(myModelRows[index]);
    chartSeries[index] = {
    name: myModelRows[index].Account_Number__c,
    data: rowData.split(",") 
    var chart = $('#container').highcharts({
    xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    yAxis: { 
    ceiling: 100, 
    floor: 0 
    plotOptions: { 
    series: { 
    type: "line", 
    allowPointSelect: true 

    series: chartSeries 
    function buildRowData(dataRow) {
    var data = 
    dataRow.Jan__c + "," + 
    dataRow.Feb__c + "," + 
    dataRow.Mar__c + "," + 
    dataRow.Apr__c + "," + 
    dataRow.May__c + "," + 
    dataRow.Jun__c + "," + 
    dataRow.Jul__c + "," + 
    dataRow.Aug__c + "," + 
    dataRow.Sept__c + "," + 
    dataRow.Oct__c + "," + 
    dataRow.Nov__c + "," + 
    return data;

    There really isn't much to the xml outside of this pageload function.
  • Jacob CohenJacob Cohen ✭✭
    edited October 31, 2016
    Could you use an Aggregate model to group your data on the 12 fields, then aggregate what data you want to display in the agg fields (account id count, opp amount sum, etc)?

    Then for the chart: on the category axis use your grouping field (the 12) and for the Series use your aggregate data.

    This is all very hypothetical, but would that work?
  • edited November 13, 2017
    Thanks for the idea Jacob. I have actually come up for a solution to this and posted it on a related question here.

    The issue I had was that I didn't want a graph that compared a single value across multiple records. What I needed was a graph for a single record that just displayed all 12 records as they represented the same thing.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!