TeochewThunder: Web Tutorial: The GitHub Commit Line Chart (Part 1/2)

Earlier this month, we took a look at my contributions over ten years of GitHub usage. I have the data, and we're going to do some data visualization on this one! Here's a sample of what hcdata_github.csv looks like. For the purpose of this exercise, I saved it at this link.

Year,Month,Contributions
2016,1,0
2016,2,4
2016,3,2
2016,4,2
2016,5,2
2016,6,7
2016,7,6
2016,8,6
2016,9,3
2016,10,0
2016,11,0
2016,12,7
2017,1,5
2017,2,3
2017,3,17
...

For this, we want something quick and dirty, so HighCharts it is! Here, we have some boilerplate HTML. Note the script link to the HighCharts library.

<!DOCTYPE html>
<html>
  <head>
    <title>GitHub Contributions</title>

    <style>

    </style>

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script>

    </script>
  </head>

  <body>

  </body>
</html>

We'll have two divs - ids container and dashboard respectively. I've included the styling. They both take up full screen width, though container has a bigger height than dashboard. dashboard has an additional specification to say text must be aligned in the middle (this will be relevant very soon). I've set divs to have a red outline, temporarily, so we can have a better visual.

<!DOCTYPE html>
<html>
  <head>
    <title>GitHub Contributions</title>

    <style>
div { outline:1px solid rgb(255, 0, 0); }

      #container
      {
        width: 100%;
        height: 600px;
      }

      #dashboard
      {
        width: 100%;
        height: 100px;
        text-align: center;
      }
    </style>

    <script src="https://code.highcharts.com/highcharts.js"></script>

    <script>

    </script>
  </head>

  <body>
    <div id="container">

    </div>

    <div id="dashboard">

    </div>
  </body>
</html>

Simple enough so far?

Over here in the dashboard div, we add a checkbox, cbSeparateYears, within a label tag.

<div id="dashboard">
<label for="rngYearFrom">
<input type="checkbox" id="cbSeparateYears">
SEPARATE YEARS

</label>

And two sliders, rngYearFrom and rngYearTo, also within label tags. Beside each slider we have corresponding output tags.

<div id="dashboard">
<label for="rngYearFrom">
<input type="checkbox" id="cbSeparateYears">
SEPARATE YEARS

</label>

  <br />
  <label for="rngYearFrom">
      FROM

</label>
  <br />
  <label for="rngYearTo">
      TO

</label>
</div>

This styling here for labels is just meant to align stuff nicely at the bottom of the chart. Basically, the labels have a fixed width and are aligned right... within that fixed width of 20em. And then the whole 20em worth of labels is aligned smack in the middle of dashboard! Remember we set text-align to middle for dashboard? I also set the color to orange. Sorry, the color just speaks to me, y'know?

height: 600px;

}

  #dashboard
  {
      width: 100%;

height: 100px;

text-align: center;

}

  label
  {
      display: inline-block;

width: 20em;

font-family: verdana;

color: rgba(200, 150, 0, 1);

text-align: right;

}
</style>

OK, so here's a preview. The output tags won't be visible simply because they have no values yet.

We want these sliders to behave a certain way. They will both call the function setYear(), but with different arguments.

Start writing some code to handle events when the page loads. At the same time, we'll define the setYear() function. It has a parameter, target. Also, declare currentData and yearSeriesData as empty arrays.

When the page loads, we want to get the data, and populate the min and max attributes of rngDateFrom and rngDateTo, with the minimum and maximum value of the Year column. No point allowing the user to select an invalid year, amirite?! So first, we run fetch() to get the CSV data from the URL I've saved it in.

document.addEventListener("DOMContentLoaded", function () {
fetch("http://www.teochewthunder.com/demo/hc_github/hcdata_github.csv")
});
});

We use then() to grab the output response once the data is loaded, and resolve it to text using the text() method.

document.addEventListener("DOMContentLoaded", function () {
    fetch("http://www.teochewthunder.com/demo/hc_github/hcdata_github.csv")
    .then(response => response.text())
  });
});

Once that's done, the next step is to use a chained then() method call to grab the output, csvData, and start working on it.

We first want to declare rows as an array obtained from running the split() method on csvData, splitting by newlines in the CSV text content.

And now we can fill up currentData. Each element of rows is a CSV line, separated by commas. We first use the slice() method on rows, with the argument 1, to only take into account all the rows after the first one, which is the header. And then we run the map() method on the result to iterate through it.

