Chart Options Object

Feb 1, 2012 at 8:16 PM
Edited Feb 1, 2012 at 8:23 PM

I DotNet.HighCharts working great in my project and it has been very useful.  I did have to add one new function to the dll for my project, so I thought I'd share it with you.

I needed a way to change the options of the chart at run time so I added a function called "ToChartOptsObject".  All I did was just modify the existing "ToHTMLString".

Highcharts.cs:

 

 public object ToChartOptsObject()
        {
            StringBuilder scripts = new StringBuilder();

            scripts.AppendLine("{", 1);

            scripts.Append(_Chart != null ? "chart: {{ renderTo:'{0}', {1} }}".FormatWith(_ContainerName, JsonSerializer.Serialize(_Chart, false)) : "chart: {{ renderTo:'{0}' }}".FormatWith(_ContainerName), 2);

            if (_Credits != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("credits: {0}".FormatWith(JsonSerializer.Serialize(_Credits)), 2);
            }

            if (_Labels != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("labels: {0}".FormatWith(JsonSerializer.Serialize(_Labels)), 2);
            }

            if (_Legend != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("legend: {0}".FormatWith(JsonSerializer.Serialize(_Legend)), 2);
            }

            if (_Loading != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("loading: {0}".FormatWith(JsonSerializer.Serialize(_Loading)), 2);
            }

            if (_PlotOptions != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("plotOptions: {0}".FormatWith(JsonSerializer.Serialize(_PlotOptions)), 2);
            }

            if (_Subtitle != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("subtitle: {0}".FormatWith(JsonSerializer.Serialize(_Subtitle)), 2);
            }

            if (_Title != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("title: {0}".FormatWith(JsonSerializer.Serialize(_Title)), 2);
            }

            if (_Tooltip != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("tooltip: {0}".FormatWith(JsonSerializer.Serialize(_Tooltip)), 2);
            }

            if (_XAxis != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("xAxis: {0}".FormatWith(JsonSerializer.Serialize(_XAxis)), 2);
            }

            if (_XAxisArray != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("xAxis: [{0}]".FormatWith(JsonSerializer.Serialize(_XAxisArray)), 2);
            }

            if (_YAxis != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("yAxis: {0}".FormatWith(JsonSerializer.Serialize(_YAxis)), 2);
            }
            else if (_YAxisArray != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("yAxis: {0}".FormatWith(JsonSerializer.Serialize(_YAxisArray)), 2);
            }

            if (_Exporting != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("exporting: {0}".FormatWith(JsonSerializer.Serialize(_Exporting)), 2);
            }

            if (_Navigation != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("navigation: {0}".FormatWith(JsonSerializer.Serialize(_Navigation)), 2);
            }

            if (_Series != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("series: [{0}]".FormatWith(JsonSerializer.Serialize(_Series)), 2);
            }
            else if (_SeriesArray != null)
            {
                scripts.AppendLine(", ");
                scripts.Append("series: {0}".FormatWith(JsonSerializer.Serialize(_SeriesArray)), 2);
            }
            scripts.AppendLine();
            scripts.AppendLine("}", 1);

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            object obj = serializer.DeserializeObject(scripts.ToString());

            return obj;
        }

 

Pretty much it lets you configure you chart and returns just the configuration object. Lets say you have a bar chart you build on page load and and use the "ToHTMLString" to render it in a literal control. Great, works awesome.  But then you want to add a button that users can click to change it to a line graph.  This is where "ToChartOptsObject" comes into play.  What I do is add the button to the page then attach a ajax call to a web service on the back end via the click event of the button.

So the button and ajax call would look something like this:

 

<input id="btnLineChart" type="button" value="Change Chart" onclick="getLineChart()" />
function getLineChart() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/getLineChart",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var opts = response.d;
                chart.destroy();
                chart = new Highcharts.Chart(opts);
            }
        });
    }

And the Web Service would look like this (written in VB.NET):

<WebMethod(EnableSession:=True)> _
    Shared Function getLineChart() As Object
        Dim connString = ConfigurationManager.ConnectionStrings("CampaignTableConnectionString")
        Dim conn As New SqlConnection(connString.ConnectionString)
        conn.Open()
        Dim sql As String = "SELECT Count([pg]) as cnt, [creation_date] FROM [PageTracking] WHERE [pg] = 'Home' GROUP BY [creation_date]"
        Dim dt As New DataTable
        Dim da As New SqlDataAdapter(sql, conn)
        da.Fill(dt)
        da.Dispose()
        conn.Close()

        Dim seriesArray(dt.Rows.Count - 1, 1) As Object
        Dim i As Integer = 0
        For Each drow As DataRow In dt.Rows
            Dim d As Date = CDate(drow("creation_date"))
            Dim dt1970 As New DateTime(1970, 1, 1)
            Dim current As DateTime = d.ToString("MM/dd/yyyy")
            Dim span As TimeSpan = current - dt1970
            Dim UTCdate As String = span.TotalMilliseconds.ToString()

            seriesArray(i, 0) = System.Convert.ToInt64(UTCdate)
            seriesArray(i, 1) = drow("cnt")
            i = i + 1
        Next

        Dim chart As Highcharts = New Highcharts("chart")

        Dim init As New Options.Chart
        init.DefaultSeriesType = Enums.ChartTypes.Line
        chart.InitChart(init)

        Dim titleOpts As New Title
        titleOpts.Text = "Total Page Visits"
        chart.SetTitle(titleOpts)

        Dim xAxis As New XAxis
        xAxis.Type = Enums.AxisTypes.DateTime
        chart.SetXAxis(xAxis)

        Dim yAxis As New YAxis
        Dim yAxisOpts As New YAxisTitle
        yAxisOpts.Text = "Visits"
        yAxis.Title = yAxisOpts
        chart.SetYAxis(yAxis)

        Dim ser As New Series
        ser.Name = page
        ser.Data = New Data(seriesArray)
        chart.SetSeries(ser)

        Dim obj As Object = chart.ToChartOptsObject()

        Return obj
    End Function

This might be useful for some people.  Just thought I'd share.  Also if you notice in the web service I had to do some trickery to get a UTC date which Highcharts likes.  
But I found no way to get a UTC date in VB.  So I created that code in the For loop to take a normal date and turn it into a UTC date. Maybe you could include something like that in a future release... it might be helpful.

 

zgood

Coordinator
Feb 1, 2012 at 10:22 PM

Hi zgood,

First, I'm glad to hear that the library is used in worked project. I'll support you as much I can.

Second, thank you for sharing your solution. I think it's helpful and I'll add it in the next version of the library but in different way. Also you can try pass the chart options like a string but not like object. In your solution, the DotNet.Highcharts library first serialize the object, then make deserialization it at the end is again serialized to JSON format. I've not tried this but it should work. 

About the UTC date, you can try to switch on/off with the GlobalOptions:

.SetOptions(new GlobalOptions { Global = new Global { UseUTC = false } })

P.S. If you find this library useful, please make a short review here http://dotnethighcharts.codeplex.com/releases/view/80649#ReviewsAnchor. It will be helpful for the other to decide to use or not the library.

Vangi 

Coordinator
Feb 1, 2012 at 10:25 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.
Coordinator
Feb 21, 2012 at 11:15 PM

It's implemented getting of the Highcharts options (changeset: 10250) and it will be included at the next release 1.1