Column color change based on value in Highchart chart with MVC3

Question

I am using Dotnet Highchart with MVC3

I am currently working with a chart that looks like this:

I am trying to change my code to change the color on the bars depending on how many they have. I also wonder how I can remove the "Snittbetyg" button, as you can see in the image.

This is my code:

public ActionResult OfficeStatistic() { { Highcharts chart1 = new Highcharts("chart1") .SetXAxis(new XAxis { Categories = new[] { "Ödmjukhet", "Engagemang", "Kompetens", "Lönsamhet" } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Betygskalan" } }) .SetSeries(new Series { Data = new Data(new object[] { 1, 8, 9, 6 }), Name = "Snittbetyg" }) .SetTitle(new Title { Text = "Örebro Statistik" }) .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }); return View(chart1); } } 

Any help is appreciated.

Thanks in advance!

Answer 1

I have not used Highchart, but you can download examples from the codeplex page. It seems that both of your requirements can be easily achieved.

Remove the Snittbetyg Button

Disable legend:

 .SetLegend(new Legend { Enabled = false }); 

Add colors

For ordinary data, use only numbers instead of numbers:

 Data data = new Data(new[] { new Point { Y = 1, Color = System.Drawing.Color.Red }, new Point { Y = 8, Color = System.Drawing.Color.Blue }, new Point { Y = 9, Color = System.Drawing.Color.Green }, new Point { Y = 6, Color = System.Drawing.Color.Black } }); Highcharts chart1 = new Highcharts("chart1") .SetXAxis(new XAxis { Categories = new[] { "Ödmjukhet", "Engagemang", "Kompetens", "Lönsamhet" } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Betygskalan" } }) .SetSeries(new Series { Data = data, Name = "Snittbetyg" }) .SetTitle(new Title { Text = "Örebro Statistik" }) .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) .SetLegend(new Legend { Enabled = false }); 

---

There seems to be no built-in way to make highchart automatically color the panel based on the y value. I believe that you will need to choose a color yourself, for example:

  private System.Drawing.Color GetBarColour(int value) { if (value < 5) return System.Drawing.Color.Red; if (value > 7) return System.Drawing.Color.Green; return System.Drawing.Color.Orange; } public ActionResult OfficeStatistic() { { var dataItems = new[] {1, 8, 9, 6}; Data data = new Data( dataItems.Select(y => new Point {Color = GetBarColour(y), Y = y}).ToArray() ); Highcharts chart1 = new Highcharts("chart1") .SetXAxis(new XAxis { Categories = new[] { "Ödmjukhet", "Engagemang", "Kompetens", "Lönsamhet" } }) .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Betygskalan" } }) .SetSeries(new Series { Data = data, Name = "Snittbetyg" }) .SetTitle(new Title { Text = "Örebro Statistik" }) .InitChart(new Chart { DefaultSeriesType = ChartTypes.Column }) .SetLegend(new Legend { Enabled = false }); 

Answer 2

• First define the first element of the list of list elements for the color value and the second

   List<Tuple<string, Object>> dataItems = new List<Tuple<string, Object>>(); 

• I pass the value with swtich, this is not necessary

  SqlDataReader reader = myComm.ExecuteReader ();

    if (reader.HasRows) { string colorName =""; while (reader.Read()) { switch ((string)reader.GetValue(1)) { case "Total Employee(s)": colorName = "Blue"; break; case "Present": colorName = "Green"; break; case "Late": case"Absent": case "During Less": case "Early Going": colorName = "Red"; break; case "Leave": colorName = "Orange"; break; default: colorName = "Gray"; break; } dataItems.Add(new Tuple<string, Object>(colorName, reader.GetValue(2))); } 

• Now finally add the data to the series object

   new Series{ Name = "Employees", Data = new Data( dataItems.Select(y => new Point { Color = System.Drawing.Color.FromName(y.Item1), Y = (int)y.Item2 }).ToArray() ) }