Generate bar chart based on Min and Max value

SenSeo · Post by **SenSeo** » Tue Apr 05, 2016 11:50 am

We are developing a graph to generate a bar chart based on Min and Max value which is coming from database.We are using Origin property to set min value and data value property of y axis is used to set Max value. Based on this we are able to generate a bar chart. But bar is not generated properly based on min value.Please refer the below code samples which we used . Please advise us how can we set min, max value dynamically.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>TeeChart JavaScript Date Time Chart Example</title>

    <!--[if lt IE 9]>
        <script src="../../src/excanvas/excanvas_text.js"></script>
        <script src="../../src/excanvas/canvas.text.js"></script>
    <![endif]-->

    <script src="Scripts/TeeChart/teechart.js"></script>
    <script src="Scripts/TeeChart/teechart-extras.js"></script>
    <script src="Scripts/TeeChart/teechart-animations.js"></script>
    <script src="Scripts/TeeChart/date.format.js"></script>

    <script type="text/javascript">
var Chart1;
function draw() {
    


    Chart1 = new Tee.Chart("canvas");
    Chart1.axes.left.title.text = "Value";
    Chart1.axes.bottom.title.text = "Time";
    Chart1.title.text = "DateTime X data";
    var series = Chart1.addSeries(new Tee.Bar(Chart1)), today = new Date().getTime();
    
    var values = [50, 20, 30, 40, 50, 60, 70, 80, 90, 100];

    var minValues = [10, 10, 15, 20, 25, 30, 40, 50, 60, 70];
    
    series.data.x = [];
   
    var msecsInADay = 86400000;
    
    
    for (var t = 0; t < 10; t++) {

        series.data.values[t] = values[t];       
        series.data.x[t] = new Date(today + t * msecsInADay);
        series.marks.visible = false;
        series.useOrigin = true;        
        series.origin = minValues[t];        

    }
    

    
    Chart1.axes.bottom.labels.dateFormat = "shortTime";

    Chart1.draw();
}
    </script>
</head>
<body onload="draw()">

   

    <center>
        <br><canvas id="canvas" width="600" height="400">
            This browser does not seem to support HTML5 Canvas.
        </canvas>
    </center>
</body>
</html>

Post by **Yeray** » Wed Apr 06, 2016 11:29 am

Hello,

The Bar series is designed to have a unique origin for the whole series, not an origin for each value.
Try using a Bar series for each value instead. Ie:

