How to Draw graph in ASP.NET MVC 4 using High-Charts?

Question

I am trying to make a chart in MVC 4. But it's not working.I am using High-Charts.This is my action method.

public ActionResult Index()
        {
            var title = new Title() { Text = "Workload" };

            var subtitle = new Subtitle() { Text = "workload per day" };

            var XData = new[] { "25", "26", "27", "28", "29", "30", "31", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" };
            var YData = new object[] { 195, 150, 0, 270, 0, 90, 245, 215, 350, 355, 190, 95, 0, 100, 225 };

            var xaxisTitle = new XAxisTitle { Text = "Wokload in minutes" };
            var yaxisTitle = new YAxisTitle { Text = "Time in days" };

            string serieName = "Workload per day";

            Highcharts chart = new Highcharts("chart")
                .SetTitle(title)
                .SetSubtitle(subtitle)
                .SetXAxis(new XAxis
                {
                    Categories = XData,
                    Title = xaxisTitle
                })
                .SetYAxis(new YAxis
                {
                    Title = yaxisTitle
                })
                .SetSeries(new Series
                {
                    Data = new Data(YData),
                    Name = serieName
                });

            return View(chart);

        }

and this is my View.

@model DotNet.Highcharts.Highcharts
@{
    ViewBag.Title = "Index";
}
<header>
    <script src="~/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/highcharts.js" type="text/javascript"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.src.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts-more.src.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts-more.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts-all.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts-3d.src.js"></script>
    <script src="~/Scripts/Highcharts-4.0.1/js/highcharts-3d.js"></script>
    <script src="~/Scripts/jquery-1.7.1.js"></script>
</header>

There is a graph


@(Model)

What is wrong with this code? This is showing nothing in the view. There is a blank page when i run it.Please someone guide me.

Open JavaScript console and copy&paste here errors. In Chrome it's ctrl+shift+J (or Options -> More Tools -> JavaScript Console). — Paweł Fus
– Paweł Fus, Commented May 28, 2015 at 13:31

KelishaZ · Accepted Answer · 2016-08-08 13:31:56Z

1

It works fine for me Just remove the redundant Script URL and match the version of your Script file and the URL you used. for example let me show you how I used This Code. before this leave the codes inside your action as it is. do not modify it.

The problem is your Java Script version

Look at this Image

I changed this <script src="~/Scripts/jquery-1.7.1.js"></script> in to <script src="~/Scripts/jquery-1.10.2.js"></script> and <script src="~/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script> in to <script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>

now My Code is fine to run.

Happy Coding

answered Aug 8, 2016 at 13:31

KelishaZ

1017 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valyok26 · Accepted Answer · 2015-05-27 14:25:15Z

0

Worked fine on my computer after I removed two redundant jquery links. You don't need both js and min.js files. Latter is just optimized version of former with removed unnesessary spaces, shortened variable names, etc.

answered May 27, 2015 at 14:25

Valyok26

5013 silver badges12 bronze badges

12 Comments

user4653841 Over a year ago

which two line should i removed please mention

Valyok26 Over a year ago

Valyok26 Over a year ago

Actually, I think it's all because of wrong version number. You can have both js and min.js file. It still works this way.

user4653841 Over a year ago

not working... Please mention two lines that you have removed .

Valyok26 Over a year ago

Do you have jquery-1.5.1.min.js file in your Scripts directory? I think you need to change version number.

|

Collectives™ on Stack Overflow

How to Draw graph in ASP.NET MVC 4 using High-Charts?

2 Answers 2

Comments

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related