Charts showing the difference between discrete and continuous axes

by secretgspot

HTML

<script src="https://www.google.com/jsapi?fake=.js"></script>
These two charts have the same data, except one uses a string-based discrete domain column and the other uses a number-based continuous domain column:
<div id="discrete_chart_div"></div>
<div id="continuous_chart_div"></div>

JavaScript

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

function drawChart() {
    var discreteData = new google.visualization.DataTable();
    discreteData.addColumn('string', 'Number');
    discreteData.addColumn('number', 'Value');
    
    discreteData.addRows([
        ['1.492', 10],
        ['30.701', 17],
        ['127.469', 6],
        ['749.382', 11]
    ]);
    
    var discreteChart = new google.visualization.LineChart(document.getElementById('discrete_chart_div'));
    discreteChart.draw(discreteData, {
        title: 'Discrete Axis Line Chart'
    });
    
    var continuousData = new google.visualization.DataTable();
    continuousData.addColumn('number', 'Number');
    continuousData.addColumn('number', 'Value');
    
    continuousData.addRows([
        [1.492, 10],
        [30.701, 17],
        [127.469, 6],
        [749.382, 11]
    ]);
    
    var continuousChart = new google.visualization.LineChart(document.getElementById('continuous_chart_div'));
    continuousChart.draw(continuousData, {
        title: 'Continuous Axis Line Chart'
    });
}