Chart helper in ASP.Net Display DateTime

Question

In a asp.net mvc application, I need to create a simple line-chart, so I tried Chart helper. The chart is created using two list, the x-axis should display datetimes, and the y-axis should display a value for each time. Now this works fine using the code below. "listOfDateTimes" consists a list of DateTimes.

    var chart = new Chart(width: 1000, height: 300, theme: ChartTheme.Green)
        .AddSeries(
                    chartType: "line",
                    xValue: listOfDateTimes,
                    yValues:  listOfValues )
                    .GetBytes("png");

The problem is that the datetimes below the x-axis shows up as "MM/dd/yyyy", but I also need to display the hour and minutes. I can't figure out how to solve this using Chart helper.

jsanalytics · Accepted Answer · 2016-12-17 12:06:33Z

5

When using Chart Helper you have to customize your chart by providing your own theme file:

 var myChart = new Chart(width: 800, height: 400, themePath: "MyTheme3.xml")
              .AddSeries(
                          chartType: "line",
                          xValue: new[] { DateTime.Now,
                              DateTime.Now.AddSeconds(1),
                              DateTime.Now.AddSeconds(2),
                              DateTime.Now.AddSeconds(3),
                              DateTime.Now.AddSeconds(4) },
                          yValues: new[] { 40, 100, 60, 80, 20 })

Use this sample theme to customize your X-axis as described:

MyTheme3.xml:

<?xml version="1.0" encoding="utf-8" ?>
<Chart>
  <ChartAreas>
    <ChartArea Name="Default">
      <AxisX>
        <LabelStyle Format="MM/dd/yyyy hh:mm:ss"></LabelStyle>
      </AxisX>
    </ChartArea>
  </ChartAreas>
  <Series>
    <Series Name="Default"></Series>
  </Series>
</Chart>

EDIT: If you want to configure your chart the regular way through properties, then you should use System.Web.UI.DataVisualization.Charting namespace. But if you want to use System.Web.Helpers namespace then you have to do it like explained before.

edited Dec 17, 2016 at 12:06

answered Dec 16, 2016 at 0:10

jsanalytics

13.2k4 gold badges27 silver badges46 bronze badges

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

1 Comment

Andreas Over a year ago

Thank you! That fixed my problem. For future visitors: Here is some examples that gives you a hint of what you can customize on your xml. dzone.com/articles/chart-helper-aspnet-mvc-3

Collectives™ on Stack Overflow

Chart helper in ASP.Net Display DateTime

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related