HighCharts and Javascript to pass data as array

Question

I am trying to pass an Array as a variable, with Javascript, into a HighCharts graph. The points with their markers are displayed correcty, but there is NO spline connecting the dots (Data 2, Purple). I tried on the same chart as well, to pass an Array directly with the values, and this time HighCharts is displaying the markers and the splines (Data 1, Red). For both series, all the line parameters (lineWidth, dashStyle, color) are set up. I tested it on IE11 and Chrome and FireFox, and the result is the same... Below is the full code. If anybody already encountered this or, better !, have an idea on how to solve this (have both set of data displayed with markers AND line joining those markers), I would be very very interested ! Thanks a lot !!

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Chart</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    var myData = new Array();
        for (n=1;n<=10;n++)
        { 
            myData[n]=Math.floor((Math.random() * 10) + 1);
        }
    var mySeries = [];
    for (var i = 0; i < myData.length; i++){
        mySeries.push([i,myData[i]]);
    }
    $('#container').highcharts({
        title: {
            text: 'Chart',
            x: -20 //center
        },
        xAxis: {
            opposite:true,
            title: {text: 'Horizontal Axis'},
            showFirstLabel: true,
            showLastLabel: true,
            min: 0, max: 12,
            tickInterval: 1,
            startOnTick: true,
            endOnTick: true,
        },
        yAxis: {
            title: {text: 'Vertical Axis - inverted'},  
            reversed: true,
            showFirstLabel: true,
            showLastLabel: true,
            min: 0, max: 12,
            tickInterval: 1,
            startOnTick: true,
            endOnTick: true,
        },
        tooltip: {
            valueSuffix: 'Week'
        },      
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [
        {name:'Data 1',data:[0,1,2,3,4,5,6,7,8,9,10],marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF0000'},
        {name:'Data 2',data:mySeries                ,marker:{symbol:'circle'},lineWidth:1,dashStyle:'Solid',color:'#FF00FF'},
        ]
    });
});
</script>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1000px; height: 700px; margin: 0 auto"></div>
</body>
</html>

elliot · Accepted Answer · 2016-06-19 00:36:27Z

4

I believe Highcharts is silently failing to draw the spline because your first value of mySeries is undefined.

With myData you start off at n = 1, so myData[0] is still undefined after you run through your for loop. Then you start off mySeries with i = 0so that first undefined value is added to mySeries. If instead you either start i = 1 or change your myData for loop to i = 0 then it should work.

In other words, do this:

var myData = new Array();
for (var n=0; n<10; n++){ 
    myData[n]=Math.floor((Math.random() * 10) + 1);
}
var mySeries = [];
for (var i = 0; i < myData.length; i++){
    mySeries.push([i,myData[i]]);
}

That said, I would condense your data generation to one for loop for efficiency reasons which would also remove the problem:

//define an empty array
var mySeries = [];

for (var i = 0; i < 10; i++){
   //create your value
   var d = Math.floor((Math.random() * 10) + 1);
   //push an array into your array
   mySeries.push([i,d]);
}

answered Jun 19, 2016 at 0:36

elliot

4991 gold badge4 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Julien Over a year ago

Awesome, Elliot, thanks a lots it's working ! You saved me lot's of time ! Really appreciated !

elliot Over a year ago

Glad to hear it. Could you click the 'Accept Answer' button please ;)

Collectives™ on Stack Overflow

HighCharts and Javascript to pass data as array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related