Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Which chart type should i choose to show change in values between 2 dates?

I am using Highcharts, but my question is in general. I want to know which chart is a perfect match to show change in values between 2 dates.

E.g The lending rate e.g 29-Aug : 21.2 30-Aug : 21.3

The change is 0.1 million.

Which chart type should i choose to show this little difference clearly noticeable .?

like image 640
ZEE Avatar asked Aug 01 '16 08:08

ZEE


People also ask

What is the best graph to show change over time?

If you want to plot changes and trends over time, a line chart is your best option. Line charts compare data, reveal differences across categories, show trends while also revealing highs and lows.

Which two types of charts are best suited for date based data?

Stacked column charts make comparison simple between values as everyone is familiar with column charts. While using stacked column charts, ensure that your dates have the same intervals.

Which chart type provides the best visual display of the relationship between two?

Scatter plots are useful for showing precise, data dense visualizations, correlations, and clusters between two numeric variables.

What type of chart is best for comparing multiple items at once?

Column Charts: Some of the most commonly used charts, column charts, are best used to compare information or if you have multiple categories of one variable (for example, multiple products or genres).


2 Answers

If you're comparing two dates/values, I would recommend using a bar chart. (If you're comparing values over months or years, I would suggest using a line or area chart.) You can better emphasize the difference between the two lending rate values by specifying the minimum, maximum, and step scale values so that the 0.1 million difference can be clearly illustrated. See the below demo:

var myConfig = {
  type: 'bar',
  title: {
    text: 'Lending Rate',
    fontFamily: 'Georgia'
  },
  utc: true,
  timezone: 0,
  scaleX: {
    transform: {
      type: 'date',
      all: '%M %d, %Y'
    },
    step: 86400000,
    item: {
      fontSize: 10
    }
  },
  scaleY: {
    values: '21.1:21.4:0.1',
    format: '%vM',
    decimals: 1,
    item: {
      fontSize: 10
    },
    guide: {
      lineStyle: 'dotted'
    }
  },
  plot: {
    barWidth: '50%',
    borderWidth: 1,
    borderColor: 'gray',
    backgroundColor: '#99ccff',
    valueBox: {
      text: '%v million',
      fontSize: 12,
      fontColor: 'gray',
      fontWeight: 'normal'
    },
    tooltip: {
      text: '%v million'
    }
  },
  series: [
    {
      values: [
        [1472428800000, 21.2],
        [1472515200000, 21.3],
      ]
    }
  ]
};

zingchart.render({ 
	id : 'myChart', 
	data : myConfig, 
	height: 400, 
	width: 600 
});
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>

<div id='myChart'></div>

For more on scale customization and formatting, see this X/Y-Axis Scales Tutorial. The value boxes and tooltips can also be used to provide further information about the node values.

Hope that helps. I'm a member of the ZingChart team, and happy to answer further questions.

like image 96
Elizabeth Avatar answered Nov 15 '22 07:11

Elizabeth


A simple bar chart with data labels to indicate the respective values would be helpful to show users there is a very small change in value.

See the code snippet below. I modified one of the basic Highcharts demos for a bar chart with your example values.

I hope this is helpful for you!

$(function () {
    $('#container').highcharts({
        chart: { type: 'bar' },
        title: { text: 'Sample Chart' },
        xAxis: {
            categories: ['29-Aug','30-Aug'],
            title: { text: null }
        },
        yAxis: { min: 0 },
        tooltip: { valueSuffix: ' million' },
        plotOptions: {
            bar: {
                dataLabels: {
                    crop: false,
                    overflow: 'none',
                    enabled: true,
                    style: { fontSize: '18px' }
                }
            }
        },
        legend: { enabled: false },
        credits: { enabled: false },
        series: [{
            name: 'Sample Series',
            data: [21.2,21.3]
        }]
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 450px; height: 250px; margin: 0 auto"></div>
like image 40
Mike Zavarello Avatar answered Nov 15 '22 06:11

Mike Zavarello