Click here to Skip to main content
15,667,864 members
Please Sign up or sign in to vote.
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
Updated 31-Aug-18 19:17pm

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[^]
 
Share this answer
 
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.
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
 
Share this answer
 
that's is not good for passing data like that
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900