CODEWITHSUNDEEP
javascripthighcharts
James Wilson
James Wilson

Reputation: 25

Highcharts: Symbol markers for dynamic data?

I'm using a line chart (I think) for my data, and I'm trying to have red, yellow or green dots based upon the value of the data. The problem is, I can't even change the symbols used on the graph! I'm using data pulled from a database, so I can't simply define the data within a series[] and then define the symbol from there, it's added using the chart.addSeries() function.

I'm sorry if this is a total noob question, I'm a total noob when it comes to JavaScript and Highcharts.

EDIT: For security reasons, I can't post the code.

Upvotes: 0

Views: 582

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

Answer may not be 100% accurate, but I would do something like this:

// Loop over series and populate chart data
$.each(results.series, function (i, result) {
    var series = chart.get(result.id);
    //I think I have to do some sort of marker: set here

    $.each(result.data, function (i, point) {
        var x = point.x, // OR point[0]
            y = point.y; // OR point[1]
        result.data[i] = {
            color: y > 100 ? 'red' : 'blue',
            x: x,
            y: y
        }
    });

    if (series) {
        series.update(result, false);
    } else {
        chart.addSeries(result, false);
    }
});
chart.redraw();

As you can see, here I am adding color property to the point. Right now there is simple logic (value < 100), but you can apply there anything you want to, for example function which will return correct color etc.

Note that I am extracting x and y values. How to get them depends on how your data is formatted. It can be {x: some_valueX, y: some_valueY} or [some_valueX, some_valueY] or even some_valueY only.

Important: if you have a lot of points (1000+), don't forget to increase turboThreshold or disable it.

Upvotes: 1

Related Questions