This project is read-only.

C# MVC datetime DoubleAxes chart problem ( /w example )

Jan 30, 2015 at 3:51 PM
Edited Feb 2, 2015 at 8:17 AM
Hi, I'm making a DualAxes chart filled by DB Data but due to a big number of record ( 5 minute every ster in several days ) i'm finding difficult filter the wole period. Takeing a look on Highcarts site i found this example); I've modified a bit the original in order to show you more or less my idea.

The point is: how can I set the code in order to make the same flexible filter?

Here mine code:
        public ActionResult DualAxes()
        {
            Highcharts chart = new Highcharts("chart")
                .InitChart(new Chart { ZoomType = ZoomTypes.X })
                .SetTitle(new Title { Text = "TITLE" })
                .SetSubtitle(new Subtitle { Text = "Desc" })
                .SetXAxis(new XAxis
                {
                    
                    Type = AxisTypes.Datetime
    
                })
                .SetYAxis(new[]
                {
                    new YAxis
                    {
                        Labels = new YAxisLabels
                        {
                            Formatter = "function() { return this.value; }",
                            Style = "color: '#89A54E'"
                        },
                        Title = new YAxisTitle
                        {
                            Text = "Session",
                            Style = "color: '#89A54E'"
                        }
                    },
                    new YAxis
                    {
                        Labels = new YAxisLabels
                        {
                            Formatter = "function() { return this.value +' %'; }",
                            Style = "color: '#4572A7'"
                        },
                        Title = new YAxisTitle
                        {
                            Text = "GRP",
                            Style = "color: '#4572A7'"
                        },
                        Opposite = true
                    }
                })
                .SetTooltip(new Tooltip
                {
                    Formatter = "function() { return ''+ this.x +': '+ this.y + (this.series.name == 'GRP' ? ' %' : ''); }"
                })
                .SetLegend(new Legend
                {
                    Layout = Layouts.Horizontal,
                    Floating = false,
                    BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFFFFF"))
                })
                .SetSeries(new[]
                {
                    new Series
                    {
                        
                        Name = "GRP",
                        Color = ColorTranslator.FromHtml("#0080ff"),
                        Type = ChartTypes.Column,
                        YAxis = "1",
                        Data = new Data(new object[] { 1.5 , 0 , 0 , 0 , 0 , 3.2 , 0 , 2.6 , 0 , 0 , 4.1 , 3.5 })
                        
                    },
                    new Series
                    {
                        
                        Name = "Session",
                        Color = ColorTranslator.FromHtml("#9c01c3"),
                        Type = ChartTypes.Spline,
                        Data = new Data(new object[] { 36 , 32 , 27 , 23 , 16 , 42, 38 , 39 , 32 , 24 , 57 , 49,})
                    }
                });

            return View(chart);
        }