WPF Elements: Improved DateTime chart axis

Ever since version 1 of our WPF charting suite there has been support for plotting DateTime values along an axis. This is done by creating an instance of the DateTimeAxisValueConverter and using it to set the ValueConverter property of the chart axis. This gives the axis an undestanding of the type of data it is plotting so that it can automatically set the tick spacing and label values at different zoom levels. The results were reasonable, but there were many times when the spacing between labels would be nonsensical, for example, 7 minutes. Since this does not divide evenly into the 60 minutes of an hour, the labels along the axis are not that convenient to read.

In version 6.0 we greatly improved the DateTime chart axis support so that better intervals can be calculated at any zoom level. The DateTimeAxisValueConverter starts by looking at the current visible range of the axis, and determines an appropriate date/time unit to use – years, months, hours etc. Then it works out the number of those units to separate each tick mark and label. The number of separation units will divide evenly into the next date/time unit. For example minutes will divide evenly into 60, and hours will divide evenly into 24. This produces much nicer to read axes. Also, as you zoom the chart and cause the type of date/time unit to change, the format of the axis label will also change to reflect this.

Date Time Axis

Out of the box, the DateTimeAxisValueConverter will work out all this date/time unit stuff for you, but we also have a way for you to provide your own logic if you need to. This can be done by adding one or more DateTimeIntervalDefinition instances to the DateTimeValueConverter. On each interval definition, you can specify the minimum and maximum time-span that you want the definition to take effect on. Then you can set the date/time unit, the desired number of units, and the label string format. Here is a quick example:

<ms:DateTimeAxisValueConverter>
  <ms:DateTimeIntervalDefinition MinimumTimeSpan="1 Year" MaximumTimeSpan="2 Years" IntervalUnit="Month" InternalMagnitude="1" IntervalFormat="{}{0:MM yy}" />
</ms:DateTimeAxisValueConverter>

This is saying that if the range of the axis is currently between 1 and 2 years of data, then the ticks and labels will be separated by 1 month intervals. On the time-span properties we have a custom type converter that allows you to conveniently set the time values. In the above example you will see I’m simply writing “1 Year” and “2 Years”. Alternatively you can use the usual .Net TimeSpan input such as 5:0:0:0 (5 days). The intervalMagnitude value is optional. If you leave this out, the DateTimeValueConverter will take care of picking an appropriate unit count for you. This is great if you want a good value at all zoom levels but don’t want to create interval definitions for each unit count manually. If your chart is not going to be zoomed, but you still want to customize the time intervals, then you can take a shortcut by setting the IntervalUnit and IntervalMagnitude properties on the converter, rather than using an interval definition.

We hope you find the DateTime axis support useful in your applications. If you have any questions about WPF Elements charts, drop a comment on this blog post, or in the forums. If you don’t have WPF Elements yet, get the 60 day free trial now.

Tagged as WPF Elements

Nice Web Workbench improvements to start the year!

Here’s a quick list of the improvements and fixes we’ve made to Web Workbench over the past 2 months. All of these are available in the free version which you can grab right now from the Visual Studio Gallery.

Visual Studio 2013 support

We made some small tweaks to Web Workbench so that it now fully supports Visual Studio 2013.

Source maps for Less files

We’ve updated Web Workbench to support the latest version of Less so that source maps can be created when compiling Less files. By default this is disabled and can easily be activated by going to Tools -> Options -> Web Workbench -> Less and set “Produce source map file” to true. This can be a huge help to debugging your web sites.

Improved performance of Compass compile

When compiling files using Compass, we use the Force option to avoid some rare bugs. This has a negative effect on performance if you have a lot of sprites and so we’ve included the option to disable this. If you have a lot of sprites and find that Web Workbench is taking it’s time to compile, go to the Web Workbench options and set “Force Compass recompile” to false. This option can be found under the Compass category. Doing this will yield a significant improvement to the performance.

As well as that, we’ve made some improvements around when we compile file dependencies which has further improved the performance of Compiling Compass projects. No need to set an option for this one.

Other improvements and fixes

  • Outline and indent @include directive blocks.
  • Better handling for locating root folder.
  • Additional logic to ignore errors when compass import not found.

You can get all these improvements right now from the Visual Studio Gallery for free. If you have the pro version, just get the latest nightly build from your account page.

Tagged as Web Workbench

November updates – what’s new from Mindscape?

Developer Notes

WPF Elements

WPF Diagrams

  • Added DiagramSurface.IsVirtualizing option. (details)
  • Resolved selection bugs related to grouping. (details)
  • Resolved a selection bug when holding Ctrl or Shift in ReadOnly mode. (details)

Web Workbench

  • Update Less to 1.5.0
  • Outline and indent @include directive blocks.
  • Better handling for locating root folder.
  • Additional logic to ignore errors when compass import not found.

LightSpeed

  • Additional string parsing conversion support.
  • Use current culture for string parsing.
  • More string based parsing support for SQLite3.
  • Only care about the zero rows case.
  • Relax the OptimisticConcurrencyException check to support triggers etc. (details)
  • Switch to Invariant to match SQLite behavior.
  • Add additional IgnoreDataMember attributes. (details)

Raygun.io

  • Improved the performance across the app!
  • Improved search results
  • Several provider updates

As usual the free editions of the nightly builds are available right now from the downloads page, and the full editions from the store.

How to market to programmers (and how not to)

Not like the other

Last year I started my new job here at Mindscape. I outlined my feelings on this topic here.

Not only is starting a new job terrifying, but I was going to be the only lady in the company – and would be marketing for software developers, to software developers [Co-founder note: This is not for the want of hiring female developers, we wish there were more of them and is why we sponsor events like the Girl Geek Dinners etc].

Now, I have it under good authority (source: trying to market to developers for 2 years) that programmers are probably the most difficult group of people on earth to market to. I honestly think that it would be easier to convince Sad Keanu to be just a bit less sad than to convince a programmer to even have a look at your new product/service/amazing thing.

So upon starting this new job, I had no idea what to expect in terms of my ‘only girl’ and evil marketer status.

The only girl thing? Easy. Here’s what I discovered:

  • Eating pizza every week is not a good idea. Guys like to do that despite the fact that after a lunch of pizza you’re rendered incapable of doing much more than stare at your screen with half closed eyes, wishing that you were actually a cat and your only responsibilities included sleeping in the sun and staring at at your owner, plotting certain death.
  • I’ve been threatening since the beginning of time to implement yoga Wednesdays into our week to ease the strain of sitting at a desk all day, but I’m never greeted with much enthusiasm. In fact, I’m mostly greeted with nervous silence. I can guarantee if the females out numbered the males here they could be coerced into making it happen but as yet I’m on my own for this one. Maybe I should bribe them with pizza… and perfectly even slices of cake.

Enter technophobe!

 

Confused Otter.

This is how I felt surrounded by programmers.

Never mind trying to effectively market to programmers, I couldn’t even keep up with their lingo on the Twitters!

I needed to ask a million questions a day, everything from ‘what does commit mean’ to ‘why does anyone have to support IE anyway?’.

But when it came to marketing for Raygun, there came a point where asking questions just didn’t suffice. After ‘what even is an exception!?’, the only way to learn was to actually use Raygun myself and see what errors look like, and how to handle them.

Welcome hildawg.com! The time had come to buy the much coveted hildawg.com domain name and make the move from a WordPress hosted blog to one I could maintain all on my own, and use with the Raygun4WP plugin. 

 

MyFirstError

It was a happy day when I sent My First Error. Which sounds like a Fisher Price product.

 

And now the hard part is deciphering the error messages that get delivered obligingly into my inbox daily.

Considering I’m a noob with a blog there are a lot of them.


i_have_no_idea_what_i_m_doing

Codecademy to the rescue

Luckily I’m surrounded with plenty of support from my workplace and the internets to learn the great secrets of programming. In particular, Codecademy has been a huge help with teaching me the basics. And it’s free!

In my spare time, I’ve already built my first interactive web page with HTML and JavaScript (I actually made one 8 years ago at Uni, but I don’t count it because it didn’t actually work), as well as learnt the hows and whys of these languages. After that, Codecademy also offers courses in jQuery, PHP, Python and Ruby.

Although it may sound like it, I’m not endorsing Codecademy for reasons other than I just think it’s rad. There are SO many websites and resources out there to help out beginners like me. In particular, the rise of non-profit organisations and effort to support women in tech is very encouraging.

So, between the plethora of help resources I find online, and the patience of everyone at Mindscape in answering every question I ask without ever making me feel inferior for not knowing something, it gets easier and easier to understand how to fix things on my own blog, as well as extend advice to friends.  Hell, I got so excited that I’ve encouraged friends with kids to get them started now.

One. Other. Thing.

Now, I mentioned before that programmers are likely one of the most difficult audiences to market to. And when I said that, I meant actually nearly impossible. Developers are smart. They’re resourceful. They’re probably annoyed by your marketing copy and are extremely immune to advertising. Traditional marketing techniques just don’t work for this audience, and there’s no choice but to think beyond the status quo.

