handsondataviz / chartjs-line

Line chart with Chart.js (template)

Line Chart with One or More Series in Chart.js

Demo

https://handsondataviz.github.io/chartjs-line/

Sample data by CT Department of Education.

Create your own

See chapter 10: Chart.js and Highcharts templates in Hands-On Data Visualization by Jack Dougherty and Ilya Ilyankou.

In data.csv, each row is a point in time (x-axis). Each column is a new series. There can be any number of points in time (rows) and any number of series (columns).

The first column is always labels for the x-axis. Second and all other columns are new series (lines), whose label is taken from the first row (header).

You can modify source and credits (lines that appear below the chart) in index.html.

In script.js, you can customize the values of variables shown in the code snippet below. For more customization, see Chart.js documentation.

var TITLE = 'Hartford School District is No Longer Largest in Connecticut';

// x-axis label and label in tooltip
var X_AXIS = 'Academic Year';

// y-axis label and label in tooltip
var Y_AXIS = 'Number of Students'; 

// Should y-axis start from 0? `true` or `false`
var BEGIN_AT_ZERO = false;

// `true` to show the grid, `false` to hide
var SHOW_GRID = true;

 // `true` to show the legend, `false` to hide
var SHOW_LEGEND = true;

Colors are assigned to lines automatically based on a qualitative color scheme from ColorBrewer. The example contains 5 lines, so a color scheme with 5 colors was chosen. Based on your data, you can choose your color scheme at the bottom of script.js from any of the following: https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html

colorschemes: {
  /*
    Replace below with any other color scheme from
    https://nagix.github.io/chartjs-plugin-colorschemes/colorchart.html
   */
  scheme: 'brewer.DarkTwo5'
}

If you want to make your Y-axis scale more granular with more ticks, consider increasing maxTicksLimit value.

To change how values appear in the tooltip or on x- and y- axes, for example to add a dollar sign $ before monetary values, modify callbacks, such as this:

callback: function(value, index, values) {
  return '$' + value.toLocaleString();
}

Turn a line chart into a stacked area chart

To change a Chart.js line chart into a stacked area chart, make sure each dataset comes with a fill: true property, and that yAxis stacked property is set to true.

Why am I not seeing my chart when I open index.html in the browser?

This error is known as cross-origin request error. When you double-click the file to open locally in your browser, you will see the URL in the address bar starting with file:, and all attempts to read a local CSV file, even though it is located in the same folder, will fail.

Here are a few ideas how to go around it:

• Find out how to disable same-origin policy in your browser (to start with, see this blog post or this StackOverflow thread).
• Install a program that will emulate a local server on your device, such as live-server(https://www.npmjs.com/package/live-server).
• Move your CSV files to a remote location on the web (such as GitHub Gist, AWS S3, or a Wordpress site), and in script.js, change $.get('./data.csv', function(csvString) { to $.get('https://wherever.your/file/is/data.csv', function(csvString) {.
• Do all the development (file modifications) within GitHub without downloading this repository, using either GitHub's web interface, or GitHub Desktop application.

See other chart templates

• Chart.js Bar Chart: https://github.com/HandsOnDataViz/chartjs-bar
• Chart.js Bar Chart with Error Bars: https://github.com/HandsOnDataViz/chartjs-error-bars
• Chart.js Scatter Chart: https://github.com/HandsOnDataViz/chartjs-scatter
• Chart.js Bubble Chart: https://github.com/HandsOnDataViz/chartjs-bubble
• Highcharts Annotated Line Chart: https://github.com/HandsOnDataViz/highcharts-line-annotated

chartjs-line's Issues

consider revising some default settings and adding to README

1. Consider changing line chart default colors, based on https://colorbrewer2.org/#type=qualitative&scheme=Dark2&n=3

        plugins: {
          colorschemes: {
            scheme: 'brewer.DarkTwo3'

Also mention the color brewer plugin in the README, since users may not see it down at bottom of code

2. I think you meant to write "Y-axis" here?

var BEGIN_AT_ZERO = false;  // Should x-axis start from 0? `true` or `false`

3. In the default line chart, the point styles are all the same default (circles), which means we cannot distinguish between them except by color. If there's no easy way to designate different styles (since we don't know the number of data series), perhaps change 'circle' to none, if possible?
   https://www.chartjs.org/docs/latest/configuration/elements.html#point-styles

4. Consider mentioning some common items in README that users may wish to add to customize code, such as reducing the number of tick marks in the horizontal axis of a line chart:

            ticks: {
              maxTicksLimit: 11,

and adding $ symbol to an axis:

ticks: {
              beginAtZero: BEGIN_AT_ZERO,
              callback: function(value, index, values) {
                return '$' + value.toLocaleString()
              }

5. Note in README that users must modify caption/source info in the index.html

take the data from a mysql table

How could I take the data from a mysql table instead of a csv?

Doesn't detect CSV changes

When I change the data in the CSV and refresh or force refresh it doesn't change on the chart.