简体   繁体   中英

Google chart line: how to connect dots properly using a continuous axes

I have a problem on a Google Chart line graph. I'm trying to use a continuous axis, but I obtain this:

图表

As you can see, I'm not able to connecting dots using the X (date), but the dots are connect using the Y. How can I change this graph and obtain a "normal" graph?

The code that I've used is this one:

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Data');
  data.addColumn('number', 'Prestazione');
  data.addRows([
    [new Date(2005, 05, 01), 9.17],
    [new Date(2005, 07, 01), 9.2],
    [new Date(2006, 07, 07), 8.7],
    [new Date(2006, 04, 08), 8.84],
    [new Date(2005, 10, 08), 9.09],
    [new Date(2006, 06, 10), 8.58],
    [new Date(2006, 06, 10), 8.66],
    [new Date(2005, 07, 13), 9.2],
    [new Date(2006, 09, 13), 8.8],
    [new Date(2006, 07, 14), 8.71],
    [new Date(2005, 07, 15), 8.7],
    [new Date(2008, 01, 20), 8.50],
    [new Date(2005, 05, 21), 9.0],
    [new Date(2006, 05, 27), 8.6],
    [new Date(2006, 06, 28), 8.7],
  ]);

  var options = {
    title: '',
    pointSize: 5,
    curveType: 'function',
    legend: 'none',
    explorer: {}
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div01'));
  chart.draw(data, options);
}

This is because line chart in Google chart doesnt order the data by itself based on the x axis values. If you want to have a continuous graph, you should sort the data based on x-axis value (timestamp in your case) and then pass it to Google charts.

  1. You can use data.sort([{column: 0}]); for sorting it based on x-axis, Here column:0 indicates x-axis. https://developers.google.com/chart/interactive/docs/reference#DataTable_getSortedRows
  2. If the value you are trying to pass is through some xml or json and it has null values inside it will not plot properly and will be scattered or as dotted lines in line graph so to plot them, have a condition to remove all null values and then it will plot correctly.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM