Bar and Column charts very narrow when using datetime on x axis

Nov 18, 2013 at 8:38 PM
http://jsfiddle.net/YvA2s/

I am having issues with using bar and column charts with a datetime type as the x axis. I would like to have one bar per day, but it seems stuck on 1 bar per millisecond.

I have tried to set tickinterval to 8640000 to no avail..
Coordinator
Nov 18, 2013 at 11:20 PM
Add one more zero to your tickInterval (86400000). Also is good to use pointRange with the same value (86400000).

http://jsfiddle.net/YvA2s/1/
Nov 20, 2013 at 6:25 PM
Okay, I see that that works with js, how do I implement that with dotnet?

this is returning a null reference exception
    Dim seriesOpts As New Options.Series


    seriesOpts.PlotOptionsColumn.PointRange = 86400000
Nov 22, 2013 at 1:55 PM
any ideas at all?
Coordinator
Nov 28, 2013 at 6:22 AM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Coordinator
Nov 28, 2013 at 6:53 AM
Here is example how you can use PointRange property:
object[,] data1 =
                {
                    { new DateTime(2013, 11, 17), 1758 },
                    { new DateTime(2013, 11, 16), 2172 },
                    { new DateTime(2013, 11, 15), 1991 },
                    { new DateTime(2013, 11, 14), 1671 },
                    { new DateTime(2013, 11, 13), 2365 },
                    { new DateTime(2013, 11, 12), 1518 },
                    { new DateTime(2013, 11, 11), 1932 }
                };

            object[,] data2 =
                {
                    { new DateTime(2013, 11, 17), 15099.50 },
                    { new DateTime(2013, 11, 16), 17533.50 },
                    { new DateTime(2013, 11, 15), 17370 },
                    { new DateTime(2013, 11, 14), 9224 },
                    { new DateTime(2013, 11, 13), 14602.50 },
                    { new DateTime(2013, 11, 12), 11506.50 },
                    { new DateTime(2013, 11, 11), 11663.50 }
                };

            Highcharts chart = new Highcharts("chart")
                .InitChart(new Chart { Type = ChartTypes.Column })
                .SetPlotOptions(new PlotOptions
                {
                    Column = new PlotOptionsColumn { PointRange = 86400000 }
                })
                .SetTitle(new Title { Text = "Task Duration vs Baseline" })
                .SetXAxis(new XAxis
                {
                    TickInterval = 86400000,
                    Type = AxisTypes.Datetime
                })
                .SetSeries(new[]
                {
                    new Series { Data = new Data(data1), Name = "Actual Duration" },
                    new Series { Data = new Data(data2), Name = "Baseline Duration" },
                });
Marked as answer by Vangi on 11/28/2013 at 10:45 AM
Nov 28, 2013 at 2:39 PM
Could I possible get a vb example, sorry :( my understanding of C# syntax is pretty bad..
Coordinator
Nov 28, 2013 at 6:45 PM
Sorry, also my VB skills are very poor. But I converted the code with a online tool:
Dim data1 As Object(,) = {{New DateTime(2013, 11, 17), 1758}, {New DateTime(2013, 11, 16), 2172}, {New DateTime(2013, 11, 15), 1991}, {New DateTime(2013, 11, 14), 1671}, {New DateTime(2013, 11, 13), 2365}, {New DateTime(2013, 11, 12), 1518}, _
    {New DateTime(2013, 11, 11), 1932}}

Dim data2 As Object(,) = {{New DateTime(2013, 11, 17), 15099.5}, {New DateTime(2013, 11, 16), 17533.5}, {New DateTime(2013, 11, 15), 17370}, {New DateTime(2013, 11, 14), 9224}, {New DateTime(2013, 11, 13), 14602.5}, {New DateTime(2013, 11, 12), 11506.5}, _
    {New DateTime(2013, 11, 11), 11663.5}}

Dim chart As Highcharts = New Highcharts("chart").InitChart(New Chart() With { _
    Key .Type = ChartTypes.Column _
}).SetPlotOptions(New PlotOptions() With { _
    Key .Column = New PlotOptionsColumn() With { _
        Key .PointRange = 86400000 _
    } _
}).SetTitle(New Title() With { _
    Key .Text = "Task Duration vs Baseline" _
}).SetXAxis(New XAxis() With { _
    Key .TickInterval = 86400000, _
    Key .Type = AxisTypes.Datetime _
}).SetSeries(New () {New Series() With { _
    Key .Data = New Data(data1), _
    Key .Name = "Actual Duration" _
}, New Series() With { _
    Key .Data = New Data(data2), _
    Key .Name = "Baseline Duration" _
}})
I hope this can help you.
Dec 2, 2013 at 4:09 PM
This example updates the column pointrange, I would like to update the series pointrange
    plotOptions: { column: { pointRange: 86400000 } }, 
VS
    plotOptions: {
        series: {
            pointRange: 86400000
        }
Dec 2, 2013 at 4:20 PM
This is causing my bar charts to render with the proper width, but the tooltip still measures their value in milliseconds
Dec 2, 2013 at 4:31 PM
nevermind, I resolved this by linking to the newest highcharts library