Incorrect Generation Of Highcharts

I am getting data in json format as below

Solution 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

Solution 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: (newArray(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
    });

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://code.highcharts.com/highcharts.js"></script><scriptsrc="https://code.highcharts.com/modules/exporting.js"></script><divid="container"style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Share