Discussion :

[samsoul33]

Bonjour,

Je souhaiterais changer le type d'un graphique depuis une dropdownlist puis rafraîchir son affichage...
Je suis en ASP MVC5

J'arrive à afficher ma dropdownlist et son contenu.
J'arrive à afficher mon graphique.
Je ne sais pas comment changer le type de graphique (chartType) en fonction de la sélection dans ma dropdownlist ni comment rafraîchir automatiquement mon graphique une fois l'élément sélectionné dans la dropdownlist.

Pour l'instant voici mon code:


HomeController.cs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;
using Test_Chart.Models;
 
namespace Test_Chart.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            List<SelectListItem> itemsChart = new List<SelectListItem>();
            ListChartModel drop = new ListChartModel();
 
            itemsChart.Add(new SelectListItem { Value = "Doughnut", Text = "doughnut", Selected = true });
            itemsChart.Add(new SelectListItem { Value = "Pie", Text = "pie" });
            itemsChart.Add(new SelectListItem { Value = "Area", Text = "area" });
            itemsChart.Add(new SelectListItem { Value = "Stacked Area", Text = "stackedarea" });
            itemsChart.Add(new SelectListItem { Value = "Stacked Bar", Text = "stackedbar" });
            itemsChart.Add(new SelectListItem { Value = "Column", Text = "column" });
            itemsChart.Add(new SelectListItem { Value = "Bar", Text = "bar" });
            itemsChart.Add(new SelectListItem { Value = "Stock", Text = "stock" });
            itemsChart.Add(new SelectListItem { Value = "Stacked Column", Text = "stackedcolumn" });
            itemsChart.Add(new SelectListItem { Value = "Line", Text = "line" });
            itemsChart.Add(new SelectListItem { Value = "Spline", Text = "spline" });
            itemsChart.Add(new SelectListItem { Value = "Stepline", Text = "stepline" });
 
            ViewBag.DropDownValues = new SelectList(itemsChart, "Text", "Value");
            return View();
        }
 
 
 
 
 
        public ActionResult GetTestListSelectChart()
        {
            var key = new Chart(width: 600, height: 400)
                .AddSeries(
                    chartType: "line",
                    legend: "Storm",
                    xValue: new[] { "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013" },
                    yValues: new[] { "1002", "845", "456", "765", "330", "799", "913", "673", "401", "853", "425", "1002", "845", "456", "765", "330", "799", "913", "673", "401", "853", "425" })
                .Write();
 
            return null;
        }
 
 
 
 
        public ActionResult GetRainfallChart()
        {
            var key = new Chart(width: 600, height: 400, theme: ChartTheme.Vanilla3D)
                .AddSeries(
                    chartType: "pie",
                    legend: "Rainfall",
                    xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
                    yValues: new[] { "20", "20", "40", "10", "320" })
                .Write();
 
            return null;
        }
        public ActionResult GetStormChart()
        {
            string typeOfChart = "area";
            var key = new Chart(width: 600, height: 400, theme: ChartTheme.Blue)
                .AddSeries(
                    chartType: typeOfChart,
                    legend: "Storm",
                    xValue: new[] { "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013" },
                    yValues: new[] { "1002", "845", "456", "765", "330", "799", "913", "673", "401", "853", "425", "1002", "845", "456", "765", "330", "799", "913", "673", "401", "853", "425" })
                .Write();
 
            return null;
        }
 
 
    }
}

ListChartModel.cs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace Test_Chart.Models
{
    public class ListChartModel
    {
        public string Value { get; set; }
        public int Text { get; set; }
    }
}

Index.cshtml

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
@{
    ViewBag.Title = "Home Page";
}
 
 
<br />
<br />
<br />
<br />
@Html.DropDownList("MyChartList", (SelectList)ViewBag.DropDownValues)
 
<div id="chartNumber1">
    <img src="/Home/GetTestListSelectChart" />
</div>
<div>
    <br />
    <img src="/Home/GetRainfallChart" />
    <br />
    <img src="/Home/GetStormChart" />
</div>

Merci pour votre aide...

[elbj]

Hello

Alors soit tu gères ça par un POST : la dropdown se met dans une form avec un bouton "changer" qui appelle le contrôleur qui va redéfinir le graphique et réafficher la vue.

Soit tu gères ça avec javascript. Tu interceptes le changement de sélection de ta dropdown, tu effectue un appel à l'une des méthodes du contrôleur et tu rafraîchis ton graphique ainsi.

Cdt

[samsoul33]

Merci elbj pour ces pistes.
Je vais voir pour mettre ça en place et reviens ici si j'ai un soucis d'intégration.

Avant tout une petite question:
S'agissant d'une appli web, quelle est à priori l'option qu'il est préférable de choisir en terme de performance (sans prendre en compte l'expérience utilisateur : refresh auto ou clic pour rafraîchir).
Merci

[samsoul33]

Bon...
Malgré le desciptif des actions à effectuer, je n'arrive pas à changer le type de mon graphique...
Auriez-vous du code qui traine pour éclairer ma lanterne?

Par avance merci