Whalensdad
Posts: 56
Joined: Tue Jun 01, 2021 4:14 pm

Populate HighCharts Dataset in Javascript from ViewData Object .Net Core

I'm trying to use HighCharts in .Net and having difficulty in populating the dataset that HighCharts uses on the chart. Originally I was doing it in the view using the following:

Code: Select all

new BubbleSeries
{
     Data = (ViewData["bubble1"] as List<BubbleSeriesData>)
},
This works, but it leaves me with having to do the rest of the formatting of HighCharts in the Razor view. Since most of your examples utilize javascript I thought I would try a different tact and build the chart in a script tag in the view. The issue I am having is how would I assign the "ViewData" to the data object.

How can I replace this:

Code: Select all

series: [{
            data: [
                { x: 95, y: 95, z: 13.8, name: 'BE', country: 'Belgium' },
                { x: 86.5, y: 102.9, z: 14.7, name: 'DE', country: 'Germany' },
                { x: 80.8, y: 91.5, z: 15.8, name: 'FI', country: 'Finland' },
                { x: 80.4, y: 102.5, z: 12, name: 'NL', country: 'Netherlands' },
                { x: 80.3, y: 86.1, z: 11.8, name: 'SE', country: 'Sweden' },
                { x: 78.4, y: 70.1, z: 16.6, name: 'ES', country: 'Spain' },
                { x: 74.2, y: 68.5, z: 14.5, name: 'FR', country: 'France' },
                { x: 73.5, y: 83.1, z: 10, name: 'NO', country: 'Norway' },
                { x: 71, y: 93.2, z: 24.7, name: 'UK', country: 'United Kingdom' },
                { x: 69.2, y: 57.6, z: 10.4, name: 'IT', country: 'Italy' },
                { x: 68.6, y: 20, z: 16, name: 'RU', country: 'Russia' },
                { x: 65.5, y: 126.4, z: 35.3, name: 'US', country: 'United States' },
                { x: 65.4, y: 50.8, z: 28.5, name: 'HU', country: 'Hungary' },
                { x: 63.4, y: 51.8, z: 15.4, name: 'PT', country: 'Portugal' },
                { x: 64, y: 82.9, z: 31.3, name: 'NZ', country: 'New Zealand' }
            ]
        }]
with this:

Code: Select all

series: [{
            data: [
               (ViewData["bubble1"] as List<BubbleSeriesData>)
            ]
        }]
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Populate HighCharts Dataset in Javascript from ViewData Object .Net Core

Hi Whalensdad,

The examples on our website are created in such a way that the data is processed in the controller and the configuration of the chart and its firing are in the view, but it does not have to be this way. You can set all options in the controller and pass one object to the view.

Best regards!
Hubert Kozik
Highcharts Developer
Whalensdad
Posts: 56
Joined: Tue Jun 01, 2021 4:14 pm

Re: Populate HighCharts Dataset in Javascript from ViewData Object .Net Core

I've found an example online using the older DotNet.Highcharts api. https://www.c-sharpcorner.com/article/d ... p-net-mvc/. I'm trying to duplicate this using the newer Highsoft.Highcharts (9.3.2.1) api. There are a few syntax differences that I'm hoping you can help with.

1. The style object is a hashtable. How can I convert the following to a hashtable?

Code: Select all

Style = "fontWeight: 'bold', fontSize: '17px'"
2. The data values in the example are encapsulated in a Series object. In the new api there is no data object in the series. I'm guessing it corresponds to the Data object in the Chart. How can I change this to populate the data object?

Code: Select all

columnChart.Series = (new Series[]
{
    new Series{

        Name = "Sachin Tendulkar",
        Data = new Data(new object[] { 812, 412, 628, 1425, 460, 972, 204, 513, 315 })
    },
    new Series()
    {
        Name = "M S Dhoni",
        Data = new Data(new object[] { 19, 895, 821, 1103, 1097, 1198, 600, 764, 524, })
    }
}
3. How do I change this since there is no longer a BackgroundColorGradient?

Code: Select all

BackgroundColor = new BackColorOrGradient(ColorTranslator.FromHtml("#FFADD8E6"))
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Populate HighCharts Dataset in Javascript from ViewData Object .Net Core

Hello Whalensdad, sorry for the late reply.

DotNet.Highcharts is not our official wrapper, so you cannot take an example from an article that you've mentioned and try to use it with our official wrapper, which is Highsoft.Highcharts.

According to the topic of setting all options in the controller and passing one object to the view, I am attaching a URL to download a file with an example demo of this here: https://www116.zippyshare.com/v/Tv7rgMVA/file.html

If you want you can write to me a private message with your email address and I can send it directly to you :)

Let me know if you have any further questions!
Regards!
Hubert Kozik
Highcharts Developer
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Populate HighCharts Dataset in Javascript from ViewData Object .Net Core

You're welcome! In case of any further questions, feel free to contact us again.
Hubert Kozik
Highcharts Developer

Return to “Highcharts Usage”