Code: Select all

    var series, today = new Date().getTime();
    var values = [50, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    var minValues = [10, 10, 15, 20, 25, 30, 40, 50, 60, 70];
   
    var msecsInADay = 86400000;
   
    for (var t = 0; t < 10; t++) {

        series = Chart1.addSeries(new Tee.Bar(Chart1));
        series.data.values[0] = values[t];       
        series.data.x = [];
        series.data.x[0] = new Date(today + t * msecsInADay);
        series.marks.visible = false;
        series.useOrigin = true;       
        series.origin = minValues[t];       
    }
  
    Chart1.axes.bottom.labels.dateFormat = "shortTime";

SenSeo · Post by **SenSeo** » Thu Apr 07, 2016 9:53 am

Thanks for your reply. We already used the bar series to show bar for min and max values, and it worked as expected.But one problem what we found is that the bar is not aligned properly(it is moved from x axis value) when we tried to draw line on top of bar chart.

Is there any way to fix alignment of bar when we draw any object on this?

Post by **Yeray** » Fri Apr 08, 2016 9:15 am

Hello,

SenSeo wrote:But one problem what we found is that the bar is not aligned properly(it is moved from x axis value) when we tried to draw line on top of bar chart.

Is there any way to fix alignment of bar when we draw any object on this?

Adding this code to the example in my last post draws a line on top of each bar correctly:

Code: Select all

  var myFormat = new Tee.Format(Chart1);

  Chart1.ondraw=function() {
      var visibleSeries = Chart1.series.visibleCount();
      var axisSize = Chart1.axes.bottom.axisSize;
      var tmpBarSize = axisSize / visibleSeries;
      
      for (var i=0; i<Chart1.series.count(); i++) {
        var xOffset = (tmpBarSize*Chart1.series.items[i].barSize*0.01) * (i -(visibleSeries*0.5));
        xOffset += (tmpBarSize*Chart1.series.items[i].barSize*0.01) / 2;
        var x1 = Chart1.axes.bottom.calc(Chart1.series.items[i].data.x[0]) + xOffset,
        y1 = Chart1.axes.left.calc(Chart1.series.items[i].data.values[0]);

        Chart1.ctx.beginPath();
        Chart1.ctx.moveTo(x1, y1);
        Chart1.ctx.lineTo(x1, y1-20);
    
        myFormat.stroke.fill=Chart1.series.items[i].getFill(i);
        myFormat.stroke.prepare();
        Chart1.ctx.stroke();
      }
  }

SenSeo · Post by **SenSeo** » Wed Apr 13, 2016 6:31 am

Hello Team,

We have tried with your code. But still the problem remains the same. Below is my code to draw the bar and line together.

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/TeeChart/teechart.js"></script>
    <script src="Scripts/TeeChart/teechart-extras.js"></script>
    <script src="Scripts/TeeChart/teechart-animations.js"></script>
    <script src="Scripts/TeeChart/date.format.js"></script>
    <script type="text/javascript">
        var Chart1;

        function draw() {
            Chart1 = new Tee.Chart("canvas1");
            var myFormat = new Tee.Format(Chart1);

            var series, series1, series2, today = new Date().getTime();
            var values = [50, 20, 30];
            var minValues = [20, 15, 15];

            var values1 = [35, 15, 30];
            var minValues1 = [25, 20, 15];

            var avg = [30, 18, 22];

            var msecsInADay = 86400000;

            for (var t = 0; t < 3; t++) {

                series = Chart1.addSeries(new Tee.Bar(Chart1));
                series.data.values[0] = values[t];
                series.data.x = [];
                series.data.x[0] = new Date(today + t * msecsInADay);
                series.marks.visible = false;
                series.useOrigin = true;
                series.origin = minValues[t];
                series.barSize = 8;


                series1 = Chart1.addSeries(new Tee.Bar(Chart1));
                series1.data.values[0] = values1[t];
                series1.data.x = [];
                series1.data.x[0] = new Date(today + t * msecsInADay);
                series1.marks.visible = false;
                series1.useOrigin = true;
                series1.origin = minValues1[t];
                series1.barSize = 8;

                series2 = Chart1.addSeries(new Tee.Line(Chart1));
                series2.data.values[0] = avg[t];
                series2.data.x = [];
                series2.data.x[0] = new Date(today + t * msecsInADay);
                series2.format.stroke.size = 10;
                series2.pointer.visible = true;
                series2.pointer.style = "ellipse";
            }

            Chart1.axes.bottom.labels.dateFormat = "shortTime";

            Chart1.ondraw = function () {
                var visibleSeries = Chart1.series.visibleCount();
                var axisSize = Chart1.axes.bottom.axisSize;
                var tmpBarSize = axisSize / visibleSeries;

                for (var i = 0; i < Chart1.series.count() ; i++) {
                    var xOffset = (tmpBarSize * Chart1.series.items[i].barSize * 0.01) * (i - (visibleSeries * 0.5));
                    xOffset += (tmpBarSize * Chart1.series.items[i].barSize * 0.01) / 2;
                    var x1 = Chart1.axes.bottom.calc(Chart1.series.items[i].data.x[0]) + xOffset,
                    y1 = Chart1.axes.left.calc(Chart1.series.items[i].data.values[0]);

                    Chart1.ctx.beginPath();
                    Chart1.ctx.moveTo(x1, y1);
                    Chart1.ctx.lineTo(x1, y1 - 20);

                    myFormat.stroke.fill = Chart1.series.items[i].getFill(i);
                    myFormat.stroke.prepare();
                    Chart1.ctx.stroke();
                }
            }
            Chart1.draw();
            
        }

    </script>
</head>
<body onload="draw()">
    <center>
        <br><canvas id="canvas1" width="1000" height="400">
            This browser does not seem to support HTML5 Canvas.
        </canvas>
    </center>
</body>
</html>

Kindly check the sample code and assist to fix the bar and line position exactly.

For your quick reference we have attached the output chart image.

Thanks!

Post by **Yeray** » Wed Apr 13, 2016 2:14 pm

Hello,

SenSeo wrote: Kindly check the sample code and assist to fix the bar and line position exactly.

I've modified your onDraw function a little bit:

Code: Select all

    Chart1.ondraw = function () {
        var visibleSeries = 0;
        for (var i = 0; i < Chart1.series.count() ; i++) {
            if (Chart1.series.items[i] instanceof Tee.Bar) {
                visibleSeries++;
            }
        }
        
        var axisSize = Chart1.axes.bottom.axisSize;
        var tmpBarSize = axisSize / visibleSeries;

        var nNoBarSeries = 0;
        for (var i = 0; i < Chart1.series.count() ; i++) {
            if (Chart1.series.items[i] instanceof Tee.Bar) {
                var barSize = (tmpBarSize * Chart1.series.items[i].barSize * 0.01);
                var xOffset = barSize * (i - (visibleSeries * 0.5));
                xOffset += barSize / 2;
                xOffset -= barSize * nNoBarSeries;
                var x1 = Chart1.axes.bottom.calc(Chart1.series.items[i].data.x[0]) + xOffset,
                y1 = Chart1.axes.left.calc(Chart1.series.items[i].data.values[0]);

                Chart1.ctx.beginPath();
                Chart1.ctx.moveTo(x1, y1);
                Chart1.ctx.lineTo(x1, y1 - 20);

                myFormat.stroke.fill = Chart1.series.items[i].getFill(i);
                myFormat.stroke.prepare();
                Chart1.ctx.stroke();
            }
            else
                nNoBarSeries++;
        }
    }

SenSeo · Post by **SenSeo** » Fri Apr 15, 2016 9:18 am

Hello,

I have also tried with your modified code. But, still the problem remains the same.

Post by **Yeray** » Mon Apr 18, 2016 8:58 am

Hello,

This is what I'm getting:

: BarsWithLines.png (46.6 KiB) Viewed 28464 times

with this code:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <link rel="shortcut icon" href="favicon.ico">
<title>Testing</title>

<!--[if lt IE 9]>
    <script src="../src/excanvas/excanvas_text.js"></script>
    <script src="../src/excanvas/canvas.text.js"></script>
<![endif]-->

<script src="../src/date.format.js" type="text/javascript"></script>
<script src="../src/Three.js" type="text/javascript"></script>
<script src="../src/teechart.js" type="text/javascript"></script>
<script src="../src/teechart-extras.js" type="text/javascript"></script>
<script src="../src/teechart-3d.js" type="text/javascript"></script>

<script type="text/javascript">

var Chart1;

function draw() {
  Chart1 = new Tee.Chart("canvas1");
  
    var myFormat = new Tee.Format(Chart1);

    var series, series1, series2, today = new Date().getTime();
    var values = [50, 20, 30];
    var minValues = [20, 15, 15];

    var values1 = [35, 15, 30];
    var minValues1 = [25, 20, 15];

    var avg = [30, 18, 22];

    var msecsInADay = 86400000;

    for (var t = 0; t < 3; t++) {

        series = Chart1.addSeries(new Tee.Bar(Chart1));
        series.data.values[0] = values[t];
        series.data.x = [];
        series.data.x[0] = new Date(today + t * msecsInADay);
        series.marks.visible = false;
        series.useOrigin = true;
        series.origin = minValues[t];
        series.barSize = 8;
    
        series1 = Chart1.addSeries(new Tee.Bar(Chart1));
        series1.data.values[0] = values1[t];
        series1.data.x = [];
        series1.data.x[0] = new Date(today + t * msecsInADay);
        series1.marks.visible = false;
        series1.useOrigin = true;
        series1.origin = minValues1[t];
        series1.barSize = 8;

        series2 = Chart1.addSeries(new Tee.Line(Chart1));
        series2.data.values[0] = avg[t];
        series2.data.x = [];
        series2.data.x[0] = new Date(today + t * msecsInADay);
        series2.format.stroke.size = 10;
        series2.pointer.visible = true;
        series2.pointer.style = "ellipse";
    }

    Chart1.axes.bottom.labels.dateFormat = "shortTime";

    Chart1.ondraw = function () {
        var visibleSeries = 0;
        for (var i = 0; i < Chart1.series.count() ; i++) {
            if (Chart1.series.items[i] instanceof Tee.Bar) {
                visibleSeries++;
            }
        }
        
        var axisSize = Chart1.axes.bottom.axisSize;
        var tmpBarSize = axisSize / visibleSeries;

        var nNoBarSeries = 0;
        for (var i = 0; i < Chart1.series.count() ; i++) {
            if (Chart1.series.items[i] instanceof Tee.Bar) {
                var barSize = (tmpBarSize * Chart1.series.items[i].barSize * 0.01);
                var xOffset = barSize * (i - (visibleSeries * 0.5));
                xOffset += barSize / 2;
                xOffset -= barSize * nNoBarSeries;
                var x1 = Chart1.axes.bottom.calc(Chart1.series.items[i].data.x[0]) + xOffset,
                y1 = Chart1.axes.left.calc(Chart1.series.items[i].data.values[0]);

                Chart1.ctx.beginPath();
                Chart1.ctx.moveTo(x1, y1);
                Chart1.ctx.lineTo(x1, y1 - 20);

                myFormat.stroke.fill = Chart1.series.items[i].getFill(i);
                myFormat.stroke.prepare();
                Chart1.ctx.stroke();
            }
            else
                nNoBarSeries++;
        }
    }
    
    Chart1.draw();
}

</script>
</head>
<body onload="draw()">
<br><canvas id="canvas1" width="1000" height="400">
This browser does not seem to support HTML5 Canvas.
</canvas>
</body>
</html>

Don't you get the same?

SenSeo · Post by **SenSeo** » Wed Apr 20, 2016 11:20 am

Hello,

As per your attached image, bar and point is not plotted to correct position even I have used the same x-axis value for both.

Post by **Yeray** » Thu Apr 21, 2016 8:06 am

Hello,

I thought we were talking about drawing lines on top of the bars. But I understand we are now talking about the pointers of the line series.
I'm afraid this isn't possible at the moment. The problem is we are using many Bar series to workaround the origin limitation but this makes the chart to think there are many bar series being drawn at each value, and it's leaving space for all them; but the points from the Line series (why don't you use a PointXY series?) are always drawn at the center of the values, giving this effect.

