Black Lives Matter. Please consider donating to Black Girls Code today.

Possible to only show markers on a scatter plot with lines if the number of data points is less than a certain number?

Performance is an issue, along with readability , when markers show up on top of one another in a larger data set (weeks of data). I’d like to be able to control when to show markers based on the number of points similar to how highcharts works.

I think you can define an extra array of data with just the markers you want. Here’s an example:
2 arrays, time series of points and markers at chosen points (in this case read from a file)

 std::string js;

    if (reader.read(file_plotly) < 0)
    {
      return;
    }

    /////////////////////////////////////////////////////////////////////////////////////////////////////
    // time/price
    /////////////////////////////////////////////////////////////////////////////////////////////////////

    js += "var x_time = [];";
    js += "var y_price = [];";
    js += "var x_wave = [];";
    js += "var y_wave = [];";
    js += "var y_wave_label = [];";
    size_t nbr_rows = reader.m_tp.size();
    for (size_t idx = 0; idx < nbr_rows; idx++)
    {
      time_price_t tp = reader.m_tp.at(idx);
      WDateTime date;
      date.setTime_t(std::time_t(tp.time));
      WString str_time = date.toString("yyyy-MM-dd-hh:mm:ss");
      js += "x_time.push('";
      js += str_time.toUTF8();
      js += "');";
      js += "y_price.push(";
      js += std::to_string(tp.value);
      js += ");";
      if (tp.wave != "-")
      {
        js += "x_wave.push('";
        js += str_time.toUTF8();
        js += "');";
        js += "y_wave.push(";
        js += std::to_string(tp.value);
        js += ");";
        js += "y_wave_label.push(";
        js += tp.wave;
        js += ");";
      }
    }

    js += "var trace_price = {";
    js += "x: x_time,";
    js += "y: y_price,";
    js += "mode: 'lines',";
    js += "type: 'scatter'";
    js += "};";

    js += "var trace_wave = {";
    js += "x: x_wave,";
    js += "y: y_wave,";
    js += "text: y_wave_label,";
    js += "mode: 'markers+text',";
    js += "type: 'scatter',";
    js += "marker: {size: 15, color:'rgb(0,255,0)'}";
    js += "};";

    /////////////////////////////////////////////////////////////////////////////////////////////////////
    // "data", "layout" objects
    // Note: data object MUST named 'data', layout object MUST named 'layout'
    /////////////////////////////////////////////////////////////////////////////////////////////////////

    js += "var data = [trace_price, trace_wave];";
    js += "var layout = {";
    js += "yaxis: {";
    js += "tickformat: '.0'";
    js += "}";
    js += "};";

If you’re wondering about the funny code syntax, it’s actually C++, not Javascript; well, it is a C++ string where the string is Javascript (yes).

Wt is a C++ framework and I use it with popular Javascript libraries, like Plotly.js

example

This is great! But it would be nice if I could say ,hey if I have 50 points, show me points, otherwise, let me zoom in to get detail. I’ve just migrated from highcharts and it generally takes care of it automatically , but this would be a great add in.

And thanks for your help!