incorrect generation of highcharts

Question

I am getting data in json format as below

 <?php $monthlyParticipation='[{"project_title":"test project 44","project_ref_id":"113","amount":"13000.00","months":"Feb"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"50000.00","months":"Mar"},{"project_title":"testing123","project_ref_id":"104","amount":"232323.00","months":"Mar"},{"project_title":"hello wolrd","project_ref_id":"111","amount":"30000.00","months":"Mar"},{"project_title":"road construction","project_ref_id":"108","amount":"1000.00","months":"Apr"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"2000.00","months":"Apr"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"354357.00,30000.00","months":"May"}]'; ?>

The months has to represented in x-axis. In y-axis, project_title as name under series, amount as data under series

I have tried the below code https://jsfiddle.net/neb22v3j/1/

But the graph generated is incorrect. It doesnt match with the json data

The x-axis must be the month y-axis should display the amount against the project_title. What I tried is giving the amount of a month to some other month. The amount is not relevant to the month under which it is displaying.

Please help me to fix the issue

Answer 1

For your point to be assigned to the correct month you have to pass null as the value for all the months that don't have data.

I wrote a new function to parse the data that sets the datapoint value to null if the project doesn't have a value for the current month. (check the comments in the code)

JSfiddle

Answer 2

I guess the answer to your question is here

var data = [ { project_title: 'test project 44',
    project_ref_id: '113',
    amount: '13000.00',
    months: 'Feb' },
  { project_title: 'sdsdsd',
    project_ref_id: '112',
    amount: '50000.00',
    months: 'Mar' },
  { project_title: 'testing123',
    project_ref_id: '104',
    amount: '232323.00',
    months: 'Mar' },
  { project_title: 'hello wolrd',
    project_ref_id: '111',
    amount: '30000.00',
    months: 'Mar' },
  { project_title: 'road construction',
    project_ref_id: '108',
    amount: '1000.00',
    months: 'Apr' },
  { project_title: 'sdsdsd',
    project_ref_id: '112',
    amount: '2000.00',
    months: 'Apr' },
  { project_title: 'sdsdsd',
    project_ref_id: '112',
    amount: '354357.00',
    months: 'May' } ],
months = data.reduce((p,c) => ~p.indexOf(c.months) ? p : p.concat(c.months),[]),
series = data.reduce((p,c) => { var f = p.find(f => f.name == c.project_title);
                                !!f ? f.data[months.indexOf(c.months)] = c.amount*1
                                    : p.push({name: c.project_title,
                                              data: (new Array(months.length)).fill(0).map((e,i) => i === months.indexOf(c.months) ? c.amount*1 : e)});
                                return p;
                               },[]);
    $('#container').highcharts({
        title: {
            text: 'Retaielr Clicks',
            x: -20 //center
        },
        subtitle: {
            text: 'Date',
            x: -20
        },
         xAxis: {
            categories: months
        },
        yAxis: {
            title: {
                text: 'Clicks'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
              //  valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: series
    });

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>