Highcharts

Bibliothèque JavaScript

API

Highcharts.NET

Bibliothèque .NET officiel pour utiliser Highcharts depuis ASP.NET MVC
Licence payante!

DotNet.Highcharts

Bibliothèque .NET pour utiliser Highcharts depuis ASP.NET. Licence MIT.

<head runat="server">
  <!-- ... -->
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
</head>

<body>
  <asp:Literal id="myChart" runat="server"></asp:Literal>

protected void Page_Load(object sender, EventArgs e)
{
  var chart = new Highcharts("chart")
    .SetTitle(new Title { Text = "Health Manager" })
    .SetSubtitle(new Subtitle() { Text = "Mon Sous-Titre" })
    .SetXAxis(new XAxis
    {
      Categories = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" }
    })
    .SetSeries(new[]
    {
      new Series
      {
        Data = new Data(new object[] { 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4 })
      },
      new Series
      {
        Data = new Data(new object[] { ... })
      }
  });

  myChart.Text = chart.ToHtmlString();

Thèmes

<head>
    <script src="js/dark-unica.js"></script>

Commenter la ligne import Highcharts from '../parts/Globals.js';

Color

Ajouter l'assembly System.Drawing

Color c = ColorTranslator.FromHtml("Red");

Afficher les valeurs de tous les points

var chart = new Highcharts("chart")
    .SetPlotOptions(new PlotOptions
    {
        Line = new PlotOptionsLine
        {
            DataLabels = new PlotOptionsLineDataLabels
            {
                Enabled = true
            }
        }
    });

Tooltips de la sourie

var chart = new Highcharts("chart")
    .SetTooltip(new Tooltip { Shared = true, Crosshairs = new Crosshairs(true, false), Enabled = true });
// Shared: un tooltip pour toutes les courbes
// Crosshairs(x,y): trace une ligne

AxisTypes

L'axe X est du type Datetime, les données contiennent des paires date + valeur.
Chaque valeur est ainsi placée à la date qui lui est associée.

object[,] chartData = new object[dailyValues.Count, 2];
int i = 0;
foreach (var dv in dailyValues)
{
    chartData1.SetValue(dv.Date, i, 0);
    chartData1.SetValue(dv.Poids, i, 1);
    i++;
}

var chart = new Highcharts("chart")
    .SetXAxis(new XAxis { Type = AxisTypes.Datetime })
    .SetYAxis(new YAxis
    {
        Labels = new YAxisLabels { Format = "{value} kg", Style = "color: '#999',fontWeight: 'bold'" },
        Title = new YAxisTitle { Text = "Poids", Style = "color: '#AAA'" }
    })
    .SetSeries(new Series { Name = "Poids", YAxis = "0", Data = new Data(chartData) });

PlotLines

Permet de tracer une ligne.

var chart = new Highcharts("chart")
    .SetYAxis(
        new YAxis
        {
            PlotLines = new[]
            {
                new YAxisPlotLines
                {
                    Value = Number.GetNumber(10),
                    Label = new YAxisPlotLinesLabel { Text = "Max" }, 
                    Color = ColorTranslator.FromHtml("Red"),
                    Width = Number.GetNumber(1)
                }
            }
        })
    .SetXAxis(
        new XAxis
        {
            Type = AxisTypes.Datetime,
            PlotLines = new[]
            {
                new XAxisPlotLines
                {
                    Value = Number.GetNumber(
                      (double)new DateTimeOffset(new DateTime(2017, 1, 10, 0, 0, 0)).ToUnixTimeMilliseconds()),
                    Label = new XAxisPlotLinesLabel { Text = "Super date", Style = "color: 'orange'" }, 
                    Color = ColorTranslator.FromHtml("orange"),
                    Width = Number.GetNumber(1)
                }
            }
        })

PlotBands

var chart = new Highcharts("chart")
    .SetXAxis(
    new XAxis
    {
        Type = AxisTypes.Datetime,
        PlotBands = new[]
        {
            new XAxisPlotBands
            {
                From = Number.GetNumber(
                  (double)new DateTimeOffset(new DateTime(2017, 1, 10, 0, 0, 0)).ToUnixTimeMilliseconds()),
                To = Number.GetNumber((double)DateTimeOffset.UtcNow.ToUnixTimeMilliseconds()),
                Label = new XAxisPlotBandsLabel { Text = "Période", Style = "color: 'orange'" },
                Color = ColorTranslator.FromHtml("#372E24")
            }
        }
    })

Erreurs

Not implemented serialization for type: Single

Data ne peut contenir des float, utiliser plutôt des double.