[Solved] How to create Horizontal Bar charts with clickable option in HTML5 in ASP .net MVC4 application? [closed]

Question

You say: “I never mind getting negative votes.” … I’ll label you as “doesn’t play well with others” 🙂

Anyway, there’s a lot of excellent code that does the charting you need, but your key is how to use your MVC controller to inject that code into your view. Here’s a great article on how to do that: http://www.dotnetcurry.com/ShowArticle.aspx?ID=822 .

You don’t want to use a chart plugin?

Ok then, here is html canvas code that will draw a barchart and detect when a user clicks a bar on the chart: http://jsfiddle.net/m1erickson/6vutD/

If you want more than a basic barchart, here’s an open-source chart code you can pull apart and use as you need: http://www.chartjs.org/

Here is code to the Fiddle above:

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="https://stackoverflow.com/questions/17214164/css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var barWidth=30;
    var barSpacing=15;
    var leftMargin=20;
    var bars=[]

    bars.push({height:150, color:"blue", x:null,y:null,right:null,bottom:null});
    bars.push({height:75, color:"green", x:null,y:null,right:null,bottom:null});
    bars.push({height:125, color:"gold", x:null,y:null,right:null,bottom:null});


    for(var i=0;i<bars.length;i++){
        bar=bars[i];
        bar.x=leftMargin+(barWidth+barSpacing)*i;
        bar.y=canvas.height-bar.height;
        bar.width=barWidth;
        bar.right=bar.x+barWidth;
        bar.bottom=canvas.height;
    }

    drawBarchart();

    function drawBarchart(){

        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.rect(0,0,canvas.width,canvas.height);
        ctx.fillStyle="skyblue";
        ctx.fill();

        for(var i=0;i<bars.length;i++){
            bar=bars[i];
            ctx.beginPath();
            ctx.rect(bar.x,bar.y,bar.width,bar.height);
            ctx.fillStyle=bar.color;
            ctx.fill();
            ctx.stroke()
        }
    }


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // Put your mousedown stuff here
      for(var i=0;i<bars.length;i++){
          var bar=bars[i];
          if(mouseX>=bar.x 
                && mouseX<=bar.right
                && mouseY>=bar.y
                && mouseY<=bar.bottom){
              alert("Clicked on ["+bar.color.toUpperCase()+"] so open another chart!");
          }
      }
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Accepted Answer