search

datastorm-open / rAmCharts

API for Amcharts
48 stars 16 forks source link

jquery slider with rAmChart #83

Open ghost opened 5 years ago

ghost commented 5 years ago

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);
        }
      });
    }
  }]
});
ghost commented 5 years ago

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,