Use List data for Google line chart [closed]

Question

I'm struggling to figure out how to use List created by apex call to draw Google Line chart. Here is the list created by Apex class:

public static List<Data> getChartData() {
    List<Data> data = new List<Data>();
    data.add(new Data('Jul-16', 651, 19521));
    data.add(new Data('Aug-16', 651, 20172));
    data.add(new Data('Sep-16', 630, 20802));
    data.add(new Data('Oct-16', 651, 21453));
    data.add(new Data('Nov-16', 630, 22083));
    data.add(new Data('Dec-16', 651, 22734);
    return data;
}

public class Data {
    public String name { get; set; }
    public Integer data1 { get; set; }
    public Integer data2 { get; set; }
    public Data(String name, Integer data1, Integer data2) {
        this.name = name;
        this.data1 = data1;
        this.data2 = data2;
    }
}

And here is the JS on VF page which I'm using to render the chart.

<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'A');
      data.addColumn('number', 'B');
      data.addColumn('number', 'C');
      data.addRows([
        ['Jul',630,19521],
        ['Aug',651,20172],
        ['Sep',630,20802],
        ['Oct',651,21453],
        ['Nov',630,22083],
        ['Dec',651,22734],
        ]);

      var options = {
        height:600,
        width:900,
      };
      var chart1 = new google.visualization.LineChart(document.getElementById('line_chart-1'));
      chart1.draw(data, options);
    }

I can't figure out how to replace the data.addRows with the function to use the List from apex class (extension to VF page).

Thanks

Answer 1

If the Data inner class is solely used to wrap the data for the google chart, then you don't need such an wrapper, you can use List<List<Object>>; if your data being wrapped contains only primitive values.

Extension Controller:

public class ChartControllerExt {
    public String gChartData {get;set;}

    public ChartController(MainController controller){
        gChartData = JSON.serialize(ChartController.getChartData());
    }

    public static List<List<Object>> getChartData() {
        List<List<Object>> data = new List<List<Object>>();
        data.add(new List<Object>{'Jul-16', 651, 19521});
        ...
        return data;
    }
}

VF Page:

<apex:page controller="MainController" extension="ChartController">

    <script type="text/javascript">
        var rows = JSON.parse('{!JSENCODE(gChartData)}');
        google.charts.load("visualization", "1", {packages:["corechart"]});
        google.charts.setOnLoadCallback(drawChart);

        function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'A');
            data.addColumn('number', 'B');
            data.addColumn('number', 'C');
            data.addRows(rows);

            var options = {
            height:600,
            width:900,
            };
            var chart1 = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart1.draw(data, options);
        }

   </script>

    <div id="chart_div"></div>
</apex:page>

Answer 2

There may be better answer to this. I followed following approach.

1) I converted the wrapper list to JSON using,

jsonString = JSON.serialize(getChartData());

2) Then I manually formatted the string to get the required format to feed to the google chart like this:

jsonString = jsonString.replaceAll('"data1":','');

3) Then I used the string directly in the Javascript which gave me correct output.

Here is the complete code:

Controller:

public class PieChartController {
    public String jsonString {get;set;}
    public PieChartController()
    {
        jsonString = JSON.serialize(getChartData());
        jsonString = jsonString.replaceAll('\\{','[');
        jsonString = jsonString.replaceAll('\\}',']');
        jsonString = jsonString.replaceAll('"data1":','');
        jsonString = jsonString.replaceAll('"data2":','');
        jsonString = jsonString.replaceAll('"name":','');
    }

    public static List<Data> getChartData() {
    List<Data> data = new List<Data>();
    data.add(new Data('Jul-16', 651, 19521));
    data.add(new Data('Aug-16', 651, 20172));
    data.add(new Data('Sep-16', 630, 20802));
    data.add(new Data('Oct-16', 651, 21453));
    data.add(new Data('Nov-16', 630, 22083));
    data.add(new Data('Dec-16', 651, 22734));
    return data;
}

public class Data {
    public String name { get; set; }
    public Integer data1 { get; set; }
    public Integer data2 { get; set; }
    public Data(String name, Integer data1, Integer data2) {
        this.name = name;
        this.data1 = data1;
        this.data2 = data2;
    }

}
}

VF page:

<apex:page doctype="html-5.0" controller="PieChartController">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
      <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <Script>
    var quoteList = {!jsonString};
    google.charts.load("visualization", "1", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'A');
      data.addColumn('number', 'B');
      data.addColumn('number', 'C');
      data.addRows({!jsonString});

      var options = {
        height:600,
        width:900,
      };
      var chart1 = new google.visualization.LineChart(document.getElementById('chart_div'));
      chart1.draw(data, options);
    }
   </Script>


    <div id="chart_div"></div>
</apex:page>

Hope it helps! Thanks!