manipulating data for Highcharts graph using javascript

Question

I'm trying to plot a scatter plot using the Highcharts library. I get some results from my database and format them in front end level using javascript (transformGraph2Data function in the following code does this work - I don't include the code of this function here to keep the question clear and short). More specifically I have the following piece of code:

<script type="text/javascript">
var graph2dataa;
function plotGraph2() {
    graph2dataa = transformGraph2Data(<%=graph2data%>);

    console.log(graph2dataa);
    console.log(typeof graph2dataa);

    Highcharts.chart('graphDiv2', {
        chart: {
            type: 'scatter',
            zoomType: 'xy',
            events: {
                click: function (e) {
                    var x = e.xAxis[0].value,
                        y = e.yAxis[0].value,
                        series = this.series[0];
                        series.addPoint([x, y]);
                }
            }
        },
        xAxis: {
            title: {
                enabled: true,
                text: '<b><%=graph2XaxisTitle%></b>'
            },
            startOnTick: true,
            endOnTick: true,
            showLastLabel: true,
            plotLines: [{
                value: 0,
                color: 'red',
                dashStyle: 'shortdash',
                width: 2
            }]
        },
        yAxis: {
            title: {
                text: '<b><%=graph2YaxisTitle%></b>',
                style: {
                    fontWeight: 'normal'
                }
            },
            plotLines: [{
                value: 0,
                color: 'red',
                dashStyle: 'shortdash',
                width: 2
            }]
        },
        plotOptions: {
            series: {
                cursor: 'pointer',
                turboThreshold: 0
            },
            scatter: {
                marker: {
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true,
                            lineColor: 'rgb(100,100,100)'
                        }
                    }
                }
            }
        },
        graph2dataa //THIS VARIABLE HOLDS THE ACTUAL DATA I'D LIKE TO PLOT
    });
}
</script>

The graph2dataa variable gets the following string value: series: [{ name: "22h - 4h", color: "#000000", data: [{ name: "HACD3", x: 0.417666669, y: 1.841010179 }, { name: "VPS53", x: 0.113499999, y: 0.153579771 }, { name: "IPO11", x: -0.300000004, y: 0.734065117 }, { name: "FIP1L1", x: 0.067000012, y: 0.165934747 }, { name: "HSPE1", x: 0.186666687, y: 0.407514478 }] }] which is valid and can be plotted if I hardcode it. The problem occurs when I try to pass that value using the graph2dataa variable.

Any ideas what am I doing wrong?

Answer 1

Highcharts require a specific series structure and it should be an array of object, not a string. Your transformGraph2Data function should return the correct structure, which looks this way:

var graph2dataa = [{
    name: "22h - 4h",
    color: "#000000",
    data: [{
        name: "HACD3",
        x: 0.417666669,
        y: 1.841010179
    }, {
        name: "VPS53",
        x: 0.113499999,
        y: 0.153579771
    }, {
        name: "IPO11",
        x: -0.300000004,
        y: 0.734065117
    }, {
        name: "FIP1L1",
        x: 0.067000012,
        y: 0.165934747
    }, {
        name: "HSPE1",
        x: 0.186666687,
        y: 0.407514478
    }]
}]

Live demo: http://jsfiddle.net/BlackLabel/4ath23yo/