CODEWITHSUNDEEP
javascripthighcharts
FreshPro
FreshPro

Reputation: 873

Highchart Graph Issue

I'm trying to use highcharts to display data which I get from the database. I push data to series like this:

var seriesDemo = {x: data[i]["fld_DateTime"], y:data[i]["fld_ConsumptionValue"] * 1, deviceType: data[i]["fld_DivisionId"]};
series[newSeriesIndex]["data"].push(seriesDemo);

x_axis = { categories: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"] };


var info = {
        chart: {
            type: 'spline',
            renderTo: divInfo,
            zoomType: 'x'
        },
        title: {
            text: title,
            x: -20
        },
        subtitle: {
            text: "",
            x: -20
        },
        xAxis: x_axis,
        yAxis: {
            title: {
                text: ''
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            shared: true,
            useHTML: true,
            pointFormatter: function() {                    
                    return this.series.name + ' : <b>' + this.y + '</b> ' + UNIT_TYPE[this.deviceType] + '<br/>' +
                    localize("em_consumption_comparison_report_price") + ' : <b>' + (this.y * UNIT_PRICE_ARRAY[this.deviceType]).toFixed(2) + '</b> ' + MONEY_UNIT_ARRAY[this.deviceType] + '<br/><br/>';
              },

            //xDateFormat: '%Y-%m-%d %H:%M:%S'
        },
        legend: {
            borderWidth: 0
        },
        series: series
    };
    var chart = new Highcharts.Chart(info);

There isn't any error/warnings in the console, but no graph is displayed which can be seen in the below photo enter image description here

There's data and format seems good. My Data Array's output (which I can see from console is like this):

0:{x: "  00:00", y: 328.52, deviceType: 0}
1:{x: "  01:00", y: 640.04, deviceType: 0}
2:{x: "  02:00", y: 736.9,  deviceType: 0}
3:{x: "  03:00", y: 621.68, deviceType: 0}
4:{x: "  04:00", y: 565.82, deviceType: 0}
5:{x: "  05:00", y: 170.12, deviceType: 0}
 ....................................
 ....................................
23:{x: "  23:00", y: 196.12, deviceType: 0}

Anyone can see the problem here?

Upvotes: 1

Views: 30

Answers (1)

user3351605
user3351605

Reputation: 1291

Your data's x properties all have leading spaces, so Highcharts cannot associate them with the values in your categories array.

Either remove the leading spaces or map the x properties to the corresponding index of your categories array (so that x: "00:00" would be x: 0, x: "01:00" would be x: 1, and so on).

Upvotes: 1

Related Questions