rji rji rji rji - 6 months ago 15
Javascript Question

Breakage in highchart generation

This is my json data

[
{
"project_title":"sdsdsd",
"project_ref_id":"112",
"amount":"232323.00",
"months":"Mar-2015"
},{
"project_title":"test project 44",
"project_ref_id":"113",
"amount":"13000.00",
"months":"Feb-2016"
},{
"project_title":"sdsdsd",
"project_ref_id":"112",
"amount":"50000.00",
"months":"Mar-2016"
},{
"project_title":"hello wolrd",
"project_ref_id":"111",
"amount":"30000.00",
"months":"Mar-2016"
},{
"project_title":"sdsdsd",
"project_ref_id":"112",
"amount":"2000.00",
"months":"Apr-2016"
},{
"project_title":"road construction",
"project_ref_id":"108",
"amount":"1000.00",
"months":"Apr-2016"
},{
"project_title":"road construction",
"project_ref_id":"108",
"amount":"299090.00",
"months":"May-2016"
},{
"project_title":"sdsdsd",
"project_ref_id":"112",
"amount":"384357.00",
"months":"May-2016"
},{
"project_title":"road construction",
"project_ref_id":"108",
"amount":"2365236.00",
"months":"Jun-2016"
}
]


I am trying to generate a high chart with month in x-axis, amount in y-axis

This is the code which I tried http://jsfiddle.net/4bsvjzus/5/

Thechart which is generated is correct, but there is a breakage in the line.

If you see in the above fiddle code. The project with name
project1
has the amount
232323
in
mar-2015
and
50000
in
mar-2016
,
2000
in
apr-2016
,
384357
in
may-2016
.There is no data for project
project1
in
feb-2016
, hence the graph breaked at
feb-2016
, whereas there is data for
feb-2016
for other projects.

Hence whenever there is no data for a particular month the graph is breaking and continuing from the month which has data.

The graph must not break in the middle. If there is no data for a month, the graph must show a point with value
0
for that month

Answer

I remember answering a very similar question of you a few days back. It also had sparse y-values problem to break the graph. I copy here the very same solution which apparently works just fine. The (new Array(months.length)).fill(0).map((e,i) => i === months.indexOf(c.months) line is in charge to form an initial array filled with zeros and with a value for the months index position. (i.e. Jan value at index 0 Dec value at index 11)

var data = [{"project_title":"sdsdsd","project_ref_id":"112","amount":"232323.00","months":"Mar-2015"},{"project_title":"test project 44","project_ref_id":"113","amount":"13000.00","months":"Feb-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"50000.00","months":"Mar-2016"},{"project_title":"hello wolrd","project_ref_id":"111","amount":"30000.00","months":"Mar-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"2000.00","months":"Apr-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"1000.00","months":"Apr-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"299090.00","months":"May-2016"},{"project_title":"sdsdsd","project_ref_id":"112","amount":"384357.00","months":"May-2016"},{"project_title":"road construction","project_ref_id":"108","amount":"2365236.00","months":"Jun-2016"}],
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>