But I've been working with it to try to give you some alternative. And I think the best would be to improve the Bar series to accept an array as "origin", so you can use only two Bar series and a PointXY series instead of repeating all them.
With this modification, if I do this, without the for loop:

Code: Select all

    var myFormat = new Tee.Format(Chart1);

    var series, series1, series2, today = new Date().getTime();
    var values = [50, 20, 30];
    var minValues = [20, 15, 15];

    var values1 = [35, 15, 30];
    var minValues1 = [25, 20, 15];

    var avg = [30, 18, 22];

    var msecsInADay = 86400000;

        series = Chart1.addSeries(new Tee.Bar(Chart1));
        series.data.values = values;
        series.data.x = [];
        series.data.x = [new Date(today + msecsInADay), new Date(today + 2 * msecsInADay), new Date(today + 3 * msecsInADay)];
        series.marks.visible = false;
        series.useOrigin = true;
        series.origin = minValues; //teechart.js modified to accept an array here
        series.barSize = 8;
    
        series1 = Chart1.addSeries(new Tee.Bar(Chart1));
        series1.data.values = values1;
        series1.data.x = [];
        series1.data.x = [new Date(today + msecsInADay), new Date(today + 2 * msecsInADay), new Date(today + 3 * msecsInADay)];
        series1.marks.visible = false;
        series1.useOrigin = true;
        series1.origin = minValues1; //teechart.js modified to accept an array here
        series1.barSize = 8;

        series2 = Chart1.addSeries(new Tee.PointXY(Chart1));
        series2.data.values = avg;
        series2.data.x = [];
        series2.data.x = [new Date(today + msecsInADay), new Date(today + 2 * msecsInADay), new Date(today + 3 * msecsInADay)];
        series2.format.stroke.size = 10;
        series2.pointer.visible = true;
        series2.pointer.style = "ellipse";

: originsArray.png (41.52 KiB) Viewed 28450 times

I've added it to the public tracker and closed the ticket:
http://bugs.teechart.net/show_bug.cgi?id=1517

So the next maintenance release will include this change.

SenSeo · Post by **SenSeo** » Thu Apr 21, 2016 10:31 am

Hello,

Can you please share the modified Teechart.js script file to accept array for Origin? If you share the updated script file that would be better for us. Actually, we are expecting to pass the array value to the Origin.

Thanks!

Post by **Yeray** » Fri Apr 22, 2016 9:04 am

Hello,

I've just sent it to the mail account you have registered in these forums.

Generate bar chart based on Min and Max value

Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

Re: Generate bar chart based on Min and Max value

	Yeray Alonso Development & Support Steema Software Av. Montilivi 33, 17003 Girona, Catalonia (SP)
	Please read our Bug Fixing Policy