JSON object to highchart

Question

0.00/5 (No votes)

See more:

Hi
I am new to JSON so wanted to ask you how to pass the returned JSON data and put it directly into Highcharts. This is my data:

JSON = [{"name":"Book","data":[14,17,9,10,6,19,6,8,0,4]},{"name":"Book Chapter","data":[65,74,44,66,9,23,36,51,53,36]},
{"name":"Conference Proceedings","data":[15,17,27,30,28,54,35,43,50,35]},{"name":"Journal Article","data":[178,162,133,139,133,191,160,194,149,169]}]

If I put that directly like this Series: JSON, it does not work, but if I specify manually then it does. I do not know why. Please help.

Regards
Buksh

What I have tried:

Have tried using the below,

$('#chartTrendsPublicationRankDetailed').highcharts({
           chart: {
               type: 'line'
           },
           title: {
               text: 'My data'
           },
           xAxis: {
               categories: ['2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015', '2016']
           },
           series: [{ "name": "Book", "data": [14, 17, 9, 10, 6, 19, 6, 8, 0, 4] }, { "name": "Book Chapter", "data": [65, 74, 44, 66, 9, 23, 36, 51, 53, 36] }, { "name": "Conference Proceedings", "data": [15, 17, 27, 30, 28, 54, 35, 43, 50, 35] }, { "name": "Journal Article", "data": [178, 162, 133, 139, 133, 191, 160, 194, 149, 169] }]

       });

This works, but I need to pass the variable and specify manually.

Posted 4-Jul-17 14:16pm

shafraz buksh

Updated 31-Aug-18 19:17pm

PIEBALDconsult

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Answer 1 · 2017-07-04T17:37:00

Solution 1

Ok, I'm just guessing based on what was presented. Your application has a highcharts charts and the series data (JSON format) return by an API? I further assumed that the return data is stored in a variable called JSON? You might have to rename it if that the case, it kinda confusing. When you plug in the variable to the series, the charts show nothing (blank)? But if you paste the data directly, it worked?

I'm assuming the data was being returned as a string? If that the case, you need to add a line in the code to parse the string into JSON using JSON.parse() method. Here is an example. Also, make sure there are no line break in the data, everything should be in one long string.

Highcharts Demo - JSON String[^]

Posted 4-Jul-17 17:37pm

Bryian Tan

Comments

[no name] 5-Jul-17 2:13am

agreed +5

shafraz buksh 5-Jul-17 17:34pm

Thanks for your reply Gaurav. My answer below:
When you plug in the variable to the series, the charts show nothing (blank)? But if you paste the data directly, it worked?Yes pasting the data worked.
I'm assuming the data was being returned as a string? Sorry sharing code below. The data returned is an array. How do I go on about this?

//Controller
public JsonResult _GetChart_TrendPublicationTypeDetailed_Data(int yearToDisplay)
{
//Types of publications to be considered
string[] publication_types = new string[] { "article", "book", "book_section", "conference_proceedings" };

//Get the list of outputs with usp authors
var uspPubs = _uspAuthoredPublications();

//List of years for which to display the data
List<int> yearRange = _getListOfYears(yearToDisplay, yearRangeFactor_10);

//Get the data
var data = from eprint_summary in localDB.Summary
where
eprint_summary.Year > (yearToDisplay - yearRangeFactor_10)
&& eprint_summary.Year <= yearToDisplay
&& publication_types.Contains(eprint_summary.TypeCode)
&& uspPubs.Contains(eprint_summary.EprintId)
//&& eprint_summary.refereed == "TRUE" //TODO: Confirm whether we need this filter in our counts
group eprint_summary by new { eprint_summary.Year, eprint_summary.TypeDesc } into typeTrend
orderby typeTrend.Key.Year, typeTrend.Key.TypeDesc
select new
{
Year = typeTrend.Key.Year,
Type = typeTrend.Key.TypeDesc,
Count = typeTrend.Count()
};

//Extract the series data
List<object> countData = new List<object>();
foreach (var item in data.ToList().Select(y => y.Type).Distinct().OrderBy(y => y))
{
List<int> yearlyData = new List<int>();
foreach (var year in yearRange)
{
var rec = data
.Where(y => y.Type == item)
.Where(y => y.Year == year)
.Select(y => y.Count).ToArray();
yearlyData.Add(
rec == null || rec.Length == 0 ? 0 : rec[0]
);
}

countData.Add(
new
{
name = item, //Name of the series
data = yearlyData.ToArray() //Array of data
}
);
}

//Form the json object using the series data and labels
return Json(
new
{
labels = yearRange.ToArray(),
series = countData
},
JsonRequestBehavior.AllowGet
);
}

//Index.cshtml

var seriesData = ' ';

function ajaxCall() {
$.ajax({
type: "post",
datatype: "Json",
async: true,
url: '@Url.Action("_GetChart_TrendPublicationTypeDetailed_Data", "ResearchCharts")',
data: { yearToDisplay: '@(DateTime.Now.AddYears(-1).Year.ToString())' },
success: function (data) {
seriesData = data.series;
//alert(JSON.stringify(seriesData));
bindChart(seriesData);
//seriesData = data.series;
//alert(JSON.stringify(da

[no name] 12-Jul-17 9:00am

Hi @shafraz buksh
Might be its quotes issue in JSON parameters.
https://github.com/highcharts/highcharts/issues/5107

shafraz buksh 12-Jul-17 17:16pm

Hi @Gaurav1641

I managed to get a fix without doing any unnecessary coding. See below as my solution. Thanks for your help.

shafraz buksh · Answer 2 · 2017-07-12T11:21:00

Previous highcharts rendering code:

$('#chartTrendsPublicationRankDetailed').highcharts({
           chart: {
               type: 'line'
           },
           title: {
               text: 'My data'
           },
           xAxis: {
               categories: labels
           },
           series: seriesData

       });

New Highcharts rendering code. This accepts my JSON objects successfully and renders the graphs.

function bindChartItemType(seriesData, labels) {

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'chartTrendsPublicationTypeDetailed',
                type: 'line',
                height: 500,
                width: 500
            },
            credits: {
                enabled: false
            },
            title: {
                text: 'Trend of Publications by Item Type'
            },
            xAxis: {
                categories: labels,
                title: {
                    text: 'Year'
                }
            },
            yAxis: {
                min:0,
                title: {
                    text: '# of publications'
                }
            },
            series: seriesData
        });
    }

Feel free to add anything you like in the comments.

Regards
Shafraz Buksh

Member 13969195 · Answer 3 · 2018-08-31T19:18:00

Solution 3

that's is not good for passing data like that

Posted 31-Aug-18 19:18pm

Member 13969195