skuid line graph question
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?
Tagged:
1
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Comments
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?
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.
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.
Can anyone help me identify what is wrong with this guy?
&nbsp; &nbsp; &nbsp;var $ = skuid.$; <br>&nbsp;$(document.body).one('pageload',function(){ <br>&nbsp;var myModelRows = skuid.$M('mymodel').getRows(); <br>&nbsp;var chartSeries = []; <br>&nbsp;for(var index = 0; index < myModelRows.length; index++) { <br>&nbsp; &nbsp;var rowData = buildRowData(myModelRows[index]); &nbsp; &nbsp; console.log(rowData.split(",")); <br>&nbsp;chartSeries[index] = { <br>&nbsp;name: myModelRows[index].Account_Number__c, <br>&nbsp;data: rowData.split(",") }; <br>&nbsp;} <br>&nbsp;console.log(chartSeries); <br>&nbsp;var chart = $('#container').highcharts({ <br>&nbsp;xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, <br><br>&nbsp;yAxis: { ceiling: 100, floor: 0 }, <br><br>&nbsp;plotOptions: { series: { type: "line", allowPointSelect: true } }, <br><br>series: chartSeries }); }); <br><br>&nbsp;function buildRowData(dataRow) { <br>&nbsp;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>&nbsp;}
<code>
$(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]);
console.log(rowData.split(","));
chartSeries[index] = {
name: myModelRows[index].Account_Number__c,
data: rowData.split(",")
};
}
console.log(chartSeries);
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 + "," +
dataRow.Dec__c;
return data;
}
});
</code>
There really isn't much to the xml outside of this pageload function.
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?
https://community.skuid.com/skuid/topics/is-there-a-way-to-set-the-unique-id-of-a-page-component-in-...
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.