I have developed burn down Chart in salesforce facing issues while at the time of displaying the data on X axis

233 views
Skip to first unread message

Gurunath Jinka

unread,
Apr 13, 2016, 7:37:53 AM4/13/16
to Google Visualization API
Hi Team,

I have developed burn down Chart in salesforce, however facing one issue while at the time of displaying the data on X axis please help me to get resolve this.

From the image I want align the X axis like 0 1 2 3 4 5 6 7 8 .......14 15,

here is my code...

<apex:page standardController="Agile_Sprint__c" showHeader="false" sidebar="false" extensions="BurnDown_Chart">
<html>
<head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['line']}); 
     <!-- google.charts.load('current', {'packages':['corechart']}); -->  <!-- By Niranjan-->
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Planned');
      data.addColumn('number', 'Actuals');
      
      alert("{!chartRow}");
     // var testchartrow = ,;
      //data.addRows([[10,0.00,null],[11,0.00,null],[12,0.00,null],[15,0.00,null],[16,0.00,null],[17,0.00,null],[18,0.00,null],[19,0.00,null],[22,0.00,null],[30,0.00,null],]);
      data.addRows([{!chartRow}]);
      var options = {
        chart: {
          title: 'Burn Down Chart',
          subtitle: 'By Story Points'
        },
        width: 600,
        height: 400,
        vAxis: { gridlines: { count: 4 } },
        axes: {
          x: {
            0: {side: 'bottom',format:'#'}
          }
        }               
      };

       var chart = new google.charts.Line(document.getElementById('line_top_x')); 
     <!-- var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); --> <!-- By Niranjan-->
      console.log("data ------------{!chartRow}");
      chart.draw(data, options);
     
    }
  </script>
</head>
<body>
   <div id="line_top_x"></div> 
  <!-- <div id="curve_chart"></div>   -->    <!-- By Niranjan -->
</body>
</html>
</apex:page>


Thanks in Advance.

Regards,
Guruanath


BurnDown.PNG

Daniel LaLiberte

unread,
Apr 15, 2016, 11:11:04 AM4/15/16
to Google Visualization API
Hi Gurunath,

It appears you are mixing options from the LineChart and the material Line chart, and that is guaranteed to cause confusion.

I don't know what you mean by "I want align the X axis like 0 1 2 3 4 5 6 7 8 .......14 15,".  Maybe you should draw a sketch of what you want, rather than showing what you are getting.  

It sounds like maybe you want to see a single tick label for each of those values.  If so, you could try setting hAxis: { gridlines: { count: 16 } }.   Or set the ticks explicitly:  hAxis: { ticks: [0, 1, 2, 3, ... 15] }.   But be aware that both of these options only work with the corechart LineChart rather than the material Line chart.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/806c8ae8-d3ad-47d6-9674-2e6da6cf54a0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--
Reply all
Reply to author
Forward
0 new messages