We define cols by running the split() method on row, with a comma as the argument. We declare year, month and contribution according to which part of cols we are referencing, and ensure that the result is an integer by using the parseInt() function. Then we return the array of all these. In short, we return cols, but with the values converted to integers.

Now define years. This is an array that contains all the years in the dataset, currentData. For this, we run the map() method on currentData and just get the first column (index 0) as the value.

Now that we have the array years, getting the minimum and maximum values is a simple matter of using the min() and max() methods of the Math object, and passing in as an argument all the values of years. Note the use of the Spread Syntax here.

Here, we grab the DOM elements from the inputs and output.

We then declare and set the range. yearFrom and yearTo are both set to yearMin. For the sliders, the min attributes of rngYearFrom and rngYearTo are set to yearMin, and the max attributes of rngYearFrom and rngYearTo are set to yearMax. The values of the sliders, as well as the outputs, are set to yearFrom and yearTo.

You see it! Both sliders are set to the minimum, 2016. And the output tags are showing.

We want these sliders to behave a certain way. They will both call the function setYear(), but with different arguments.

In the JavaScript, we create this function. The idea here is that the value of rngDateFrom can never be greater than the value of rngDateTo. So rngDateTo's value needs to be adjusted to the value of rngdateFrom when that happens, and vice versa. if rngDateTo's value is less than that of rngDateFrom, the value of rngDateFrom needs to be adjusted to the value of rngdateTo.

    rngYearTo.min = yearMin;
    rngYearTo.max = yearMax;
    rngYearTo.value = yearTo;
    opYearTo.value = yearTo;
  });
});

function setYear(target)
{

}

let currentData = [];
let yearSeriesData = [];

Let's begin by grabbing the required elements from the DOM - namely, the sliders and outputs.

And we grab the currently selected values.

Now, an If block handles the scenario of which slider was adjusted, based on the parameter, target. It's either "from" or "to".

Here, if the selected value of rngYearFrom, yearFrom, is greater than yearTo, that should not be allowed. We set yearTo to at least be equal to yearFrom. Then we adjust the slider and output. Don't forget to adjust the output for the "from" slider too.

And we do the reverse for the other slider!

Let's test this...

Both the Year FROM and TO start at 2016. Slide FROM to 2022. Does TO follow?

Now slide TO to a value lower than FROM, say, 2018. Does FROM follow?

Now slide TO to a value higher than FROM. FROM should stay put! In effect, FROM should always be lower than TO, or equal.

Rendering the Chart

Finally, eh? Create the renderLineChart() function.

});
});

function renderLineChart()
{

}

function setYear(target)
{

We get the values from the range sliders, and assign them to the variables yearFrom and yearTo, after coercing them to integers using the parseInt() function.

We then declare dataset. It will be the subset of currentData whose year column (the first one at index 0) confirms to the range between yearFrom and yearTo, inclusive. We use the filter() method for this.

Next, we declare years. This is actually a label that shows both the month and the year. For this, we use the second column (index 1) and the first column (index 0). We run the second column's value through the monthToName() function.

Here's the function. It really isn't anything special - just returns a month string based on the integer passed into the function.

Now we have series, another array. For now, set series to contain one single object. Here are its properties.

name - this is the label that will appear on the chart's y-axis.
type - the line type. I chose "spline" because it's smooth and sexy.
data - the array of values. This is an empty array for now.
lineColor, lineWidth and dashStyle - Aesthetic choices. I went with a thick orange line.
marker - I don't want any damn markers, so it's an object with fillColor set to none.

Now, to render the chart! We will use the container div as the target here, for the Highchart object's chart() method.

The first three properties we pass in, are chart, title and subtitle. As you can see, it's all visual styling and aesthetics. I've gone with an orange color scheme. (surprise, surprise)

The next two properties define the labelling and scale. For xAxis, we pass in the years array as the value of the category property. For yAxis, it's all color scheme and labelling. Feel free to play with different values.

And finally, for the series property, we pass in series, which we created earlier.

Call the function here...

...and here, at the end of the setYear() function.

Remove the red lines.

div { outline:0px solid rgb(255, 0, 0); }

And here is the current placeholder we have for the chart. You should see right now that both range sliders are at the minimum value, 2016.

Displaying chart data.

TeochewThunder

Pages

Sunday, 22 March 2026

Web Tutorial: The GitHub Commit Line Chart (Part 1/2)

Let's test this...

Rendering the Chart

Next

No comments:

Post a Comment

Teochew Thunder

Upcoming Web Tutorials

Features

Reviews