ASP.NET MVC Step Line Chart Sample using CanvasJS

Here is an example for adding Interactive StepLine Charts into your ASP.NET MVC Application using CanvasJS. Step Line Charts are much like line charts except they uses vertical and horizontal lines to connect the dataPoints. The Step like structure so formed highlights the increase or decrease in values over time.

Please refer to this tutorial for step by step instruction of adding charts to your ASP.Net MVC Application. We recommend that you download the Sample Visual Studio Project and try it on your own to understand the API better.


Download ASP.Net MVC Chart Samples 
var chart = new CanvasJS.Chart("chartContainer", {
.
.
data: [{
    type: "stepLine",
    dataPoints: [
        { y: 6, label: "Apple" },
	{ y: 4, label: "Mango" },
	{ y: 5, label: "Orange" },
    ]
}]
.
.
}

You can further customize these charts to enable features like Zooming, Panning, Exporting, etc. To know more about the available features, please refer to our getting started section.

  Also See:     

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    <title>Step Line Chart</title>
</head>
<body>
    <div id="chartContainer"></div>

    <script type="text/javascript">

        window.onload = function () {
            var chart = new CanvasJS.Chart("chartContainer", {
                title: {
                    text: "US Unemployement Rate"
                },
                animationEnabled: true,
                axisX: {
                    valueFormatString: "MMM YY"
                },
                axisY: {
                    includeZero: false,
                    interval: .25,
                    valueFormatString: "#.00'%'"
                },

                data: [
                {
                    type: "stepLine",
                    toolTipContent: "{x}: {y}%",
                    markerSize: 5,
                    dataPoints: [
                    { x: new Date(2012, 0), y: 8.3 },
                    { x: new Date(2012, 1), y: 8.3 },
                    { x: new Date(2012, 2), y: 8.2 },
                    { x: new Date(2012, 3), y: 8.1 },
                    { x: new Date(2012, 4), y: 8.2 },
                    { x: new Date(2012, 5), y: 8.2 },
                    { x: new Date(2012, 6), y: 8.2 },
                    { x: new Date(2012, 7), y: 8.1 },
                    { x: new Date(2012, 8), y: 7.8 },
                    { x: new Date(2012, 9), y: 7.9 },
                    { x: new Date(2012, 10), y: 7.8 },
                    { x: new Date(2012, 11), y: 7.8 },
                    { x: new Date(2013, 0), y: 7.9 },
                    { x: new Date(2013, 1), y: 7.7 },
                    { x: new Date(2013, 2), y: 7.6 },
                    { x: new Date(2013, 3), y: 7.5 }
                    ]
                }
                ]
            });

            chart.render();
        };
    </script>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace ASPNET_MVC_Samples.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult StepLine()
        {
            return View();
        }
    }
}
If you have any questions, please feel free to ask in our forums.Ask Question