0

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;
Community
  • 1
  • 1
Max Li
  • 5,069
  • 3
  • 23
  • 35

2 Answers2

1

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>
shreyansh
  • 1,637
  • 4
  • 26
  • 46
  • look, in your example the distance between the columns -100 and 10 is the same as between 10 and 110. They MUST differ, i.e. the 1-st distance should relate to the 2nd as 3.5:1.5 (at least optically). You could change the time point from 3.5 to 4.99 to see the problem more clearly. – Max Li Jun 05 '15 at 15:53
  • I have edited the code now check it – shreyansh Jun 05 '15 at 16:25
  • thx, this makes it happen – Max Li Jun 05 '15 at 16:49
0

Take a look at Highcharts its very configurable. Take a look at this fiddle, Just changed the type to column

vlio20
  • 8,955
  • 18
  • 95
  • 180
  • that's exactly the problem. You can put the equidistant labels on the X axis. The problem is how to put the numerical data on X axis such that the columns have the distance between them according to them – Max Li Jun 05 '15 at 15:13