function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Sharp BESharp BE 

Highcharts Apex Controller Class

Could someone help me out with kickstarting me with writing an Apex Class which acts as a controller for a Highchart class in a Visualforce page.

The graph will be displayed in a customer object "Project__c" and will need to visualize it's associated budget allocation from the Project Manager. 
X-Axis will represent a field called "Timing_c" and the Y-Axis will represent 3 diffrent currency fields.

How do I need to start with this data table? Is there any tutorial guiding me how to kickstart this programming? I really want to learn this, but not sure where to start.

Thanks in advance!

Visualforce page in its current state: 
<apex:page Controller="BudgetGraphController">
        <head>
            <apex:stylesheet value="{!URLFOR($Resource.dataTable, '/dataTable/jquery.dataTables.min.css')}"/>
        <apex:includeScript value="{!URLFOR($Resource.dataTable, '/dataTable/jquery-1.12.4.js')}"/>
        <apex:includeScript value="{!URLFOR($Resource.dataTable, '/dataTable/jquery.dataTables.min.js')}"/>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/xrange.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
        <link rel="stylesheet" href="/resources/demos/style.css"/>
     
    </head>
   <body width="100%">
    <apex:pageBlock title="Project Budget">
       <apex:pageBlockSection >
       </apex:pageBlockSection>
        <div id="container" style="width:100%;height:500px">
<script>
document.addEventListener('DOMContentLoaded', function () {
        var myChart = Highcharts.chart('container', {
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Project Budget Visualization'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Budget (€)'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });
            </script>
     </div>
            </apex:pageBlock>
    </body>
</apex:page>