Couple of weeks ago when I was working on a project in
office where we need to show graphical representation of data so we use
high-chart library which is one of the top 10 in graphic representation.
Now the reason behind the decision to write this post is the
difference I have found between the below two figures of high-chart graph.
I have given a static example here however you can use Jquery Ajax() to get your data from database on client-side and then draw high-chart graphs. If somebody finds it difficult then do post me and i will write another tutorial on how to draw high-chart graph dynamically after picking data from database.
I will explain the difference between the below two figures
but first I want to tell you that I have written the same code and data (data: [400, 405, 395]) for the two charts (Figure 1 is the
“Column Graph” and Figure 2 is “Line Graph”). Only the small difference is that
for column graph you need to write defaulteSeriesType: ‘column’ and for line
graph defaultSeriesType:’line’ and below is the code.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Calculating
Y-Axis scale dynamically in highchart</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/highcharts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" style="margin:auto auto;height:300px;width:400px;"></div>
</form>
<script type="text/javascript">
var chart
= new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
xAxis: {
title: {
text: 'X-Axis
Values'
}
},
yAxis: {
title: {
text:'Y-Axis
Values'
}
},
series: [{
data: [400, 405, 395]
}]
});
</script>
</body>
</html>
Figure 1 Figure 2
Have a look at the
Y-Axis scale of both figures even that I draw two graphs with same data array (data:
[400, 405, 395]) but “Column” graph start the y-scale from 0 and “Line”
graph starts it from 390. At first
glance of column graph you find no difference between the three columns until
unless you mouse over the column and see the value in the tool tip. On the
contrary, line graph shows the difference of values in the first glance even
without tool tip so the end users very easily identify the performance from
line graph.
The problem is that
Y-Axis on column graph is not dynamic but for line graph it is dynamic so we
need to make dynamic Y-Axis on column graph. The first solution of this problem
in my mind was find the maximum and minimum values of your data and assign the
min. value of your data to min. value of y-axis scale and then a bit of
searching on Google also works it for me when I find the example as well.
Here is the link as well
from where I found this formula and bit of explanation as well: http://stackoverflow.com/questions/10222613/calculating-a-min-y-axis-value-in-highcharts
Formula for dynamic
Y-Axis Scale in highchart Column Graph: -
min = min-((max-min)*0.05)
Note: - The above has
been derived from highchart Line Graph.
By applying this formula
in your code you will find the difference. I am giving you the code and figures
as well.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Calculating
Y-Axis scale dynamically in highchart</title>
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="Scripts/highcharts.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="container" style="margin: auto auto; height: 300px; width: 400px;">
</div>
</form>
<script type="text/javascript">
var
data = [400, 405, 395];
Array.max = function
(array) {
return
Math.max.apply(Math, array);
};
Array.min = function
(array) {
return
Math.min.apply(Math, array);
};
var min
= Array.min(data);
var max
= Array.max(data);
var
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
yAxis: {
min: min - ((max - min) * 0.05)
},
series: [{
data: data
}]
});
</script>
</body>
</html>
Hi,
ReplyDeleteI want to add min and max value after clicking on range selector so when i click on one month the min and max should be calculated for that range data only and apply to the yAxis min and max
Thanks
Hi I want to user the Highchart with Combine to chart one is stacked Column chart with the line chart with the dual axis . so how i will impliment ?
ReplyDeletecan u please suggest?
Please go through this link http://www.highcharts.com/demo/area-stacked
Delete