Skip to content

Instantly share code, notes, and snippets.

@JohnCoene
Created October 1, 2020 16:45
Show Gist options
  • Save JohnCoene/8756bc27cac8b21a8697c4261ddeccbd to your computer and use it in GitHub Desktop.
Save JohnCoene/8756bc27cac8b21a8697c4261ddeccbd to your computer and use it in GitHub Desktop.
Scatter GL with shiny
library(shiny)
ui <- fluidPage(
htmlwidgets::getDependency("echarts4r"), # add dependencies
tags$script(src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"), # add webgl
htmltools::includeScript("scatter.js"),
div(id="chart", style="height:90%; width:100%; min-height: 400px;")
)
server <- function(input, output, session) {
lst <- apply(unname(cars), 1, as.list)
session$sendCustomMessage("draw-chart", lst)
}
shinyApp(ui, server)
Shiny.addCustomMessageHandler('draw-chart', function(data){
let dom = document.getElementById("chart");
let myChart = echarts.init(dom);
option = {
title: {
text: data.length + ' Points'
},
toolbox: {
left: 'center',
feature: {
dataZoom: { title:'zoom'}
}
},
legend: { right: 10 },
xAxis: [{ }],
yAxis: [{ }],
dataZoom: [{
type: 'inside'
}, {
type: 'slider'
}],
animation: false,
series: [{
name: 'Data',
type: 'scatterGL',
data: data,
symbolSize: 10,
itemStyle: { opacity: 0.4 },
large: true
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
$(window).on('resize', function(){
if(myChart != null && myChart != undefined){
myChart.resize();
}
});
})
@JohnCoene
Copy link
Author

One improvement would be to serialise the entire options from R giving you more flexibility to customise.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment