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
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!