So I have had to work really, really hard to create a marketing strategy that works with this very unique audience. Considering nearly all of the textbook marketing ideas are out, I call this plan the ‘anti-marketing strategy’.

Actually, I just made that up then, but I like the sounds of so it stays ;-)

To be honest, there has been days where I’ve had to shake myself out of day dreams of marketing a product that is easily shot out of canons to screaming fans (seriously, if only we could shoot software out of canons), but really I’m glad I get to go to extraordinary lengths for an extraordinary audience.

So techniques that do work include first of all, creating a really great product that doesn’t need buzz words and cleverly worded copy to sell. Engaging with your users, always is a must. Talking with them, rather than shouting through an advertising funnel is always going to be best.

And if you’re going to advertise, use humour.


Advertising which makes fun of other advertising.
 

Advertising which makes fun of other advertising. The best kind.

Now, time to go throw some exceptions around (with glee).

Tagged as General

New WPF Heatmap Chart

Based on a developers request we have added a heatmap series to our WPF Elements charting suite. This is convenient for rendering heatmap images with custom color palettes on a cartesian chart. The HeatmapSeries has extremely high performance capable of rendering tens of thousands of colored points with real-time animations and still allow for smooth zooming and panning.

heatmap

The heatmap series displays a grid of colored squares based on the data you provide. The first thing you need to do to use the heatmap series is to implement a simple data point model object. A single data point is a mapping between an X axis value and array of doubles that will be used to render a single column of squares. Here is a simple example:

  public class DateTimeHeatmapPoint
  {
    private DateTime _dateTime;
    private double[] _data;
 
    public DateTimeHeatmapPoint(DateTime dateTime, double[] data)
    {
      DateTime = dateTime;
      Data = data;
    }
 
    public DateTime DateTime
    {
      get { return _dateTime; }
      set
      {
        _dateTime = value;
      }
    }
 
    public double[] Data
    {
      get { return _data; }
      set
      {
        _data = value;
      }
    }
  }

The Data property provides the array of double values to plot up the Y axis, and the DateTime property is the X axis plotting value. You can use any value you want to plot against the X axis such as numbers, DateTimes, strings or other objects. Now you can create a collection filled with instances of your data point implementation and use it to set the ItemsSource property of the HeatmapSeries. Now that the data model related parts are done, let’s look at how to set up the chart in xaml:

  <ms:Chart>
    <ms:HeatmapSeries ItemsSource="{Binding Data}" XBinding="{Binding DateTime}" YBinding="{Binding Data}">
      <ms:HeatmapSeries.SeriesBrush>
        <LinearGradientBrush>
          <GradientStop Offset="0" Color="#3471C3" />
          <GradientStop Offset="50" Color="#FFF02F" />
          <GradientStop Offset="100" Color="#E10F15" />
        </LinearGradientBrush>
      </ms:HeatmapSeries.SeriesBrush>
    </ms:HeatmapSeries>
    <ms:Chart.XAxis>
      <ms:ChartAxis LabelFormat="{}{0:hh:mm}" />
    </ms:Chart.XAxis>
  </ms:Chart>

Here you can see the HeatmapSeries is used just like any of our other charts series. Simply add an instance of HeatmapSeries within the Chart tags and set the various options you need. Since we are using a custom data point implementation, make sure to set the XBinding and YBinding properties to point to the appropriate properties on the data point as seen above. One thing that is slightly different compared to other series is the usage of the SeriesBrush property. Here you can set any gradient brush to specify the spectrum of colors to render each square in the heatmap. You can have any number of gradient stops, and the numbers that you use for the offsets should correlate to the magnitude of the data you’ve added to the double arrays. The HeatmapSeries will interpolate this gradient brush to select a color for each point of data.

The heatmap series also supports missing data. If one of your data points returns a null array, there will be a blank column rendered at the data point. Or if a Double.NaN value is found in an array, that square of data will be skipped. You can set the HeatmapSeries.MissingColor property to specify a color to render missing data points.

You can download a demo of the HeatmapSeries from here. To run this, make sure to add a reference to your Mindscape.WpfElements.dll. Don’t have WPF Elements yet? Grab the free trial here.

If you have any questions about using the HeatmapSeries or any of our other WPF controls, we’d love to hear from you in the forum.

With all these cool new additions to WPF Elements over this past year, we’ll be rolling out version 7 soon so stay tuned!

Tagged as WPF Elements

Archives

Join our mailer

You should join our newsletter! Sent monthly:

Back to Top