Chart Layer - HuTime API Manual

1. Overview

Charts can be viewed using line chart layers (HuTime.LineChartLayer), plot chart layers (HuTime.PlotChartLayer), or bar chart layers (HuTime.BarChartLayer). These layers, classes derived from the Layer class, can basically be used like other layers, for example, when you put them on a panel. Source data for a chart can be separately given in a different form, such as a CSV file. You can use a record set for the chart (HuTime.ChartRecordset) to specify which items (columns) in the source data correspond to the start and end times, as well as which items are displayed as values on the chart.

2. Source Data for a Chart

We recommend for easier handling that use a file whose first line is the title row for the csv (comma separated value) file or tsv (tab separated value) file. Here is an example of source data, which contains meteorological data in Kyoto city in July 2015 (the first several rows only):

Date,Precipitation,Temperature,Humidity,Wend Speed,Sunshine Hours
2015-07-01,33.5,22.7,85,1.7,0
2015-07-02,0,25.2,67,2.2,4.6
2015-07-03,1,25.4,67,1.6,3.2
2015-07-04,12.5,22.7,80,1.6,0
2015-07-05,0,22.8,72,1.5,0.3

3. Creating a Layer Object

You specify a record set object as the source data for the chart when creating a chart layer object. You also provide the URL of the source data for the chart and data items (columns) of the dates, times and values when creating a record set object. The height, as well as the top and bottom margins, of the layer can be specified similarly to other layers.

Constructor

HuTime.LineChartLayer([recordset [, vBreadth [, vMarginTop [, vMarginBottom]]]])

HuTime.PlotChartLayer([recordset [, vBreadth [, vMarginTop [, vMarginBottom]]]])

HuTime.BarChartLayer([recordset [, vBreadth [, vMarginTop [, vMarginBottom]]]])

recordset: Type: HuTime.ChartRecordset; The record set that contains the source data. You can access the record set specified in the constructor as the first array element in the recordsets property (layer.recordsets[0]). If a record set is not specified, you need to add a record set separately using the appendRecordset method.
vBreadth: Type: Number; The height of the layer (in pixels).
vMarginTop: Type: Number; The size of the top margin of the layer (in pixels).
vMarginBottom: Type: Number; The size of the bottom margin of the layer (in pixels).

Overview of the Record Set

The record set for the chart is used.

HuTime.CalendarChartRecordset(source, tBegin, tEnd, value [, calendarId, [, plotStyle [, lineStyle]]])

source: Type: String or HuTime.StreamReaderBase; When a string is entered, it is interpreted as the URL of the source data for the record set, a new StreamReader object is created, and then the data is read.
tBegin: Type: String or number; The item name or the column number of the start date and time in the record.
tEnd: Type: String or number; The item name or the column number of the end date and time in the record.
value: Type: String or number; The item name or the column number for chart values in the record.
calendarId: Type: String; The calendar ID of the start and end dates and times. If omitted, it is set to the Gregorian calendar.
plotStyle: Type: HuTime.FigureStyle; It is used to format plots in a line chart or plot chart, or bars in a bar chart. If omitted, they are formatted with the defaults for the chart layer.
lineStyle: Type: HuTime.StringStyle; It is used to format lines in a line chart. If omitted, they are formatted with the defaults for the chart layer.

4. Adding a Layer to the Panel and Displaying

Just like other layers, you can add a chart layer to a panel using the appendLayer method of a Panel object. The object is drawn according to the sequence of the redraw method, but if the source data has not been read completely, it takes time to show the object.

An example of displaying a line chart layer (see the sample code below). The source data is the meteorological data in Kyoto city in July 2015, which is shown in "2. Source Data for the Chart." In the sample code below, if you change the constructor of the lyr variable to HuTime.PlotChartLayer, you can view a plot chart, and if you change it to HuTime.BarChartLayer, you can view a bar chart.

Sample code (click here for a running example):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature"));
    pnl.appendLayer(lyr);

    ht.redraw(HuTime.timeToJd(2015, 7, 1), HuTime.timeToJd(2015, 8, 1));
</script>
</body>
</html>

5. Formatting

In a chart, you can format plots in a plot chart, plots and lines in a line chart, and bars in a bar chart. A chart can be formatted on a record set basis. When a format value is passed to the constructor of a record set as an argument, it will be the default format of that record set. Also, the shapes and sizes of plots in a plot chart or line chart are changed using the following properties of the record set object:

plotSymbol: Type: Number; The shape of the plots: 0: Circle; 1: Square; 2: Triangle; 3: Cross
plotWidth: Type: Number; The size of the plots (in pixels).
plotRotate: Type: Number; The rotation of the plots (in degrees).

The following figure shows an example with some format set to the sample code in "4. Adding a Layer to the Panel and Displaying."

