Elliot.js Test

by giodamelio

HTML

<canvas id='myCanvas' width='700' height='200'></canvas>

JavaScript

var elliot = new Elliot('myCanvas', {
    'general': {
        'background': '#2F2C2B', // Graph background color
        'title': 'Cars inside the city gates', // Graph title
        'titleFont': 'Nobile', // Font name for the title
        'titleFontSize': 11, // Graph title font size
        'titleFontColor': '#ffffff', // Graph title font color
        'yAxisTitle': 'Cars', // Y axis title
        'yAxisFont': 'Nobile', // Font name for the Y axis
        'yAxisFontSize': 10, // Y axis font size
        'yAxisFontColor': '#ffffff', // Y axis font color
        'yAxisNumTicks': 7, // How many ticks should be shown
        'yAxisTickFontSize': 8, // Y axis tick font size
        'logLevel': 'INFO', // Set log level
        'stickyScaling': false // Scale graph using data for
        // the whole session (rather than
        // the currently displayed data)
    },
    'barGraph': {
        'markerPosition': 20, // Show marker every n bars. 0 == off
        'updateFrequency': 500, // Graph update frequenzy
        'incrementalValues': true, // Should values be incremental?
        'barBackgroundColor': '#2F2C2B', // Color of the bars
        'barColor': '#ff6060', // Color of data in the bars
        'markerColor': '#333333', // Color of the marker bars
        'barWidth': 3, // How many px should the bars be
        'barSpacing': 1, // Pixels between the bars
    }
});