Geek Answers Handbook

What type of chart should I choose to show the change in values ​​between two dates?

I use Highcharts, but my question is overall. I want to know which chart is perfect to show the change in values ​​between two dates.

For example, a loan ratio, for example, Aug 29: 21.2 Aug 30: 21.3

The change is 0.1 million.

What type of chart should I choose to show this slight difference, clearly noticeable.?

+5
source share
2 answers

If you are comparing two dates / values, I would recommend using a histogram. (If you have been comparing the values ​​for several months or years, I would suggest using line or area .) You can better emphasize the difference between the two values ​​of the lending rate , indicating the minimum, maximum and step scale values so that the difference of 0.1 million could be clearly illustrated. See Demo below:

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 information on setting and formatting scaling, see this X / Y-Axis Scaling Tutorial . Flags and tooltips can also be used to provide additional information about node values.

Hope this helps. I am a member of the ZingChart team and I am happy to answer other questions.

+6
source

A simple histogram with data labels to indicate the corresponding values ​​will be useful to show users a very small change in value.

See the code snippet below. I changed one of the main Highcharts demos for a bar chart with your values.

I hope it will be useful 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>
+2
source

More articles:


All Articles