About

jquery-zig is a plugin for jQuery that draws interactive line chart diagrams.

Features

  • … add samples programmatically, or supply initial samples right in the HTML source
  • … automatic scaling of charts to the max. sample value
  • … automatic overflow handling of graphs: clip or scroll
  • … synchronize two or more charts: auto-moving cursor and auto-scrolling
  • … fast navigation with mouse-wheel or trackpad
  • … custom crosshair cursor for painless highlighting of samples (in supported browsers)
  • … API support: add samples and labels, compute statistics (min, max, mean, median, variance, standard deviation), purge graphs, and more
  • … compute and visualize min, max, mean and standard deviation with just a mouse-click
  • … fully customizable: change scrollbar size, colors, line styles, column widths, and more
  • … uses <canvas> in modern browsers, pure HTML DOM in legacy browsers

Author Nikola Klaric (github.com/nikola)

Source https://github.com/nikola/jquery-zig

Latest release version 0.6-20130108

License GNU Lesser General Public License (LGPL) Version 3

Code size ≈ 9.18 KB (minified & gzipped)

Demo
Usage

Step 1. Include the jQuery library in your page, e.g.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Step 2. Include the jquery-zig plugin in your page, e.g.

<script src="path/to/javascript/files/jquery-zig.js"></script>

Step 3. Write a block-model container for your chart, e.g.

<div id="myChart></div>

Step 4. In your Javascript code, select your element(s) with jQuery and call the .zig() method on the result, e.g.

$("#myChart").zig();

That is all.


The initial call to .zig() will accept several optional parameters via <Object> notation, e.g.

$("#myChart").zig({
    width: 500, height: 500, unit: "km", graphs: [
        {
            id: "runner-A"
          , lineColor: "#888"
          , fillColor: "none"
        }
    ]
});

Reasonable default options will be used for any parameter omitted.


width : <Number> 400
Outer width of chart in pixels (excluding border but including scrollbars).
height : <Number> 200
Outer height of chart in pixels (excluding border but including scrollbars).
sampleRenderWidth : <Number> 5
Size of each rendered sample column in pixels, i.e. the x-distance each sample will occupy when rendered.
overflow : <String> scroll
Overflow behavior when number of samples exceeds the maximum as specified by the chart dimensions. Available options: "scroll" or "clip". In the latter case, samples will be clipped from the left side of the chart.
unit : <String> ''
The unit of samples added to the chart.
graphs : <Array> [ { id: 'default' } ]
An <Array> of empty graphs to be created in the chart.
Each graph is defined by several properties, of which only id is mandatory.
    id : The id of the graph, which can be used later to add samples to that specific graph.
    lineColor : The line color of the graph. If omitted, a preset color is used.
    fillColor : The fill color of the graph. Setting this to "none" will draw outlined shapes instead of filled shapes. If omitted, a preset color is used.
    highlightTextColor : The text color of sample readings, defaults to coordinatesColor (see below).
    highlightBackgroundColor : The background color of sample readings, defaults to canvasColor (see below).
    highlightBorderColor : The border color of sample readings, defaults to lineColor (see above).
canvasColor : <String> '#fff'
CSS color code for the background fill color of the chart.
borderColor : <String> '#444'
CSS color code for chart box border. Also supported: "transparent".
crosshairColor : <String> '#000'
CSS color code of the crosshair cursor.
msieNoneCursorUrl : <String> ''
URL of none.cur file (applies only to MSIE). As of version 9.0, MSIE does not support setting the CSS cursor property to "none", so this workaround is needed to properly render the custom crosshair cursor. If this option is omitted, MSIE will render a default crosshair cursor.
coordinatesColor : <String> '#000'
CSS color code of the coordinate readings.
scaleColor : <String> '#000'
CSS color code of the scale text that denotes the y-axis.
backgroundColor : <String> '#fff'
CSS color for background elements in the chart. This is not identical to the background color of the chart.
showCoordinates : <Boolean> true
Render coordinate readings if true.
showVerticalGrid : <Boolean> true
Render a vertical grid if true.
verticalGridSegments : <Number> 4
Number of vertical grid segments (not lines).
verticalGridLineStyle : <String> '1px dotted #444'
CSS border-style definition for vertical grid lines (not segments).
verticalGridOpacity : <Number> 0.5
CSS opacity of vertical grid segments/lines in the interval [0,1].
scrollbarHeight : <Number> 8
Height of the scrollbar scroller in pixels.
scrollbarColor : <String> '#aaa'
CSS color code of the scrollbar scroller.
canvasFillStyle: <String> 'solid'
Background fill color style of the chart. Available options: 'solid' or 'gradient'.
canvasGradientStart : <String> '#000000'
CSS color code for the start position in the background gradient of the chart.
canvasGradientStop : <String> '#666277'
CSS color code for the stop position in the background gradient of the chart.
defaultRenderPath : <String> 'auto'
Determine the render path. Available options: 'auto' (which wil use <canvas> if supported) or 'html'.
API

After an element has been initialized with .zig(), API methods will become available on that element through the standard method-call pattern of jQuery plugins:

$("#myChart").zig("methodName", param1, param2, …);

addSamples ( [ <String> id, <Array> samples | <Number> sample, <Array> labels | <Number> label ] | <Object> samples, <Object> labels)
Add one or more samples and labels to the given graph. If id is omitted, the first graph as defined during initialization will be assumed.
Parameters can be supplied using any of these example syntaxes:
  1. addSamples ( 150 ) → add sampe value 150 to the first graph in the chart
  2. addSamples ( "graphId", 150 ) → add sampe value 150 to the graph with id "graphId"
  3. addSamples ( "graphId", 150, "label1" ) → add sampe value 150 to the graph with id "graphId", and label that sample with "label1"
  4. addSamples ( "graphId", [110, 190, 120, 30, 0, 70] ) → add sampe values 110…70 to the graph with id "graphId"
  5. addSamples ( "graphId", [110, 0, 70], ["label1", "label2", "label3"] ) → add sample values 110…70 to the graph with id "graphId", and label these samples
  6. addSamples ( {"graphId": [110, 0, 70]} ) → add sample values 110…70 to the graph with id "graphId"
  7. addSamples ( {"graphId": [110, 0, 70]}, ["label1", "label2", "label3"]) → add sample values 110…70 to the graph with id "graphId", and label these samples
synchronize ( <String> selector )
Synchronize the chart with all charts that match the given selector. Synchronization is bi-directional: Whenever you move the mouse or scroll in either chart, the other charts will be updated accordingly.
purge ( <String> id )
Purge all samples from the given graph. If there are no graphs left in the chart, labels will also be purged.
purgeAll ( )
Purge all graphs. This will also purge labels.
getStatMin ( <String> id )
Return the smallest sample value in the given graph.
getStatMax ( <String> id )
Return the largest sample value in the given graph.
getStatMean ( <String> id )
Return the arithmetic mean of sample values in the given graph.
getStatGeometricMean ( <String> id )
Return the geometric mean of sample values in the given graph.
getStatMedian ( <String> id )
Return the median of sample values in the given graph.
getStatVariance ( <String> id )
Return the variance of sample values in the given graph.
getStatStdDev ( <String> id )
Return the standard deviation of sample values in the given graph.
Download

Latest revision from master: