Using apex:chart in a custom object to create a graph particular to the object

Question

I'd like to preface this by saying that I'm rather new to Visualforce, and Apex.

I have a custom object that I have created, called Consumable Analysis. These objects are associated with Accounts and Contacts, furthermore one account or one contact can have multiple analyses associated with them.

I am trying to use Visualforce to create a graph that will be displayed on the page layout of the Consumable Analysis. The graphs are basically simple linear equations. I've created a proof-of-concept page by hard coding in the values.

Now I want to create it such that these values are taken from the Consumable Analysis it is set in. I have a controller extension I've created in hopes that this would accomplish the task but I can't seem to get it to work. I've tried utilizing apex:actionFunction as well but also without luck. I'm guessing there is something simple that I'm missing because I'm not terribly familiar with Visualforce yet.

Here is what I have so far:

<apex:page standardController="Consumable_Analysis__c" extensions="GraphCalcExtender">

<script>
//an array to hold data to be displayed
var data = new Array();
//upfront cost with MVS
var initialCost = 123800;
//subsequent cost with MVS
var subsqCost = 58800;
//the number of years to show in the graph
var years;
//the annual cost of the current method
var currentMethod = 117161;
//the current year
var startYear = 2016;
...
//start the initial year with $0.00 cost
data.push({'name':startYear, 'data1':0,'data2':0});

//set the years to display
years = yearCalc(subsqCost,initialCost,currentMethod,currentMethod);

//Genereate all the data
createLinearData(subsqCost,initialCost,currentMethod,currentMethod,years);

</script>

<apex:chart height="500" width="750" data="data" id="myGraph" >

      <apex:legend position="right" />

      <apex:axis type="Numeric" position="left" fields="data1"
        title="Total Cost of Method" grid="true"/>

      <apex:axis type="Category" position="bottom" fields="name"
        title="Years From Purchase"/>

     <apex:lineSeries title="MVS Cost Per Year" axis="left" fill="false" xField="name" yField="data1"
       markerSize="2" smooth="2" />

       <apex:lineSeries title="Current Cost Per Year" axis="left" fill="false" xField="name" yField="data2"
          markerSize="2"/>

</apex:chart>
</apex:page>

The initialCost, subsqCost, and currentMethod are the variables I want to initialize based on the Consumable Analysis fields. Any insight on how to do this would be greatly appreciated. Thanks so much!

Answer 1

Replace those fields with the field you want to use from your standard controller, in merge syntax. Example:

var startYear = {!Consumable_Analysis__c.Start_Year__c};
var someString = '{!Consumable_Analysis__c.Name}'; 

// Outputs: 

var startYear = 2016; 
var someString = 'Some Name';

Theres a number of formatting issues to worry about with this approach, such as needing to wrap text strings, and having to worry about breaking syntax from something you output on the page, but this will work if you do it right. The merge tags will be placed onto the layout and become literal values, as typed, and will be present in your javascript/html.