Search code examples
javascripthistogrambar-charttimelinecolumn-chart

Javascript library for drawing bar charts with timeline

I'd like to draw a time series as a bar chart (I suppose it's also called column chart) preserving the scale of the time line. Example:enter image description here

Could you recommend a javascript library providing the code with how to visualize it? I'm well aware of this answer and tried some of them, but couldn't come close to the desired outcome.

The example data in javascript format:

var arr = new Array();
arr[0] = -100;
arr[3.5] = 10;
arr[5] = 110;
Solution

  • Have a look at this code, you can replace categories(in x-axis) and data with your own arrays.

    <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

</head>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto">

</div>
<script>
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Column chart with negative values'
        },
        credits: {
            enabled: false
        },
        series: [{
        name: 'Bar Chart',
        data: [

    { x: 0, y: -100 },
    { x: 4.9, y: 10},
    { x: 5, y: 100 }
    ]

    }]
    });
});
</script>
</html>