Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
735 views
in Technique[技术] by (71.8m points)

javascript - Y-Axis format on Google Charts dual Y-Axis Line

I would like to format the Y Axis of my google Dual Y Axis Line Chart. Here the code I'm using:

<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', 'corechart']});
  google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var chartDiv = document.getElementById('chart_div');

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', "Average Pressure");
  data.addColumn('number', "Average Temperature");

  data.addRows([
[new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
[new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
[new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
[new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
(...snip data...)
[new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
[new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
[new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
[new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
[new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
[new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
[new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
[new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
[new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
[new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
  ]);
  var materialOptions = {
    chart: {
      title: 'Average Pressure and Temperatures'
    },
    width: 1200,
    height: 600,
    series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {axis: 'Pressure'},
      1: {axis: 'Temperature'}
    },
    axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
        Temps: {label: 'Pressure'},
        Daylight: {label: 'Temps (Celsius)'}
      }
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    var classicChart = new google.visualization.LineChart(chartDiv);
    materialChart.draw(data, materialOptions);
    button.innerText = 'Change to Classic';
    button.onclick = drawClassicChart;
  }
  drawMaterialChart();
}
    </script>
  </head>
  <body>
  <br><br>
  <div id="chart_div"></div>
  </body>
</html>

I would like that the Y Axis is able to display the data not rounded (now it shows only 1K value and not with decimal) on the Y axis (for bot Y axies) as well on the tooltip message. The tooltip message shows on the pressure values 1K always and on the temperature values, the values without decimal...

Could someone help me?

Thanks!

Simon

PS: The data is created dynamically from a php script, but thats not important now :)

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

use NumberFormat to format the data

this will set the format of the tooltip...

// create formatter
var formatNumber = new google.visualization.NumberFormat({pattern: '#,##0.0'});

// format column 1 - Pressure
formatNumber.format(data, 1);

// format column 2 - Temperature
formatNumber.format(data, 2);

to format both y-axis', add this to materialOptions...

vAxis: {
  format: '#,##0.0'
}

also recommend using google.charts.Line.convertOptions with Material charts

see following working snippet...

google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var chartDiv = document.getElementById('chart_div');

  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', "Average Pressure");
  data.addColumn('number', "Average Temperature");

  data.addRows([
    [new Date(2016, 08, 29, 00, 03, 00), 1019.2, 23.7],
    [new Date(2016, 08, 29, 00, 06, 00), 1019.27, 23.6],
    [new Date(2016, 08, 29, 00, 09, 00), 1019.37, 23.6],
    [new Date(2016, 08, 29, 00, 12, 00), 1019.34, 23.6],
    [new Date(2016, 08, 29, 14, 33, 00), 1014.89, 30.8],
    [new Date(2016, 08, 29, 14, 36, 00), 1014.81, 30.6],
    [new Date(2016, 08, 29, 14, 39, 00), 1014.82, 30.8],
    [new Date(2016, 08, 29, 14, 42, 00), 1014.76, 31.1],
    [new Date(2016, 08, 29, 14, 45, 00), 1014.7, 31],
    [new Date(2016, 08, 29, 14, 48, 00), 1014.67, 30.6],
    [new Date(2016, 08, 29, 14, 51, 00), 1014.73, 31],
    [new Date(2016, 08, 29, 14, 54, 00), 1014.74, 30.7],
    [new Date(2016, 08, 29, 14, 57, 00), 1014.77, 30.5],
    [new Date(2016, 08, 29, 15, 00, 00), 1014.75, 30.1],
  ]);

  var formatPattern = '#,##0.0';
  var formatNumber = new google.visualization.NumberFormat({pattern: formatPattern});
  formatNumber.format(data, 1);
  formatNumber.format(data, 2);

  var materialOptions = {
    chart: {
      title: 'Average Pressure and Temperatures'
    },
    width: 1200,
    height: 600,
    series: {
      0: {axis: 'Pressure'},
      1: {axis: 'Temperature'}
    },
    axes: {
      y: {
        Temps: {
          label: 'Pressure'
        },
        Daylight: {
          label: 'Temps (Celsius)'
        }
      }
    },
    vAxis: {
      format: formatPattern
    }
  };

  function drawMaterialChart() {
    var materialChart = new google.charts.Line(chartDiv);
    materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
  }
  drawMaterialChart();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...