jquery slider with rAmChart #83

ghost · 2018-07-31T19:36:05Z

Hi,

I have posted my question in State exchange, however unable to get any feedback.

I want to implement below AmChart implementation in R through rAmChart. In normal HTML page below works fine, however I want to have it within a Shiny app and there I stuck. Any help would be highly appreciated.

HTML

<!DOCTYPE html>
<html>
<head>
    <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="JS.js"></script>
<link rel="stylesheet" href="CSS.css">
</head>
<body>
    <div class="container">
      <div id="chartdiv"></div>
      <div id="slider"></div>
    </div>
</body>
</html>

CSS

#chartdiv {
  height: 400px;
}    
#slider {
  margin-top: 20px;
}    
.ui-slider .ui-slider-handle {
  width: 3.2em!important;
  text-align: center;
  margin-left: -1.6em!important;
}

JS

var markers = [{
        "year": 2003,
        "images": [{
            "europe": 2.5,
            "namerica": 2.5
          }]
        }, {
        "year": 2004,
        "images": [{
            "europe": 3.5,
            "namerica": 5.5
          }]
        }]

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
  "theme": "light",
    "legend": {
    "useGraphSettings": true,
    "markerSize": 10
    },
    "dataProvider": markers[0].images,
    "valueAxes": [{
        "stackType": "regular",
    }],
    "graphs": [{
        "title": "Europe",
        "type": "column",
        "valueField": "europe"
    }, {
        "title": "North America",
        "type": "column",
        "valueField": "namerica"
    }],
    "categoryField": "year",
    "categoryAxis": {
        "gridPosition": "start",
        "position": "left"
    },
    "export": {
      "enabled": true
     },
  "listeners": [{
    "event": "init",
    "method": function(e) {
      $( "#slider" ).slider({
        "min": 0,
        "max": (markers.length - 1),
        "create": function( event, ui ) {
          var dataSet = markers[0];
          $("#slider .ui-slider-handle").text(dataSet.year);
        },
        "slide": function( event, ui ) {
          var dataSet = markers[ui.value];
          e.chart.dataProvider = dataSet.images;
          e.chart.validateData();
          $(ui.handle).text(dataSet.year);
        }
      });
    }
  }]
});

The text was updated successfully, but these errors were encountered:

ghost · 2018-08-04T21:25:47Z

Hi,

I have tried below Shiny implementation of above plot

library(shiny)
library(rAmCharts) 
require(purrr)
library(htmlwidgets)
library(shinyjs)

 ui = fluidPage(
    inlineCSS(" #slider {
                margin-top: 20px;
              }"),
       inlineCSS("            
              .ui-slider .ui-slider-handle {
                width: 3.2em!important;
                text-align: center;
                margin-left: -1.6em!important;
              }"),

     div(id="slider"), div(id="chart-container", div(id="chart-div")),
    amChartsOutput("amPLot", height = "485px")    
)

Data_DF = data.frame(x = c('A', 'B'), y1 = c(90, 100), z1 = c('X', 'Y'))
Data_DF1 = list(list('year' = 2003, 'images' = Data_DF),
                list('year' = 2004, 'images' = Data_DF))


server = function(input, output, session) {
     amChart_Plot = amSerialChart(categoryField = "x", precision = 2, rotate = TRUE, hideCredits = TRUE, addClassNames = TRUE, plotAreaBorderAlpha = 1, plotAreaBorderColor = '#000') %>%
                                        setDataProvider(dataProvider = Data_DF1[[1]]$images, keepNA = TRUE) %>%
                                        setBalloon(cornerRadius = 12, textAlign = "left", maxWidth = 1300)  %>%
    addListener(name = "init", expression = "function(e) {
                                                  $( '#slider' ).slider({
                                                    'min': 0,
                                                    'max': 1,
                                                    'create': function( event, ui ) {
                                                      var dataSet = Data_DF1[[1]];
                                                      $('#slider .ui-slider-handle').text(dataSet.year);
                                                    },
                                                    'slide': function( event, ui ) {
                                                      var dataSet = Data_DF1[[ui.value]];
                                                      e.chart.dataProvider = dataSet.images;
                                                      e.chart.validateData();
                                                      $(ui.handle).text(dataSet.year);
                                                    }
                                                  });
                                                }")
                                amChart_Plot = amChart_Plot %>%
                                              addGraph(valueField = paste("y", 1, sep = ""), fillAlphas = 0.6, bullet = "round", lineThickness = 0, type = 'column', 
                                                fixedColumnWidth = 80, bulletColor = "transparent")
                                 
                                amChart_Plot@valueAxes = list(list(
                                          labelFunction = JS("function(value) {return value+'%';}"), position = 'bottom', titleBold = FALSE, 
                                          maximum = 100, minimum = 0, stackType = "regular")) 
    output$amPLot = renderAmCharts(amChart_Plot)
}

shinyApp(ui = ui, server = server)

However I failed to bring the Slder as in my original Post. Any help on how to correct above plot to bring slider and change the plot according to the Slider movement is highly appreciated.

Thanks,

tintinmar1995 added this to Packages R Feb 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery slider with rAmChart #83

jquery slider with rAmChart #83

ghost commented Jul 31, 2018

ghost commented Aug 4, 2018

jquery slider with rAmChart #83

jquery slider with rAmChart #83

Comments

ghost commented Jul 31, 2018

ghost commented Aug 4, 2018