CODEWITHSUNDEEP
javascripthtmlarrayshighchartsspline
Julien
Julien

Reputation: 13

HighCharts and Javascript to pass data as array

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>

Upvotes: 1

Views: 2293

Answers (1)

elliot
elliot

Reputation: 498

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]);
}

Upvotes: 4

Related Questions