An example of formatting the line chart layer (see the sample code below). To format the chart shown in the sample code in "4. Adding a Layer to the Panel for Displaying," a format value (HuTime.FigureStyle object) is passed to the constructor of HuTime.CalendarChartRecordset as an argument. All of the shape, size, and rotation of the plots are also specified.

Sample code (click here for a running example). The null value is specified for the calendarId argument of the HuTime.CalendarChartRecordset's constructor. A calendar scale layer (variable: scl) is also added.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature", null,
            new HuTime.FigureStyle("blue"), new HuTime.FigureStyle(null, "red", 3)));
    lyr.recordsets[0].plotSymbol = HuTime.PlotSymbol.Square;
    lyr.recordsets[0].plotWidth = 12;
    lyr.recordsets[0].plotRotate = 45;
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 7, 1), HuTime.timeToJd(2015, 8, 1));
</script>
</body>
</html>

6. Displaying Multiple Data Sets

You can add multiple record sets to a chart layer by using the appendRecordset property. When different record sets have different formats, a chart can show the differences of record sets.

appendRecordset(recordset)

Adds the record set to a chart layer.

recordset: Type: HuTime.ChartRecordset; The record set to be added.

An example of the line chart layer with multiple record sets added to it (see the sample code below). The Weather201507Tokyo.csv file (meteorological data in Tokyo in July 2015) is added as new source data using the appendRecordset method, and temperature data is formatted as green plots for viewing.

Sample code (click here for a running example):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature"));
    lyr.appendRecordset(new HuTime.CalendarChartRecordset(
        "Weather201507Tokyo.csv", "Date", "Date", "Temperature", null,
            new HuTime.FigureStyle("green")));
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 7, 1), HuTime.timeToJd(2015, 8, 1));
</script>
</body>
</html>

7. Formatting Individual Records

To color-code data in a chart based on a particular item in the same record set, set a color-coding function for the rangeStyle property of the record set object. A HuTime.ChartRecord object is passed to the set function as an argument, and return a HuTime.FigureStyle object based on its contents.

In the figure and sample code below, the temperature data is color-coded by the existence of rainfall. (If the data item Precipitation has a value of more than 0, markers are displayed in blue, and if it has a value of 0, they are displayed in red.) First, two formats (styleRain and styleNoRain) are defined. Next, a record set object is created additionally, and the settings for reading the data item Precipitation are added to that record set. Finally, a processing for outputting the formats to the plotStyle property of the record set is described.

An example of formatting individual record (see the sample code below). Rainfall markers are displayed in blue, and no-rainfalls are in red.

Sample code (click here for a running example):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var styleRain = new HuTime.FigureStyle("blue");
    var styleNoRain = new HuTime.FigureStyle("red");
    var recordset =
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature");
    recordset.recordSettings.appendDataSetting(new HuTime.RecordDataSetting("Precipitation"));
    recordset.plotStyle = function(itemName, record) {
        if (!record.data["Precipitation"])
            return defaultRecordStyle;
        if (record.data["Precipitation"].content > 0)
            return styleRain;
        else
            return styleNoRain;
    };

    var lyr = new HuTime.LineChartLayer(recordset);
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 7, 1), HuTime.timeToJd(2015, 8, 1));
</script>
</body>
</html>

8. Event Settings for Records

The actions listed below on records (plots and bars) on a chart can be supplemented as an event on a chart layer. The clicked record is stored in records of the event object as an array. When multiple overlapped records are displayed, the corresponding records are all stored in records. An event handler is added using addEventListener, just like other events.

Action	Event Type
Click	plotclick
Double-click	plotdblclick

In the example below, the recordClick function is added to the line chart layer as plotclick event handling. The recordClick function concatenates the values of clicked record (in this case, the temperature) and displays the combined values in the pop-up window.

Sample code (click here for a running example):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="http://web.hutime.org/js/HuTime.min.js"></script>
  <title>Sample Code</title>
</head>
<body>
<div id="timeline"></div>
<script type="text/javascript">
    var ht = new HuTime();
    var pnls = new HuTime.PanelCollection(200, 400);
    ht.appendPanelCollection(pnls, document.getElementById("timeline"));
    var pnl = new HuTime.TilePanel(200);
    pnls.appendPanel(pnl);

    var lyr = new HuTime.LineChartLayer(
        new HuTime.CalendarChartRecordset("Weather201507.csv", "Date", "Date", "Temperature"));
    lyr.addEventListener("plotclick", recordClick);
    pnl.appendLayer(lyr);

    var scl = new HuTime.CalendarScaleLayer(50, null, 0);
    pnl.appendLayer(scl);

    ht.redraw(HuTime.timeToJd(2015, 7, 1), HuTime.timeToJd(2015, 8, 1));

    function recordClick(ev) {
        var text = "";
        for (var i = 0; i < ev.records.length; ++i) {
            text += ev.records[i].record.data["Temperature"].text + " ";
        }
        alert(text);
    }
</script>
</body>
</html>

Back to the Contents of this Manual