google line chart using start and end date

Question

I have a start date(01 jan) and end date(31 dec). There are three persons taking photos in between this period.

for example :

var chartData = {
  "period":{"startDate":"01 jan","endDate":"31 Dec"},
  "person1":[{"date":"01 feb","photos":5},{"date":"15 aug","photos":5}, {"date":"20 dec","photos":5}],
  "person2":[{"date":"25 feb","photos":2},{"date":"18 july","photos":8},{"date":"05 nov","photos":2}],
  "person3":[{"date":"01 march","photos":4},{"date":"15 aug","photos":1}]
}

I want to create chart by using above data.

Example Chart:

Note: x-axis should be display months in mmm format

Answer 1

You could consider to draw it via Google Line Chart with series. Since the specified format is not compatible with Google Chart JSON format, the below example demonstrates how to convert it and display:

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

function drawChart() {
    var jsonData = {
        "period": {
            "startDate": "01 jan",
            "endDate": "31 Dec"
        },
        "person1": [
            {
                "date": "01 feb",
                "photos": 5
            },
            {
                "date": "15 aug",
                "photos": 5
            },
            {
                "date": "20 dec",
                "photos": 5
            }
        ],
        "person2": [
            {
                "date": "25 feb",
                "photos": 2
            },
            {
                "date": "18 july",
                "photos": 8
            },
            {
                "date": "05 nov",
                "photos": 2
            }
        ],
        "person3": [
            {
                "date": "01 march",
                "photos": 4
            },
            {
                "date": "15 aug",
                "photos": 1
            }
        ]
    };


    var data = {
        "cols": [],
        "rows": []
    };

    //columns
    for (var key in jsonData) {
        if (jsonData.hasOwnProperty(key)) {
            addColumn(data, key, (key === "period" ? "date" : "number"));
        }
    }

    var columnPositions = { "person1": 1, "person2": 2, "person3": 3 };

    //rows
    for (var key in jsonData) {
        if (jsonData.hasOwnProperty(key)) {
            if (key == "period") {
                addRow(data, [parsePeriod(jsonData[key].startDate), null, null, null]); //start
                addRow(data, [parsePeriod(jsonData[key].endDate), null, null, null]);   //end
            } else {
                var columnPos = columnPositions[key];
                jsonData[key].forEach(function(item) {
                    var vals = [parsePeriod(item.date), null, null, null];
                    vals[columnPos] = item.photos;
                    addRow(data, vals);
                });
            }
        }
    }

   


    var dataTable = new google.visualization.DataTable(data);
    
    var options = {
        interpolateNulls: true,
        hAxis: {
            title: 'Period',
            format: 'MMM'
        },
        vAxis: {
            title: 'Number of photos'
        }
    };


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




function parsePeriod(value) {
    var monthNames = { 'jan': 0, 'feb': 1, 'march': 2, 'apr': 3, 'may': 4, 'jun': 5, 'july': 6, 'aug': 7, 'sep': 8, 'oct': 9, 'nov': 10, 'dec': 11 };
    var parts = value.split(" ");
    var day = parseInt(parts[0]);
    var month = monthNames[parts[1].toLowerCase()];
    var d = new Date(2015, month, day);
    return d;
}



function addColumn(data, label, type) {
    data.cols.push({
        "id": "",
        "label": label,
        "pattern": "",
        "type": type
    });
}


function addRow(data, values) {
    
    var rowValues = values.map(function (v) {
        return { "v": v };
    });

    data.rows.push({
        "c": rowValues
    });
}

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>