From 3060b3cbcd10200698c1a9b58d03cee785cf2cbf Mon Sep 17 00:00:00 2001 From: Joshua Date: Tue, 4 Aug 2020 12:40:54 -0400 Subject: [PATCH] updating links in navbar --- docs/404.html | 6 + docs/articles/drilldown.html | 12 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/fontawesome.html | 16 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/hchart.html | 84 ++--- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/highcharter.html | 36 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/highcharts-api.html | 36 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/highcharts.html | 27 +- .../highchart-binding-0.8.2.9000/highchart.js | 2 +- .../custom/delay-animation.js | 135 ++++++++ docs/articles/highchartsjs-api-basics.html | 12 +- .../custom/delay-animation.js | 135 ++++++++ docs/articles/howtos.html | 5 +- .../highchart-binding-0.8.2.9000/highchart.js | 3 +- .../custom/delay-animation.js | 135 ++++++++ docs/articles/maps.html | 54 +-- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/modules.html | 43 +-- .../highchart-binding-0.8.2/highchart.js | 140 -------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/motion.html | 12 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/shiny-events-demo.html | 8 +- docs/articles/showcase.html | 28 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/stock.html | 36 +- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/articles/themes.html | 112 ++++--- .../highchart-binding-0.8.2.9000/highchart.js | 311 +++++++++++------- .../custom/delay-animation.js | 135 ++++++++ docs/index.html | 52 +-- docs/news/index.html | 44 ++- docs/pkgdown.yml | 2 +- docs/reference/citytemp.html | 6 + docs/reference/citytemp_long.html | 6 + docs/reference/color_classes.html | 6 + docs/reference/color_stops.html | 6 + docs/reference/colorize.html | 6 + docs/reference/data_to_boxplot.html | 6 + docs/reference/data_to_hierarchical.html | 6 + docs/reference/data_to_sankey.html | 6 + docs/reference/datetime_to_timestamp.html | 6 + docs/reference/download_map_data.html | 6 + docs/reference/export_hc.html | 6 + docs/reference/favorite_bars.html | 6 + docs/reference/favorite_pies.html | 6 + docs/reference/get_data_from_map.html | 6 + docs/reference/get_hc_series_from_df.html | 6 + docs/reference/globaltemp.html | 6 + docs/reference/hc_add_annotation.html | 6 + docs/reference/hc_add_dependency.html | 6 + docs/reference/hc_add_dependency_fa.html | 29 +- docs/reference/hc_add_event_point.html | 6 + docs/reference/hc_add_series.character.html | 6 + docs/reference/hc_add_series.data.frame.html | 6 + docs/reference/hc_add_series.density.html | 6 + docs/reference/hc_add_series.forecast.html | 6 + docs/reference/hc_add_series.geo_json.html | 6 + docs/reference/hc_add_series.html | 3 + docs/reference/hc_add_series.lm.html | 6 + docs/reference/hc_add_series.numeric.html | 6 + docs/reference/hc_add_series.ts.html | 6 + docs/reference/hc_add_series.xts.html | 6 + docs/reference/hc_add_series_list.html | 6 + docs/reference/hc_add_series_map.html | 6 + docs/reference/hc_add_theme.html | 6 + docs/reference/hc_add_yAxis.html | 6 + docs/reference/hc_annotations.html | 6 + docs/reference/hc_boost-1.png | Bin 20164 -> 20097 bytes docs/reference/hc_boost.html | 6 + docs/reference/hc_caption.html | 6 + docs/reference/hc_chart.html | 6 + docs/reference/hc_colorAxis.html | 6 + docs/reference/hc_colors.html | 6 + docs/reference/hc_credits.html | 6 + docs/reference/hc_drilldown.html | 6 + docs/reference/hc_elementId.html | 6 + docs/reference/hc_exporting.html | 6 + docs/reference/hc_labels.html | 6 + docs/reference/hc_legend.html | 6 + docs/reference/hc_loading.html | 3 + docs/reference/hc_mapNavigation.html | 6 + docs/reference/hc_motion.html | 6 + docs/reference/hc_navigator.html | 6 + docs/reference/hc_pane.html | 6 + docs/reference/hc_plotOptions.html | 6 + docs/reference/hc_rangeSelector.html | 6 + docs/reference/hc_responsive.html | 6 + docs/reference/hc_rm_series.html | 6 + docs/reference/hc_scrollbar.html | 6 + docs/reference/hc_series.html | 6 + docs/reference/hc_size.html | 6 + docs/reference/hc_subtitle.html | 6 + docs/reference/hc_theme.html | 6 + docs/reference/hc_theme_538.html | 6 + docs/reference/hc_theme_alone.html | 6 + docs/reference/hc_theme_bloom.html | 6 + docs/reference/hc_theme_chalk.html | 6 + docs/reference/hc_theme_darkunica.html | 6 + docs/reference/hc_theme_db.html | 6 + docs/reference/hc_theme_economist.html | 6 + docs/reference/hc_theme_elementary.html | 6 + docs/reference/hc_theme_ffx.html | 6 + docs/reference/hc_theme_flat.html | 6 + docs/reference/hc_theme_flatdark.html | 6 + docs/reference/hc_theme_ft.html | 6 + docs/reference/hc_theme_ggplot2.html | 6 + docs/reference/hc_theme_google.html | 6 + docs/reference/hc_theme_gridlight.html | 6 + docs/reference/hc_theme_handdrawn.html | 6 + docs/reference/hc_theme_hcrt.html | 6 + docs/reference/hc_theme_merge.html | 6 + docs/reference/hc_theme_monokai.html | 6 + docs/reference/hc_theme_null.html | 6 + docs/reference/hc_theme_sandsignika.html | 6 + docs/reference/hc_theme_smpl.html | 6 + docs/reference/hc_theme_sparkline.html | 6 + docs/reference/hc_theme_superheroes.html | 6 + docs/reference/hc_theme_tufte.html | 6 + docs/reference/hc_title.html | 6 + docs/reference/hc_tooltip.html | 6 + docs/reference/hc_xAxis.html | 6 + docs/reference/hc_yAxis.html | 6 + docs/reference/hc_zAxis.html | 6 + docs/reference/hcaes.html | 6 + docs/reference/hcaes_string.html | 6 + docs/reference/hcboxplot.html | 6 + docs/reference/hchart.html | 6 + docs/reference/hchart.survfit.html | 6 + docs/reference/hciconarray.html | 26 +- docs/reference/hcmap.html | 6 + docs/reference/hcparcords.html | 6 + docs/reference/hcpxy_add_point.html | 16 +- docs/reference/hcpxy_add_series.html | 3 + docs/reference/hcpxy_loading.html | 3 + docs/reference/hcpxy_remove_point.html | 3 + docs/reference/hcpxy_remove_series.html | 3 + docs/reference/hcpxy_update.html | 3 + docs/reference/hcpxy_update_series.html | 13 +- docs/reference/hcspark.html | 6 + docs/reference/hctreemap.html | 6 + docs/reference/hctreemap2.html | 6 + docs/reference/hex_to_rgba.html | 6 + docs/reference/highchart.html | 6 + docs/reference/highchart2.html | 6 + docs/reference/highchartOutput.html | 6 + docs/reference/highchartProxy.html | 3 + docs/reference/highcharter-exports.html | 6 + docs/reference/highcharter.html | 6 + docs/reference/highcharts_demo.html | 6 + docs/reference/hw_grid.html | 6 + docs/reference/index.html | 3 + docs/reference/is.hexcolor.html | 6 + docs/reference/is.highchart.html | 6 + docs/reference/list_parse.html | 6 + docs/reference/mutate_mapping.html | 6 + docs/reference/pokemon.html | 6 + docs/reference/random_id.html | 6 + docs/reference/renderHighchart.html | 6 + docs/reference/stars.html | 6 + docs/reference/str_to_id.html | 6 + docs/reference/tooltip_chart.html | 6 + docs/reference/tooltip_table.html | 6 + docs/reference/unemployment.html | 6 + docs/reference/uscountygeojson.html | 6 + docs/reference/usgeojson.html | 6 + docs/reference/vaccines.html | 6 + docs/reference/weather.html | 6 + docs/reference/worldgeojson.html | 6 + pkgdown/index.html | 52 +-- 183 files changed, 5074 insertions(+), 1591 deletions(-) create mode 100644 docs/articles/drilldown_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/fontawesome_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/hchart_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/highcharter_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/highcharts-api_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/highcharts_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/highchartsjs-api-basics_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/howtos_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/maps_files/highcharts-8.1.2/custom/delay-animation.js delete mode 100644 docs/articles/modules_files/highchart-binding-0.8.2/highchart.js create mode 100644 docs/articles/modules_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/motion_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/showcase_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/stock_files/highcharts-8.1.2/custom/delay-animation.js create mode 100644 docs/articles/themes_files/highcharts-8.1.2/custom/delay-animation.js diff --git a/docs/404.html b/docs/404.html index 359ffb64..491de35f 100644 --- a/docs/404.html +++ b/docs/404.html @@ -124,6 +124,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -151,6 +154,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • diff --git a/docs/articles/drilldown.html b/docs/articles/drilldown.html index f3a52eef..92f2d171 100644 --- a/docs/articles/drilldown.html +++ b/docs/articles/drilldown.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -106,6 +109,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -145,7 +151,7 @@

    Drilldown

    Joshua Kunst

    -

    2020-07-26

    +

    2020-08-04

    Source: vignettes/drilldown.Rmd @@ -247,8 +253,8 @@

    2020-07-26

    title = "" ) -
    - +
    + -
    -

    Another example inspired/copied from https://github.com/hrbrmstr/waffle:

    +
    +

    Another example inspired/copied from https://github.com/hrbrmstr/waffle:

     library(dplyr) # to wokr with list columns
 library(purrr) # to wokr with list columns
@@ -269,8 +275,8 @@ 
    2020-07-26
    
   ) %>% 
   hc_colors(pull(df2, col))
    -
    -

    More details in item chart in this link https://www.highcharts.com/docs/chart-and-series-types/item-chart.

    +
    +

    More details in item chart in this link https://www.highcharts.com/docs/chart-and-series-types/item-chart.

    -
    -
    +
    
+
     penguins2 <- penguins %>%
   count(species, island) %>%
   glimpse()
@@ -190,16 +196,16 @@ 
    
 
     hchart(penguins2, "column", hcaes(x = island, y = n, group = species))
 
    
-
    
-
    Check automatically if the x column is date class:
    
+
    
+
    Check automatically if the x column is date class:
    
 
     economics_long2 <- economics_long %>%
   filter(variable %in% c("pop", "uempmed", "unemploy"))
 
 hchart(economics_long2, "line", hcaes(x = date, y = value01, group = variable))
 
    
-
    
-
+
    
+
 
    
 
    
 
    
@@ -208,8 +214,8 @@ 
    
 x <- diamonds$price
 hchart(x)
    -
    - +
    +

    @@ -217,8 +223,8 @@ 

     hchart(density(x), type = "area", color = "#B71C1C", name = "Price")
    -
    - +
    +

    @@ -227,8 +233,8 @@

    x <- diamonds$cut hchart(x, type = "column")

    -
    - +
    +

    @@ -237,8 +243,8 @@

    hchart(LakeHuron, name = "Level") %>% hc_title(text = "Level of Lake Huron 1875–1972"")

    -
    - +
    +

    @@ -247,8 +253,8 @@

    x <- stl(log(AirPassengers), "per") hchart(x)

    -
    - +
    +

    @@ -259,8 +265,8 @@

    x <- forecast(ets(USAccDeaths), h = 48, level = 95) hchart(x)

    -
    - +
    +

    @@ -283,8 +289,8 @@

    hchart(net, layout = layout_with_fr)

    -
    - +
    +

    @@ -299,8 +305,8 @@

    hchart(fit, ranges = TRUE)

    -
    - +
    +

    @@ -312,13 +318,13 @@

    x <- getFX("USD/JPY", auto.assign = FALSE) hchart(x)

    -
    -
    +
    
+
     y <- getSymbols("SPY", auto.assign = FALSE)
 hchart(y)
 
    
-
    
-
+
    
+

    @@ -327,8 +333,8 @@

    x <- cbind(mdeaths, fdeaths) hchart(x)

    -
    - +
    +

    @@ -337,8 +343,8 @@

    x <- acf(diff(AirPassengers), plot = FALSE) hchart(x)

    -
    - +
    +

    @@ -346,8 +352,8 @@ 

     hchart(princomp(USArrests, cor = TRUE))
    -
    - +
    +

    @@ -360,8 +366,8 @@

    stops = color_stops(colors = c("#000004FF", "#56106EFF", "#BB3754FF", "#F98C0AFF", "#FCFFA4FF")) )

    -
    - +
    +

    @@ -371,8 +377,8 @@

    x <- dist(mtcars2) hchart(x)

    -
    - +
    +

    @@ -380,8 +386,8 @@ 

     hchart(cor(mtcars))
    -
    - +
    +

    diff --git a/docs/articles/hchart_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/hchart_files/highchart-binding-0.8.2.9000/highchart.js index 2c97c96e..b3507b5b 100644 --- a/docs/articles/hchart_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/hchart_files/highchart-binding-0.8.2.9000/highchart.js @@ -4,137 +4,226 @@ HTMLWidgets.widget({ type: 'output', - initialize: function(el, width, height) { + factory: function(el, width, height) { + + // TODO: define shared variables for this instance + var chart; return { - // TODO: add instance fields as required - }; - }, + renderValue: function(x) { + + if(x.debug) { + window.xclone = JSON.parse(JSON.stringify(x)); + window.elclone = $(el); + console.log(el); + console.log("hc_opts", x.hc_opts); + console.log("theme", x.theme); + console.log("conf_opts", x.conf_opts); + } + + if(x.fonts !== undefined) { + + x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); + + x.fonts.forEach(function(s){ + /* http://stackoverflow.com/questions/4724606 */ + var urlfont = 'https://fonts.googleapis.com/css?family=' + s; + if (!$("link[href='" + urlfont + "']").length) { + $('').appendTo("head"); + } + + }); + + } + + ResetHighchartsOptions(); + + if(x.theme !== null) { + + if(x.debug) console.log("adding THEME"); + + Highcharts.setOptions(x.theme); + + } + + if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | + (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { + + if(x.debug) console.log("adding BackgroundImage"); + + var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; + + Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { + + proceed.call(this); + + $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); + $("#" + el.id).css("-webkit-background-size", "cover"); + $("#" + el.id).css("-moz-background-size", "cover"); + $("#" + el.id).css("-o-background-size", "cover"); + $("#" + el.id).css("background-size", "cover"); + + }); + + } + + Highcharts.setOptions(x.conf_opts); + + // creating chart according thype + if(x.type == "chart") { + + if(x.debug) console.log("charting CHART"); + + chart = $("#" + el.id).highcharts(x.hc_opts); + + } else if (x.type == "stock") { + + if(x.debug) console.log("charting STOCK"); + + chart = $("#" + el.id).highcharts('StockChart', x.hc_opts); + + } else if (x.type == "map"){ + + if(x.debug) console.log("charting MAP"); + + x.hc_opts.series = x.hc_opts.series.map(function(e){ + if(e.geojson === true) { + if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); + e.data = Highcharts.geojson(e.data, e.type); + } + return e; + }); + + chart = $("#" + el.id).highcharts('Map', x.hc_opts); + + if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ + /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ + $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { + var e0 = e.originalEvent, + delta = e0.wheelDelta || -e0.detail; + this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; + e.preventDefault(); + + }); + + } + + } + + if(x.hc_opts.motion !== undefined) { + + $("#" + el.id).css({"position" : "relative" }); + + if(x.debug) console.log("setting MOTION options"); + + var pc = $($("#" + el.id).find("#play-controls")[0]); + + var ct = x.theme.chart; + + if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); + if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); + if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + + + } + + return chart; + + }, + + resize: function(el, width, height, instance) { + + /* http://stackoverflow.com/questions/18445784/ */ + var chart = $("#" + el.id).highcharts(); + + if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ + var w = chart.renderTo.clientWidth; + var h = chart.renderTo.clientHeight; + chart.setSize(w, h); + } + + } - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } + }; + } +}); - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); +if (HTMLWidgets.shinyMode) { + + Shiny.addCustomMessageHandler('addSeries', function(msg) { - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); + var chart = $("#" + msg.id).highcharts(); + + chart.addSeries(msg.series); - } + }); + + Shiny.addCustomMessageHandler('removeSeries', function(msg) { - ResetHighchartsOptions(); + var chart = $("#" + msg.id).highcharts(); - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } + chart.get(msg.idSeries).remove(); - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } + }); + + Shiny.addCustomMessageHandler('removeAllSeries', function(msg) { - Highcharts.setOptions(x.conf_opts); + var chart = $("#" + msg.id).highcharts(); - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - + while (chart.series.length) { + chart.series[0].remove(); } - - } - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); + }); + + Shiny.addCustomMessageHandler('updateChart', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.update(msg.options); + + }); + + Shiny.addCustomMessageHandler('updateSeries', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).update(msg.options); + + }); + + Shiny.addCustomMessageHandler('showLoading', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + if (msg.showLoading) { - var pc = $($("#" + el.id).find("#play-controls")[0]); + chart.showLoading(); - var ct = x.theme.chart; + } else { - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + chart.hideLoading(); + } - } + }); + + Shiny.addCustomMessageHandler('addPoint', function(msg) { - }, - - resize: function(el, width, height, instance) { + var chart = $("#" + msg.id).highcharts(); - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } + }); + + Shiny.addCustomMessageHandler('removePoint', function(msg) { - - } - -}); + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).removePoint(msg.i, msg.redraw); + + }); + + +} diff --git a/docs/articles/hchart_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/hchart_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/hchart_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/highcharter.html b/docs/articles/highcharter.html index 220e5299..7ab954f6 100644 --- a/docs/articles/highcharter.html +++ b/docs/articles/highcharter.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -106,6 +109,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -145,7 +151,7 @@

    First steps on highcharter package

    Joshua Kunst

    -

    2020-07-26

    +

    2020-08-04

    Source: vignettes/highcharter.Rmd @@ -213,8 +219,8 @@ 

     hchart(mpg, "point", hcaes(x = displ, y = cty, group = year))
    -
    - +
    +

    @@ -214,8 +220,8 @@

    ) )

    -
    -

    Now change type to column and add 3d effect.

    +
    +

    Now change type to column and add 3d effect.

     hc <- hc %>% 
   hc_chart(
@@ -228,8 +234,8 @@ 
    
     )
 hc
    -
    -
    +
    
+
     # back to the line!
 hc <- hc_chart(hc, type = "line", options3d = list(enabled = FALSE))
 
    
@@ -264,8 +270,8 @@ 
    
     enabled = TRUE
     )
    -
    - +
    +

    @@ -286,8 +292,8 @@

    showLastLabel = FALSE )

    -
    -

    A good feature is plotLines and plotBand which you can use in both axis. For example:

    +
    +

    A good feature is plotLines and plotBand which you can use in both axis. For example:

     hc %>% 
   hc_xAxis(
@@ -315,8 +321,8 @@ 
    
       )
     )
    -
    - +
    +

    @@ -336,8 +342,8 @@

    borderWidth = 5 )

    -
    - +
    + diff --git a/docs/articles/highcharts-api_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/highcharts-api_files/highchart-binding-0.8.2.9000/highchart.js index 2c97c96e..b3507b5b 100644 --- a/docs/articles/highcharts-api_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/highcharts-api_files/highchart-binding-0.8.2.9000/highchart.js @@ -4,137 +4,226 @@ HTMLWidgets.widget({ type: 'output', - initialize: function(el, width, height) { + factory: function(el, width, height) { + + // TODO: define shared variables for this instance + var chart; return { - // TODO: add instance fields as required - }; - }, + renderValue: function(x) { + + if(x.debug) { + window.xclone = JSON.parse(JSON.stringify(x)); + window.elclone = $(el); + console.log(el); + console.log("hc_opts", x.hc_opts); + console.log("theme", x.theme); + console.log("conf_opts", x.conf_opts); + } + + if(x.fonts !== undefined) { + + x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); + + x.fonts.forEach(function(s){ + /* http://stackoverflow.com/questions/4724606 */ + var urlfont = 'https://fonts.googleapis.com/css?family=' + s; + if (!$("link[href='" + urlfont + "']").length) { + $('').appendTo("head"); + } + + }); + + } + + ResetHighchartsOptions(); + + if(x.theme !== null) { + + if(x.debug) console.log("adding THEME"); + + Highcharts.setOptions(x.theme); + + } + + if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | + (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { + + if(x.debug) console.log("adding BackgroundImage"); + + var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; + + Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { + + proceed.call(this); + + $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); + $("#" + el.id).css("-webkit-background-size", "cover"); + $("#" + el.id).css("-moz-background-size", "cover"); + $("#" + el.id).css("-o-background-size", "cover"); + $("#" + el.id).css("background-size", "cover"); + + }); + + } + + Highcharts.setOptions(x.conf_opts); + + // creating chart according thype + if(x.type == "chart") { + + if(x.debug) console.log("charting CHART"); + + chart = $("#" + el.id).highcharts(x.hc_opts); + + } else if (x.type == "stock") { + + if(x.debug) console.log("charting STOCK"); + + chart = $("#" + el.id).highcharts('StockChart', x.hc_opts); + + } else if (x.type == "map"){ + + if(x.debug) console.log("charting MAP"); + + x.hc_opts.series = x.hc_opts.series.map(function(e){ + if(e.geojson === true) { + if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); + e.data = Highcharts.geojson(e.data, e.type); + } + return e; + }); + + chart = $("#" + el.id).highcharts('Map', x.hc_opts); + + if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ + /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ + $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { + var e0 = e.originalEvent, + delta = e0.wheelDelta || -e0.detail; + this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; + e.preventDefault(); + + }); + + } + + } + + if(x.hc_opts.motion !== undefined) { + + $("#" + el.id).css({"position" : "relative" }); + + if(x.debug) console.log("setting MOTION options"); + + var pc = $($("#" + el.id).find("#play-controls")[0]); + + var ct = x.theme.chart; + + if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); + if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); + if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + + + } + + return chart; + + }, + + resize: function(el, width, height, instance) { + + /* http://stackoverflow.com/questions/18445784/ */ + var chart = $("#" + el.id).highcharts(); + + if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ + var w = chart.renderTo.clientWidth; + var h = chart.renderTo.clientHeight; + chart.setSize(w, h); + } + + } - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } + }; + } +}); - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); +if (HTMLWidgets.shinyMode) { + + Shiny.addCustomMessageHandler('addSeries', function(msg) { - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); + var chart = $("#" + msg.id).highcharts(); + + chart.addSeries(msg.series); - } + }); + + Shiny.addCustomMessageHandler('removeSeries', function(msg) { - ResetHighchartsOptions(); + var chart = $("#" + msg.id).highcharts(); - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } + chart.get(msg.idSeries).remove(); - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } + }); + + Shiny.addCustomMessageHandler('removeAllSeries', function(msg) { - Highcharts.setOptions(x.conf_opts); + var chart = $("#" + msg.id).highcharts(); - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - + while (chart.series.length) { + chart.series[0].remove(); } - - } - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); + }); + + Shiny.addCustomMessageHandler('updateChart', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.update(msg.options); + + }); + + Shiny.addCustomMessageHandler('updateSeries', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).update(msg.options); + + }); + + Shiny.addCustomMessageHandler('showLoading', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + if (msg.showLoading) { - var pc = $($("#" + el.id).find("#play-controls")[0]); + chart.showLoading(); - var ct = x.theme.chart; + } else { - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + chart.hideLoading(); + } - } + }); + + Shiny.addCustomMessageHandler('addPoint', function(msg) { - }, - - resize: function(el, width, height, instance) { + var chart = $("#" + msg.id).highcharts(); - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } + }); + + Shiny.addCustomMessageHandler('removePoint', function(msg) { - - } - -}); + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).removePoint(msg.i, msg.redraw); + + }); + + +} diff --git a/docs/articles/highcharts-api_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/highcharts-api_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/highcharts-api_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/highcharts.html b/docs/articles/highcharts.html index 17884652..58d7df74 100644 --- a/docs/articles/highcharts.html +++ b/docs/articles/highcharts.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -148,7 +151,7 @@

    Charts with highcharts

    Joshua Kunst

    -

    2020-08-01

    +

    2020-08-04

    Source: vignettes/highcharts.Rmd @@ -405,14 +408,14 @@

    N <- 7 set.seed(1234) -df <- tibble( +df <- tibble( start = Sys.Date() + months(sample(10:20, size = N)), end = start + months(sample(1:3, size = N, replace = TRUE)), cat = rep(1:5, length.out = N) - 1, progress = round(stats::runif(N), 1) ) -df <- mutate_if(df, is.Date, datetime_to_timestamp) +df <- mutate_if(df, is.Date, datetime_to_timestamp) hchart( df, @@ -430,7 +433,7 @@

    )
    - +

    @@ -439,12 +442,12 @@

    x <- seq(5, 95, by = 5) df <- expand.grid(x = x, y = x) %>% - mutate( + mutate( length = 200 - (x + y), direction = (x + y)/200 * 360 ) -glimpse(df) +glimpse(df) 

    ## Rows: 361
 ## Columns: 4
@@ -478,10 +481,10 @@ 
    
 data <- read_csv(url)
 
 data <- data %>% 
-  rename_all(str_replace_all, "\\.", "_") %>% 
-  select(x, y, name, region, alpha_2)
+  rename_all(str_replace_all, "\\.", "_") %>% 
+  select(x, y, name, region, alpha_2)
 
-glimpse(data)
+glimpse(data)
 
    ## Rows: 192
 ## Columns: 5
@@ -523,8 +526,8 @@ 
    
 data(gapminder, package = "gapminder")
 
 gapminder <- gapminder %>% 
-  filter(year == max(year)) %>% 
-  select(country, pop, continent)
+  filter(year == max(year)) %>% 
+  select(country, pop, continent)
 
 hc <- hchart(gapminder, "packedbubble", hcaes(name = country, value = pop, group = continent))
 
@@ -660,7 +663,7 @@ 
    
   x = LETTERS[1:6]
   )
 
-glimpse(df)
+glimpse(df)
 
    ## Rows: 6
 ## Columns: 3
diff --git a/docs/articles/highcharts_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/highcharts_files/highchart-binding-0.8.2.9000/highchart.js
index 1bdd588c..b3507b5b 100644
--- a/docs/articles/highcharts_files/highchart-binding-0.8.2.9000/highchart.js
+++ b/docs/articles/highcharts_files/highchart-binding-0.8.2.9000/highchart.js
@@ -213,7 +213,7 @@ if (HTMLWidgets.shinyMode) {
     
     var chart = $("#" + msg.id).highcharts();
     
-    chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift);
+    chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation);
     
   });
   
diff --git a/docs/articles/highcharts_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/highcharts_files/highcharts-8.1.2/custom/delay-animation.js
new file mode 100644
index 00000000..730e6af4
--- /dev/null
+++ b/docs/articles/highcharts_files/highcharts-8.1.2/custom/delay-animation.js
@@ -0,0 +1,135 @@
+/**
+ * by @TorsteinHonsi and modified by @frank-eisen
+ * returns a highcharts animation object with an own easing-function
+ * @param {number} duration
+ * @param {number} delay
+ * @param {function} timingFunction
+ * @return {number|object}
+ */
+function highchartsAnimation(duration, delay, timingFunction)
+{
+  if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') {
+    var delay_percent = delay / (duration + delay),
+        perc = 1 - delay_percent;
+    
+    return {
+      duration: duration + delay,
+      easing: function(pos) {
+        if(pos <= delay_percent) {
+          return 0;
+        }
+        else {
+          return timingFunction((pos - delay_percent) / perc);
+        }
+      }
+    };
+  }
+  else {
+    return 750;
+  }
+}
+
+/**
+ * returns a timing function
+ * @param name
+ * @return {function}
+ */
+function getTimingFunction(name)
+{
+	var args = arguments;
+
+	function needArgumentsCount(need_count)
+	{
+		if(args.length < need_count) {
+			throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments');
+		}
+	}
+
+	switch(name) {
+		case 'pow':
+		case 'power':
+			needArgumentsCount(1);
+			return function power(percent_done) {
+				return Math.pow(percent_done, args[1]);
+			};
+
+		case 'quad':
+			return getTimingFunction.apply(this, ['pow', 2]);
+
+		case 'cubic':
+			return getTimingFunction.apply(this, ['pow', 3]);
+
+		case 'sqrt':
+		case 'squareroot':
+			return function sqrt(percent_done) {
+				return Math.sqrt(percent_done);
+			};
+
+		case 'sine':
+		case 'sinus':
+			return function sinus(percent_done) {
+				return Math.sin(percent_done * (Math.PI / 2));
+			};
+
+		case 'steps':
+			needArgumentsCount(2);
+			return function steps(percent_done) {
+				return Math.floor(percent_done * (args[1])) / (args[1]);
+			};
+
+		case 'bezier':
+			needArgumentsCount(5);
+
+			var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]);
+
+			return function bez(percent_done) {
+				var coords = bezier(percent_done);
+				
+				return coords[1];
+			};
+
+		case 'linear':
+		default:
+			return function linear(percent_done) {
+				return percent_done;
+			};
+	}
+
+
+	function simpleBezier(p0, p1, p2, p3)
+	{
+		var x_c = getC(p0[0], p1[0]),
+			x_b = getB(p1[0], p2[0], x_c),
+			x_a = getA(p0[0], p3[0], x_b, x_c),
+			y_c = getC(p0[1], p1[1]),
+			y_b = getB(p1[1], p2[1], y_c),
+			y_a = getA(p0[1], p3[1], y_b, y_c);
+
+		function getC(p0, p1)
+		{
+			return 3 * (p1 - p0);
+		}
+
+		function getB(p1, p2, c)
+		{
+			return 3 * (p2 - p1) - c
+		}
+
+		function getA(p0, p3, b, c)
+		{
+			return p3 - p0 - c - b
+		}
+
+		function calculateBezier(a, b, c, t, position)
+		{
+			return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position;
+		}
+
+		return function getPositionFor(t) {
+			return [
+				calculateBezier(x_a, x_b, x_c, t, p0[0]),
+				calculateBezier(y_a, y_b, y_c, t, p0[1])
+			];
+		};
+	}
+}
diff --git a/docs/articles/highchartsjs-api-basics.html b/docs/articles/highchartsjs-api-basics.html
index 243c9511..25637470 100644
--- a/docs/articles/highchartsjs-api-basics.html
+++ b/docs/articles/highchartsjs-api-basics.html
@@ -205,8 +205,8 @@ 
    
 
 hc
    -
    - +
    +

    @@ -243,8 +243,8 @@

    y = 45 )

    -
    -

    Halfway there, now we just need to add the legend title. There are some arguments in the API documentation that look like sets of nested properties. Importantly for this exercise, the title argument look exactly like one of these properties.

    +
    +

    Halfway there, now we just need to add the legend title. There are some arguments in the API documentation that look like sets of nested properties. Importantly for this exercise, the title argument look exactly like one of these properties.

    The drop-down + curly braces (highlighted in green) on an argument like this tell you that what highcharts expects here is a self-contained set of properties that sit within the border property set. In this case the title property takes two arguments text and style which define the title text of the legend and the legend title CSS style respectively.

    To correctly create this hierarchical set of properties within the R hc_legend() function we need to use named lists. Each time the API documentation defines an property to be it’s own self-contained object within a broader set of properties you simply open a new list in your R function call. This will mean that sometimes the values provided to arguments within highcharter functions are nested lists with 2 or even 3 levels. This can seem complicated, but having the API documentation as a reference makes the process trivially easy.

    @@ -266,8 +266,8 @@

    ) ) -
    -

    CSS properties are often hyphenated words (like text-decoration) which won’t play nicely in R lists so you should define any CSS properties in your R lists with camel case version of these property names (eg. textDecoration).

    +
    +

    CSS properties are often hyphenated words (like text-decoration) which won’t play nicely in R lists so you should define any CSS properties in your R lists with camel case version of these property names (eg. textDecoration).

    diff --git a/docs/articles/highchartsjs-api-basics_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/highchartsjs-api-basics_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/highchartsjs-api-basics_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/howtos.html b/docs/articles/howtos.html index 1221e659..079dfd02 100644 --- a/docs/articles/howtos.html +++ b/docs/articles/howtos.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -148,7 +151,7 @@

    Commons HOW TOs

    Joshua Kunst

    -

    2020-07-31

    +

    2020-08-04

    Source: vignettes/howtos.Rmd diff --git a/docs/articles/howtos_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/howtos_files/highchart-binding-0.8.2.9000/highchart.js index df42d577..b3507b5b 100644 --- a/docs/articles/howtos_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/howtos_files/highchart-binding-0.8.2.9000/highchart.js @@ -213,7 +213,7 @@ if (HTMLWidgets.shinyMode) { var chart = $("#" + msg.id).highcharts(); - chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); }); @@ -225,4 +225,5 @@ if (HTMLWidgets.shinyMode) { }); + } diff --git a/docs/articles/howtos_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/howtos_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/howtos_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/maps.html b/docs/articles/maps.html index ea7f5543..ce5b5b74 100644 --- a/docs/articles/maps.html +++ b/docs/articles/maps.html @@ -78,6 +78,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -105,6 +108,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -144,7 +150,7 @@

    Maps with highmaps

    Joshua Kunst

    -

    2020-07-26

    +

    2020-08-04

    Source: vignettes/maps.Rmd @@ -171,18 +177,18 @@

    library(highcharter) hcmap("countries/nz/nz-all")

    -
    -
    +
    
+
     hcmap("custom/usa-and-canada", showInLegend = FALSE)
 
    
-
    
-
    +
    
+
     hcmap("countries/us/us-ca-all") %>%
   hc_title(text = "California") %>% 
   hc_subtitle(text = "You can use the same functions to modify your map!")
 
    
-
    
-
    Note: The copyright information is added to the chart credits by default, but please be aware that you will have to display this information somewhere else if you choose to disable chart credits. Copyright information for each map can be found as properties in the GeoJSON and Javascript files.
    
+
    
+
    Note: The copyright information is added to the chart credits by default, but please be aware that you will have to display this information somewhere else if you choose to disable chart credits. Copyright information for each map can be found as properties in the GeoJSON and Javascript files.
    
 
    
 
    
 
    
@@ -234,7 +240,7 @@ 
    
 
    ## Rows: 64
 ## Columns: 2
 ## $ code  <chr> "CA", "OR", "ND", "SK", "MT", "AZ", "NV", "AL", "NM", "CO", "...
-## $ value <dbl> 51050.777, 61543.311, 12653.165, 192917.533, 54116.598, 6719....
    
+## $ value <dbl> 84148.5593, 74862.0062, 87383.4984, 33816.0180, 181697.2677, ...

    If we compare this 2 data frames the hc-key is same code that code. So we’ll use these columns as keys:

     hcmap(
@@ -253,8 +259,8 @@ 
    
   )
 )
    -
    - +
    +

    @@ -303,8 +309,8 @@

    ) %>% hc_title(text = "Europe Time Zones")

    -
    -

    Example from https://www.highcharts.com/demo/maps/category-map.

    +
    +

    Example from https://www.highcharts.com/demo/maps/category-map.

    @@ -328,8 +334,8 @@

    ) %>% hc_mapNavigation(enabled = TRUE)

    -
    -
    +
    
+
     hcmap("countries/gb/gb-all", showInLegend = FALSE) %>%
   hc_add_series(
     data = cities, 
@@ -340,8 +346,8 @@ 
    
     ) %>%
   hc_mapNavigation(enabled = TRUE)
 
    
-
    
-
    Another example:
    
+
    
+
    Another example:
    
 
     library(dplyr)
 
@@ -381,8 +387,8 @@ 
    
   ) %>%
   hc_chart(zoomType = "xy")
 
    
-
    
-
+
    
+

    @@ -402,8 +408,8 @@

    hc_add_series(mapData = ausgeojson, showInLegend = FALSE) ausmap

    -
    -

    We can still adding data:

    +
    +

    We can still adding data:

     airports <- read.csv("https://raw.githubusercontent.com/ajdapretnar/datasets/master/data/global_airports.csv")
 airports <- filter(airports, country == "Australia", name != "Roma Street Railway Station")
@@ -423,8 +429,8 @@ 
    
     tooltip = list(pointFormat = "{point.name}")
   )
    -
    - +
    +

    @@ -491,8 +497,8 @@

    marker = list(lineWidth = 0, radius = 2) )

    -
    - +
    + diff --git a/docs/articles/maps_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/maps_files/highchart-binding-0.8.2.9000/highchart.js index 2c97c96e..b3507b5b 100644 --- a/docs/articles/maps_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/maps_files/highchart-binding-0.8.2.9000/highchart.js @@ -4,137 +4,226 @@ HTMLWidgets.widget({ type: 'output', - initialize: function(el, width, height) { + factory: function(el, width, height) { + + // TODO: define shared variables for this instance + var chart; return { - // TODO: add instance fields as required - }; - }, + renderValue: function(x) { + + if(x.debug) { + window.xclone = JSON.parse(JSON.stringify(x)); + window.elclone = $(el); + console.log(el); + console.log("hc_opts", x.hc_opts); + console.log("theme", x.theme); + console.log("conf_opts", x.conf_opts); + } + + if(x.fonts !== undefined) { + + x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); + + x.fonts.forEach(function(s){ + /* http://stackoverflow.com/questions/4724606 */ + var urlfont = 'https://fonts.googleapis.com/css?family=' + s; + if (!$("link[href='" + urlfont + "']").length) { + $('').appendTo("head"); + } + + }); + + } + + ResetHighchartsOptions(); + + if(x.theme !== null) { + + if(x.debug) console.log("adding THEME"); + + Highcharts.setOptions(x.theme); + + } + + if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | + (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { + + if(x.debug) console.log("adding BackgroundImage"); + + var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; + + Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { + + proceed.call(this); + + $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); + $("#" + el.id).css("-webkit-background-size", "cover"); + $("#" + el.id).css("-moz-background-size", "cover"); + $("#" + el.id).css("-o-background-size", "cover"); + $("#" + el.id).css("background-size", "cover"); + + }); + + } + + Highcharts.setOptions(x.conf_opts); + + // creating chart according thype + if(x.type == "chart") { + + if(x.debug) console.log("charting CHART"); + + chart = $("#" + el.id).highcharts(x.hc_opts); + + } else if (x.type == "stock") { + + if(x.debug) console.log("charting STOCK"); + + chart = $("#" + el.id).highcharts('StockChart', x.hc_opts); + + } else if (x.type == "map"){ + + if(x.debug) console.log("charting MAP"); + + x.hc_opts.series = x.hc_opts.series.map(function(e){ + if(e.geojson === true) { + if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); + e.data = Highcharts.geojson(e.data, e.type); + } + return e; + }); + + chart = $("#" + el.id).highcharts('Map', x.hc_opts); + + if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ + /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ + $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { + var e0 = e.originalEvent, + delta = e0.wheelDelta || -e0.detail; + this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; + e.preventDefault(); + + }); + + } + + } + + if(x.hc_opts.motion !== undefined) { + + $("#" + el.id).css({"position" : "relative" }); + + if(x.debug) console.log("setting MOTION options"); + + var pc = $($("#" + el.id).find("#play-controls")[0]); + + var ct = x.theme.chart; + + if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); + if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); + if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + + + } + + return chart; + + }, + + resize: function(el, width, height, instance) { + + /* http://stackoverflow.com/questions/18445784/ */ + var chart = $("#" + el.id).highcharts(); + + if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ + var w = chart.renderTo.clientWidth; + var h = chart.renderTo.clientHeight; + chart.setSize(w, h); + } + + } - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } + }; + } +}); - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); +if (HTMLWidgets.shinyMode) { + + Shiny.addCustomMessageHandler('addSeries', function(msg) { - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); + var chart = $("#" + msg.id).highcharts(); + + chart.addSeries(msg.series); - } + }); + + Shiny.addCustomMessageHandler('removeSeries', function(msg) { - ResetHighchartsOptions(); + var chart = $("#" + msg.id).highcharts(); - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } + chart.get(msg.idSeries).remove(); - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } + }); + + Shiny.addCustomMessageHandler('removeAllSeries', function(msg) { - Highcharts.setOptions(x.conf_opts); + var chart = $("#" + msg.id).highcharts(); - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - + while (chart.series.length) { + chart.series[0].remove(); } - - } - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); + }); + + Shiny.addCustomMessageHandler('updateChart', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.update(msg.options); + + }); + + Shiny.addCustomMessageHandler('updateSeries', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).update(msg.options); + + }); + + Shiny.addCustomMessageHandler('showLoading', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + if (msg.showLoading) { - var pc = $($("#" + el.id).find("#play-controls")[0]); + chart.showLoading(); - var ct = x.theme.chart; + } else { - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + chart.hideLoading(); + } - } + }); + + Shiny.addCustomMessageHandler('addPoint', function(msg) { - }, - - resize: function(el, width, height, instance) { + var chart = $("#" + msg.id).highcharts(); - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } + }); + + Shiny.addCustomMessageHandler('removePoint', function(msg) { - - } - -}); + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).removePoint(msg.i, msg.redraw); + + }); + + +} diff --git a/docs/articles/maps_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/maps_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/maps_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/modules.html b/docs/articles/modules.html index 5fd06aed..a76b0eba 100644 --- a/docs/articles/modules.html +++ b/docs/articles/modules.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -196,8 +199,8 @@

    ) %>% hc_add_dependency("plugins/highcharts-regression.js") -
    -

    Even you can get a regression for each series/group.

    +
    +

    Even you can get a regression for each series/group.

     hchart(
   penguins, 
@@ -208,8 +211,8 @@ 
    
   hc_colors(c("#d35400", "#2980b9", "#2ecc71")) %>%
   hc_add_dependency("plugins/highcharts-regression.js")
    -
    -

    A detail of the each parameter can be found in the github page of this plugin: https://github.com/streamlinesocial/highcharts-regression#regression-settings.

    +
    +

    A detail of the each parameter can be found in the github page of this plugin: https://github.com/streamlinesocial/highcharts-regression#regression-settings.

    @@ -249,8 +252,8 @@

    ) %>% hc_add_dependency("plugins/grouped-categories.js")

    -
    - +
    +

    @@ -276,8 +279,8 @@

    hc_add_series(df, "coloredline", hcaes(x, y2 , segmentColor = col)) %>% hc_add_dependency("plugins/multicolor_series.js")

    -
    - +
    +

    @@ -302,8 +305,8 @@

    ) %>% hc_add_dependency("modules/draggable-points.js")

    -
    -
    +
    
+
     highchart() %>% 
   hc_add_series(
   df,
@@ -319,8 +322,8 @@ 
    
   ) %>% 
   hc_add_dependency("modules/draggable-points.js")
 
    
-
    
-
+
    
+

    @@ -372,8 +375,8 @@

    ) )

    -
    -

    More examples for fun.

    +
    +

    More examples for fun.

     # test with 1 series and a theme
 hc_fill %>% 
@@ -388,8 +391,8 @@ 
    
     ) %>% 
   hc_add_theme(hc_theme_handdrawn())
    -
    -

    Example from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/infographic/.

    +
    +

    Example from https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series/infographic/.

     highchart() %>% 
   # add the module
@@ -451,8 +454,8 @@ 
    
     )
   )
    -
    -

    And the last one.

    +
    +

    And the last one.

     dim(volcano)
    @@ -473,8 +476,8 @@

    ) ) -
    - +
    +

    diff --git a/docs/articles/modules_files/highchart-binding-0.8.2/highchart.js b/docs/articles/modules_files/highchart-binding-0.8.2/highchart.js deleted file mode 100644 index 2c97c96e..00000000 --- a/docs/articles/modules_files/highchart-binding-0.8.2/highchart.js +++ /dev/null @@ -1,140 +0,0 @@ -HTMLWidgets.widget({ - - name: 'highchart', - - type: 'output', - - initialize: function(el, width, height) { - - return { - // TODO: add instance fields as required - }; - - }, - - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } - - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); - - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); - - } - - ResetHighchartsOptions(); - - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } - - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } - - Highcharts.setOptions(x.conf_opts); - - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - - } - - } - - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); - - var pc = $($("#" + el.id).find("#play-controls")[0]); - - var ct = x.theme.chart; - - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); - - - } - - }, - - resize: function(el, width, height, instance) { - - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); - - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } - - - } - -}); diff --git a/docs/articles/modules_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/modules_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/modules_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/motion.html b/docs/articles/motion.html index 3818b680..a309a500 100644 --- a/docs/articles/motion.html +++ b/docs/articles/motion.html @@ -78,6 +78,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -105,6 +108,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -144,7 +150,7 @@

    Motion plugin

    Joshua Kunst

    -

    2020-07-26

    +

    2020-08-04

    Source: vignettes/motion.Rmd @@ -228,8 +234,8 @@

    rlist::list.merge(xaxis, list(opposite = TRUE, linkedTo = 0)) )

    -
    -
    +
    
+
     # highchart() %>% 
 #   hc_xAxis(min = 0, max = 10) %>% 
 #   hc_yAxis(min = 0, max = 10) %>% 
diff --git a/docs/articles/motion_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/motion_files/highchart-binding-0.8.2.9000/highchart.js
index 2c97c96e..b3507b5b 100644
--- a/docs/articles/motion_files/highchart-binding-0.8.2.9000/highchart.js
+++ b/docs/articles/motion_files/highchart-binding-0.8.2.9000/highchart.js
@@ -4,137 +4,226 @@ HTMLWidgets.widget({
 
   type: 'output',
 
-  initialize: function(el, width, height) {
+  factory: function(el, width, height) {
+
+    // TODO: define shared variables for this instance
+    var chart;
 
     return {
-      // TODO: add instance fields as required
-    };
 
-  },
+        renderValue: function(x) {
+    
+          if(x.debug) {
+            window.xclone = JSON.parse(JSON.stringify(x));
+            window.elclone = $(el);
+            console.log(el);
+            console.log("hc_opts", x.hc_opts);
+            console.log("theme", x.theme);
+            console.log("conf_opts", x.conf_opts);
+          }
+      
+          if(x.fonts !== undefined) {
+            
+            x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts);
+          
+            x.fonts.forEach(function(s){
+              /* http://stackoverflow.com/questions/4724606 */
+              var urlfont = 'https://fonts.googleapis.com/css?family=' + s;
+              if (!$("link[href='" + urlfont + "']").length) {
+                $('').appendTo("head");
+              }
+              
+            });
+            
+          }
+          
+          ResetHighchartsOptions();
+          
+          if(x.theme !== null) {
+            
+            if(x.debug) console.log("adding THEME");
+            
+            Highcharts.setOptions(x.theme);
+            
+          }
+          
+          if((x.theme && x.theme.chart.divBackgroundImage !== undefined) |
+               (x.hc_opts.chart  && x.hc_opts.chart.divBackgroundImage !== undefined)) {
+                 
+            if(x.debug) console.log("adding BackgroundImage");     
+                 
+            var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage;
+            
+            Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) {
+              
+              proceed.call(this);
+              
+              $("#" + el.id).css("background-image", "url(" + bkgrnd + ")");
+              $("#" + el.id).css("-webkit-background-size", "cover");
+              $("#" + el.id).css("-moz-background-size", "cover");
+              $("#" + el.id).css("-o-background-size", "cover");
+              $("#" + el.id).css("background-size", "cover");
+              
+            });
+            
+          }
+          
+          Highcharts.setOptions(x.conf_opts);
+          
+          // creating chart according thype
+          if(x.type == "chart") {
+            
+            if(x.debug) console.log("charting CHART");
+            
+            chart = $("#" + el.id).highcharts(x.hc_opts);
+            
+          } else if (x.type == "stock") {
+            
+            if(x.debug) console.log("charting STOCK");
+            
+            chart = $("#" + el.id).highcharts('StockChart', x.hc_opts);
+            
+          } else if (x.type == "map"){
+            
+            if(x.debug) console.log("charting MAP");
+      
+            x.hc_opts.series = x.hc_opts.series.map(function(e){
+              if(e.geojson === true) {
+                if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series));
+                e.data = Highcharts.geojson(e.data, e.type);
+              }
+              return e;
+            });
+            
+            chart = $("#" + el.id).highcharts('Map', x.hc_opts); 
+            
+            if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){
+              /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */
+              $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) {
+                var e0 = e.originalEvent,
+                delta = e0.wheelDelta || -e0.detail;
+                this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
+                e.preventDefault();
+      
+              });
+              
+            }
+            
+          }
+          
+          if(x.hc_opts.motion !== undefined) {
+            
+            $("#" + el.id).css({"position" : "relative" });
+            
+            if(x.debug) console.log("setting MOTION options");
+            
+            var pc = $($("#" + el.id).find("#play-controls")[0]);
+            
+            var ct = x.theme.chart;
+            
+            if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor});
+            if(ct.style !== undefined)  $(pc.find("#play-output")[0]).css(x.theme.chart.style);
+            if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color});
+            
+            
+          }
+          
+          return chart;
+          
+        },
+      
+        resize: function(el, width, height, instance) {
+          
+          /* http://stackoverflow.com/questions/18445784/ */
+          var chart = $("#" + el.id).highcharts();
+          
+          if (chart && chart.options.chart.reflow === true) {  // _check for reflow option_
+            var w = chart.renderTo.clientWidth; 
+            var h = chart.renderTo.clientHeight; 
+            chart.setSize(w, h); 
+          }
+          
+        }
 
-  renderValue: function(el, x, instance) {
-    
-    if(x.debug) {
-      window.xclone = JSON.parse(JSON.stringify(x));
-      window.elclone = $(el);
-      console.log(el);
-      console.log("hc_opts", x.hc_opts);
-      console.log("theme", x.theme);
-      console.log("conf_opts", x.conf_opts);
-    }
+    };
+  }
+});
 
-    if(x.fonts !== undefined) {
-      
-      x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts);
+if (HTMLWidgets.shinyMode) {
+  
+  Shiny.addCustomMessageHandler('addSeries', function(msg) {
     
-      x.fonts.forEach(function(s){
-        /* http://stackoverflow.com/questions/4724606 */
-        var urlfont = 'https://fonts.googleapis.com/css?family=' + s;
-        if (!$("link[href='" + urlfont + "']").length) {
-          $('').appendTo("head");
-        }
-        
-      });
+    var chart = $("#" + msg.id).highcharts();
+    
+    chart.addSeries(msg.series);
       
-    }
+  });
+  
+  Shiny.addCustomMessageHandler('removeSeries', function(msg) {
     
-    ResetHighchartsOptions();
+    var chart = $("#" + msg.id).highcharts();
     
-    if(x.theme !== null) {
-      
-      if(x.debug) console.log("adding THEME");
-      
-      Highcharts.setOptions(x.theme);
-      
-    }
+    chart.get(msg.idSeries).remove();
     
-    if((x.theme && x.theme.chart.divBackgroundImage !== undefined) |
-         (x.hc_opts.chart  && x.hc_opts.chart.divBackgroundImage !== undefined)) {
-           
-      if(x.debug) console.log("adding BackgroundImage");     
-           
-      var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage;
-      
-      Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) {
-        
-        proceed.call(this);
-        
-        $("#" + el.id).css("background-image", "url(" + bkgrnd + ")");
-        $("#" + el.id).css("-webkit-background-size", "cover");
-        $("#" + el.id).css("-moz-background-size", "cover");
-        $("#" + el.id).css("-o-background-size", "cover");
-        $("#" + el.id).css("background-size", "cover");
-        
-      });
-      
-    }
+  });
+  
+  Shiny.addCustomMessageHandler('removeAllSeries', function(msg) {
     
-    Highcharts.setOptions(x.conf_opts);
+    var chart = $("#" + msg.id).highcharts();
     
-    if(x.type == "chart") {
-      if(x.debug) console.log("charting CHART");
-      $("#" + el.id).highcharts(x.hc_opts);
-    } else if (x.type == "stock") {
-      if(x.debug) console.log("charting STOCK");
-      $("#" + el.id).highcharts('StockChart', x.hc_opts);  
-    } else if (x.type == "map"){
-      if(x.debug) console.log("charting MAP");
-
-      x.hc_opts.series = x.hc_opts.series.map(function(e){
-        if(e.geojson === true) {
-          if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series));
-          e.data = Highcharts.geojson(e.data, e.type);
-        }
-        return e;
-      });
-      
-      $("#" + el.id).highcharts('Map', x.hc_opts); 
-      
-      if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){
-        /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */
-        $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) {
-          var e0 = e.originalEvent,
-          delta = e0.wheelDelta || -e0.detail;
-          this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
-          e.preventDefault();
-
-        });
-        
+    while (chart.series.length) {
+      chart.series[0].remove();
       }
-      
-    }
     
-    if(x.hc_opts.motion !== undefined) {
-      
-      $("#" + el.id).css({"position" : "relative" });
-      
-      if(x.debug) console.log("setting MOTION options");
+  });
+  
+  Shiny.addCustomMessageHandler('updateChart', function(msg) {
+    
+    var chart = $("#" + msg.id).highcharts();
+    
+    chart.update(msg.options);
+   
+  });
+  
+  Shiny.addCustomMessageHandler('updateSeries', function(msg) {
+    
+    var chart = $("#" + msg.id).highcharts();
+    
+    chart.get(msg.idSeries).update(msg.options);
+    
+  });
+  
+  Shiny.addCustomMessageHandler('showLoading', function(msg) {
+    
+    var chart = $("#" + msg.id).highcharts();
+    
+    if (msg.showLoading) {
       
-      var pc = $($("#" + el.id).find("#play-controls")[0]);
+      chart.showLoading();
       
-      var ct = x.theme.chart;
+    } else {
       
-      if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor});
-      if(ct.style !== undefined)  $(pc.find("#play-output")[0]).css(x.theme.chart.style);
-      if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color});
+      chart.hideLoading();
       
+    }
       
-    } 
+  });
+  
+  Shiny.addCustomMessageHandler('addPoint', function(msg) {
     
-  },
-
-  resize: function(el, width, height, instance) {
+    var chart = $("#" + msg.id).highcharts();
     
-    /* http://stackoverflow.com/questions/18445784/ */
-    var chart = $("#" +el.id).highcharts();
+    chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation);
     
-    if (chart && chart.options.chart.reflow === true) {  // _check for reflow option_
-      var w = chart.renderTo.clientWidth; 
-      var h = chart.renderTo.clientHeight; 
-      chart.setSize(w, h); 
-    }
+  });
+  
+  Shiny.addCustomMessageHandler('removePoint', function(msg) {
     
-
-  }
-
-});
+    var chart = $("#" + msg.id).highcharts();
+    
+    chart.get(msg.idSeries).removePoint(msg.i, msg.redraw);
+    
+  });
+  
+  
+}
diff --git a/docs/articles/motion_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/motion_files/highcharts-8.1.2/custom/delay-animation.js
new file mode 100644
index 00000000..730e6af4
--- /dev/null
+++ b/docs/articles/motion_files/highcharts-8.1.2/custom/delay-animation.js
@@ -0,0 +1,135 @@
+/**
+ * by @TorsteinHonsi and modified by @frank-eisen
+ * returns a highcharts animation object with an own easing-function
+ * @param {number} duration
+ * @param {number} delay
+ * @param {function} timingFunction
+ * @return {number|object}
+ */
+function highchartsAnimation(duration, delay, timingFunction)
+{
+  if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') {
+    var delay_percent = delay / (duration + delay),
+        perc = 1 - delay_percent;
+    
+    return {
+      duration: duration + delay,
+      easing: function(pos) {
+        if(pos <= delay_percent) {
+          return 0;
+        }
+        else {
+          return timingFunction((pos - delay_percent) / perc);
+        }
+      }
+    };
+  }
+  else {
+    return 750;
+  }
+}
+
+/**
+ * returns a timing function
+ * @param name
+ * @return {function}
+ */
+function getTimingFunction(name)
+{
+	var args = arguments;
+
+	function needArgumentsCount(need_count)
+	{
+		if(args.length < need_count) {
+			throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments');
+		}
+	}
+
+	switch(name) {
+		case 'pow':
+		case 'power':
+			needArgumentsCount(1);
+			return function power(percent_done) {
+				return Math.pow(percent_done, args[1]);
+			};
+
+		case 'quad':
+			return getTimingFunction.apply(this, ['pow', 2]);
+
+		case 'cubic':
+			return getTimingFunction.apply(this, ['pow', 3]);
+
+		case 'sqrt':
+		case 'squareroot':
+			return function sqrt(percent_done) {
+				return Math.sqrt(percent_done);
+			};
+
+		case 'sine':
+		case 'sinus':
+			return function sinus(percent_done) {
+				return Math.sin(percent_done * (Math.PI / 2));
+			};
+
+		case 'steps':
+			needArgumentsCount(2);
+			return function steps(percent_done) {
+				return Math.floor(percent_done * (args[1])) / (args[1]);
+			};
+
+		case 'bezier':
+			needArgumentsCount(5);
+
+			var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]);
+
+			return function bez(percent_done) {
+				var coords = bezier(percent_done);
+				
+				return coords[1];
+			};
+
+		case 'linear':
+		default:
+			return function linear(percent_done) {
+				return percent_done;
+			};
+	}
+
+
+	function simpleBezier(p0, p1, p2, p3)
+	{
+		var x_c = getC(p0[0], p1[0]),
+			x_b = getB(p1[0], p2[0], x_c),
+			x_a = getA(p0[0], p3[0], x_b, x_c),
+			y_c = getC(p0[1], p1[1]),
+			y_b = getB(p1[1], p2[1], y_c),
+			y_a = getA(p0[1], p3[1], y_b, y_c);
+
+		function getC(p0, p1)
+		{
+			return 3 * (p1 - p0);
+		}
+
+		function getB(p1, p2, c)
+		{
+			return 3 * (p2 - p1) - c
+		}
+
+		function getA(p0, p3, b, c)
+		{
+			return p3 - p0 - c - b
+		}
+
+		function calculateBezier(a, b, c, t, position)
+		{
+			return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position;
+		}
+
+		return function getPositionFor(t) {
+			return [
+				calculateBezier(x_a, x_b, x_c, t, p0[0]),
+				calculateBezier(y_a, y_b, y_c, t, p0[1])
+			];
+		};
+	}
+}
diff --git a/docs/articles/shiny-events-demo.html b/docs/articles/shiny-events-demo.html
index 77883dd7..18926cf6 100644
--- a/docs/articles/shiny-events-demo.html
+++ b/docs/articles/shiny-events-demo.html
@@ -78,6 +78,9 @@
     
  • 
       Highcharts API
     
    • 
+    
  • 
+      Javascript API Basics
+    
    • 
     
  • 
       Showcase
     
    • 
@@ -105,6 +108,9 @@
     
  • 
       Themes
     
    • 
+    
  • 
+      Commons HOW TOs
+    
    • 
     
  • 
       Modules & plugins
     
    • 
@@ -144,7 +150,7 @@ 
    Shiny Events Demo
    
                         
    Martin John Hadley, @martinjhnhadley
 
    
             
-            
    2020-07-26
    
+            
    2020-08-04
    
       
       Source: vignettes/shiny-events-demo.Rmd
       
diff --git a/docs/articles/showcase.html b/docs/articles/showcase.html
index 5fcba668..963ded24 100644
--- a/docs/articles/showcase.html
+++ b/docs/articles/showcase.html
@@ -79,6 +79,9 @@
     
  • 
       Highcharts API
     
    • 
+    
  • 
+      Javascript API Basics
+    
    • 
     
  • 
       Showcase
     
    • 
@@ -106,6 +109,9 @@
     
  • 
       Themes
     
    • 
+    
  • 
+      Commons HOW TOs
+    
    • 
     
  • 
       Modules & plugins
     
    • 
@@ -145,7 +151,7 @@
       
    Showcase
    
                         
    Joshua Kunst
    
             
-            
    2020-07-26
    
+            
    2020-08-04
    
       
       Source: vignettes/showcase.Rmd
       
@@ -236,8 +242,8 @@ 
    
     height = 600
     )
 
    
-
    
-
+
    
+

    @@ -296,8 +302,8 @@

    ) %>% hc_size(height = 700)

    -
    - +
    +

    @@ -348,8 +354,8 @@

    height = 600 )

    -
    - +
    +

    @@ -415,8 +421,8 @@

    height = 700 )

    -
    - +
    +

    @@ -478,8 +484,8 @@

    ) %>% hc_size(height = 1000)

    -
    - +
    + diff --git a/docs/articles/showcase_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/showcase_files/highchart-binding-0.8.2.9000/highchart.js index 2c97c96e..b3507b5b 100644 --- a/docs/articles/showcase_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/showcase_files/highchart-binding-0.8.2.9000/highchart.js @@ -4,137 +4,226 @@ HTMLWidgets.widget({ type: 'output', - initialize: function(el, width, height) { + factory: function(el, width, height) { + + // TODO: define shared variables for this instance + var chart; return { - // TODO: add instance fields as required - }; - }, + renderValue: function(x) { + + if(x.debug) { + window.xclone = JSON.parse(JSON.stringify(x)); + window.elclone = $(el); + console.log(el); + console.log("hc_opts", x.hc_opts); + console.log("theme", x.theme); + console.log("conf_opts", x.conf_opts); + } + + if(x.fonts !== undefined) { + + x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); + + x.fonts.forEach(function(s){ + /* http://stackoverflow.com/questions/4724606 */ + var urlfont = 'https://fonts.googleapis.com/css?family=' + s; + if (!$("link[href='" + urlfont + "']").length) { + $('').appendTo("head"); + } + + }); + + } + + ResetHighchartsOptions(); + + if(x.theme !== null) { + + if(x.debug) console.log("adding THEME"); + + Highcharts.setOptions(x.theme); + + } + + if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | + (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { + + if(x.debug) console.log("adding BackgroundImage"); + + var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; + + Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { + + proceed.call(this); + + $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); + $("#" + el.id).css("-webkit-background-size", "cover"); + $("#" + el.id).css("-moz-background-size", "cover"); + $("#" + el.id).css("-o-background-size", "cover"); + $("#" + el.id).css("background-size", "cover"); + + }); + + } + + Highcharts.setOptions(x.conf_opts); + + // creating chart according thype + if(x.type == "chart") { + + if(x.debug) console.log("charting CHART"); + + chart = $("#" + el.id).highcharts(x.hc_opts); + + } else if (x.type == "stock") { + + if(x.debug) console.log("charting STOCK"); + + chart = $("#" + el.id).highcharts('StockChart', x.hc_opts); + + } else if (x.type == "map"){ + + if(x.debug) console.log("charting MAP"); + + x.hc_opts.series = x.hc_opts.series.map(function(e){ + if(e.geojson === true) { + if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); + e.data = Highcharts.geojson(e.data, e.type); + } + return e; + }); + + chart = $("#" + el.id).highcharts('Map', x.hc_opts); + + if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ + /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ + $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { + var e0 = e.originalEvent, + delta = e0.wheelDelta || -e0.detail; + this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; + e.preventDefault(); + + }); + + } + + } + + if(x.hc_opts.motion !== undefined) { + + $("#" + el.id).css({"position" : "relative" }); + + if(x.debug) console.log("setting MOTION options"); + + var pc = $($("#" + el.id).find("#play-controls")[0]); + + var ct = x.theme.chart; + + if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); + if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); + if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + + + } + + return chart; + + }, + + resize: function(el, width, height, instance) { + + /* http://stackoverflow.com/questions/18445784/ */ + var chart = $("#" + el.id).highcharts(); + + if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ + var w = chart.renderTo.clientWidth; + var h = chart.renderTo.clientHeight; + chart.setSize(w, h); + } + + } - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } + }; + } +}); - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); +if (HTMLWidgets.shinyMode) { + + Shiny.addCustomMessageHandler('addSeries', function(msg) { - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); + var chart = $("#" + msg.id).highcharts(); + + chart.addSeries(msg.series); - } + }); + + Shiny.addCustomMessageHandler('removeSeries', function(msg) { - ResetHighchartsOptions(); + var chart = $("#" + msg.id).highcharts(); - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } + chart.get(msg.idSeries).remove(); - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } + }); + + Shiny.addCustomMessageHandler('removeAllSeries', function(msg) { - Highcharts.setOptions(x.conf_opts); + var chart = $("#" + msg.id).highcharts(); - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - + while (chart.series.length) { + chart.series[0].remove(); } - - } - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); + }); + + Shiny.addCustomMessageHandler('updateChart', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.update(msg.options); + + }); + + Shiny.addCustomMessageHandler('updateSeries', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).update(msg.options); + + }); + + Shiny.addCustomMessageHandler('showLoading', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + if (msg.showLoading) { - var pc = $($("#" + el.id).find("#play-controls")[0]); + chart.showLoading(); - var ct = x.theme.chart; + } else { - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + chart.hideLoading(); + } - } + }); + + Shiny.addCustomMessageHandler('addPoint', function(msg) { - }, - - resize: function(el, width, height, instance) { + var chart = $("#" + msg.id).highcharts(); - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } + }); + + Shiny.addCustomMessageHandler('removePoint', function(msg) { - - } - -}); + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).removePoint(msg.i, msg.redraw); + + }); + + +} diff --git a/docs/articles/showcase_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/showcase_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/showcase_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/stock.html b/docs/articles/stock.html index f82352c6..9fb2f4d2 100644 --- a/docs/articles/stock.html +++ b/docs/articles/stock.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -106,6 +109,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -145,7 +151,7 @@

    Stocks with highstock

    Joshua Kunst

    -

    2020-07-26

    +

    2020-08-04

    Source: vignettes/stock.Rmd @@ -174,8 +180,8 @@

    hchart(x) -
    -

    Obviously you can use the implemented API functions to edit the chart:

    +
    +

    Obviously you can use the implemented API functions to edit the chart:

     y <- getSymbols("AMZN", auto.assign = FALSE)
 
@@ -183,8 +189,8 @@ 
    
   hc_title(text = "This is a Open-high-low-close chart with a custom theme") %>% 
   hc_add_theme(hc_theme_db())
    -
    - +
    +

    @@ -195,8 +201,8 @@

    hc_add_series(x) %>% hc_add_series(y, type = "ohlc")

    -
    -

    In the next example well chart xts class data:

    +
    +

    In the next example well chart xts class data:

     usdjpy <- getSymbols("USD/JPY", src = "oanda", auto.assign = FALSE)
 eurkpw <- getSymbols("EUR/KPW", src = "oanda", auto.assign = FALSE)
@@ -213,8 +219,8 @@ 
    
 
 hc
    -
    - +
    +

    @@ -235,9 +241,9 @@ 

    ## Rows: 5
 ## Columns: 3
-## $ date  <date> 2020-07-05, 2020-02-11, 2020-07-16, 2020-03-18, 2020-05-25
+## $ date  <date> 2020-07-14, 2020-02-20, 2020-07-25, 2020-03-27, 2020-06-03
 ## $ title <chr> "E #1", "E #2", "E #3", "E #4", "E #5"
-## $ text  <chr> "An interesting event #1 in 2020-07-05", "An interesting even...
    +## $ text <chr> "An interesting event #1 in 2020-07-14", "An interesting even...     
     hc %>% 
   hc_add_series(
@@ -247,8 +253,8 @@ 
    
     onSeries = "usdjpy"
     )
    -
    - +
    +

    @@ -279,8 +285,8 @@

    hc_tooltip(valueDecimals = 2) %>% hc_size(height = 800)

    -
    - +
    + diff --git a/docs/articles/stock_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/stock_files/highchart-binding-0.8.2.9000/highchart.js index 2c97c96e..b3507b5b 100644 --- a/docs/articles/stock_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/stock_files/highchart-binding-0.8.2.9000/highchart.js @@ -4,137 +4,226 @@ HTMLWidgets.widget({ type: 'output', - initialize: function(el, width, height) { + factory: function(el, width, height) { + + // TODO: define shared variables for this instance + var chart; return { - // TODO: add instance fields as required - }; - }, + renderValue: function(x) { + + if(x.debug) { + window.xclone = JSON.parse(JSON.stringify(x)); + window.elclone = $(el); + console.log(el); + console.log("hc_opts", x.hc_opts); + console.log("theme", x.theme); + console.log("conf_opts", x.conf_opts); + } + + if(x.fonts !== undefined) { + + x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); + + x.fonts.forEach(function(s){ + /* http://stackoverflow.com/questions/4724606 */ + var urlfont = 'https://fonts.googleapis.com/css?family=' + s; + if (!$("link[href='" + urlfont + "']").length) { + $('').appendTo("head"); + } + + }); + + } + + ResetHighchartsOptions(); + + if(x.theme !== null) { + + if(x.debug) console.log("adding THEME"); + + Highcharts.setOptions(x.theme); + + } + + if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | + (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { + + if(x.debug) console.log("adding BackgroundImage"); + + var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; + + Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { + + proceed.call(this); + + $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); + $("#" + el.id).css("-webkit-background-size", "cover"); + $("#" + el.id).css("-moz-background-size", "cover"); + $("#" + el.id).css("-o-background-size", "cover"); + $("#" + el.id).css("background-size", "cover"); + + }); + + } + + Highcharts.setOptions(x.conf_opts); + + // creating chart according thype + if(x.type == "chart") { + + if(x.debug) console.log("charting CHART"); + + chart = $("#" + el.id).highcharts(x.hc_opts); + + } else if (x.type == "stock") { + + if(x.debug) console.log("charting STOCK"); + + chart = $("#" + el.id).highcharts('StockChart', x.hc_opts); + + } else if (x.type == "map"){ + + if(x.debug) console.log("charting MAP"); + + x.hc_opts.series = x.hc_opts.series.map(function(e){ + if(e.geojson === true) { + if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); + e.data = Highcharts.geojson(e.data, e.type); + } + return e; + }); + + chart = $("#" + el.id).highcharts('Map', x.hc_opts); + + if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ + /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ + $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { + var e0 = e.originalEvent, + delta = e0.wheelDelta || -e0.detail; + this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; + e.preventDefault(); + + }); + + } + + } + + if(x.hc_opts.motion !== undefined) { + + $("#" + el.id).css({"position" : "relative" }); + + if(x.debug) console.log("setting MOTION options"); + + var pc = $($("#" + el.id).find("#play-controls")[0]); + + var ct = x.theme.chart; + + if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); + if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); + if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + + + } + + return chart; + + }, + + resize: function(el, width, height, instance) { + + /* http://stackoverflow.com/questions/18445784/ */ + var chart = $("#" + el.id).highcharts(); + + if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ + var w = chart.renderTo.clientWidth; + var h = chart.renderTo.clientHeight; + chart.setSize(w, h); + } + + } - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } + }; + } +}); - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); +if (HTMLWidgets.shinyMode) { + + Shiny.addCustomMessageHandler('addSeries', function(msg) { - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); + var chart = $("#" + msg.id).highcharts(); + + chart.addSeries(msg.series); - } + }); + + Shiny.addCustomMessageHandler('removeSeries', function(msg) { - ResetHighchartsOptions(); + var chart = $("#" + msg.id).highcharts(); - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } + chart.get(msg.idSeries).remove(); - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } + }); + + Shiny.addCustomMessageHandler('removeAllSeries', function(msg) { - Highcharts.setOptions(x.conf_opts); + var chart = $("#" + msg.id).highcharts(); - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - + while (chart.series.length) { + chart.series[0].remove(); } - - } - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); + }); + + Shiny.addCustomMessageHandler('updateChart', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.update(msg.options); + + }); + + Shiny.addCustomMessageHandler('updateSeries', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).update(msg.options); + + }); + + Shiny.addCustomMessageHandler('showLoading', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + if (msg.showLoading) { - var pc = $($("#" + el.id).find("#play-controls")[0]); + chart.showLoading(); - var ct = x.theme.chart; + } else { - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + chart.hideLoading(); + } - } + }); + + Shiny.addCustomMessageHandler('addPoint', function(msg) { - }, - - resize: function(el, width, height, instance) { + var chart = $("#" + msg.id).highcharts(); - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } + }); + + Shiny.addCustomMessageHandler('removePoint', function(msg) { - - } - -}); + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).removePoint(msg.i, msg.redraw); + + }); + + +} diff --git a/docs/articles/stock_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/stock_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/stock_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/articles/themes.html b/docs/articles/themes.html index e88c1404..5757859f 100644 --- a/docs/articles/themes.html +++ b/docs/articles/themes.html @@ -79,6 +79,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -106,6 +109,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -145,7 +151,7 @@

    Themes

    Joshua Kunst

    -

    2020-07-26

    +

    2020-08-04

    Source: vignettes/themes.Rmd @@ -182,8 +188,8 @@

    2020-07-26

    hc -
    -
    +
    +

    Themes

    Here you’ll find the themes to change the look of your charts.

    @@ -261,96 +267,96 @@


    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +

    @@ -391,8 +397,8 @@

    hc %>% hc_add_theme(my_own_theme)

    -
    - +
    +

    @@ -419,8 +425,8 @@

    hc %>% hc_add_theme(thm)

    -
    - +
    + diff --git a/docs/articles/themes_files/highchart-binding-0.8.2.9000/highchart.js b/docs/articles/themes_files/highchart-binding-0.8.2.9000/highchart.js index 2c97c96e..b3507b5b 100644 --- a/docs/articles/themes_files/highchart-binding-0.8.2.9000/highchart.js +++ b/docs/articles/themes_files/highchart-binding-0.8.2.9000/highchart.js @@ -4,137 +4,226 @@ HTMLWidgets.widget({ type: 'output', - initialize: function(el, width, height) { + factory: function(el, width, height) { + + // TODO: define shared variables for this instance + var chart; return { - // TODO: add instance fields as required - }; - }, + renderValue: function(x) { + + if(x.debug) { + window.xclone = JSON.parse(JSON.stringify(x)); + window.elclone = $(el); + console.log(el); + console.log("hc_opts", x.hc_opts); + console.log("theme", x.theme); + console.log("conf_opts", x.conf_opts); + } + + if(x.fonts !== undefined) { + + x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); + + x.fonts.forEach(function(s){ + /* http://stackoverflow.com/questions/4724606 */ + var urlfont = 'https://fonts.googleapis.com/css?family=' + s; + if (!$("link[href='" + urlfont + "']").length) { + $('').appendTo("head"); + } + + }); + + } + + ResetHighchartsOptions(); + + if(x.theme !== null) { + + if(x.debug) console.log("adding THEME"); + + Highcharts.setOptions(x.theme); + + } + + if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | + (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { + + if(x.debug) console.log("adding BackgroundImage"); + + var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; + + Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { + + proceed.call(this); + + $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); + $("#" + el.id).css("-webkit-background-size", "cover"); + $("#" + el.id).css("-moz-background-size", "cover"); + $("#" + el.id).css("-o-background-size", "cover"); + $("#" + el.id).css("background-size", "cover"); + + }); + + } + + Highcharts.setOptions(x.conf_opts); + + // creating chart according thype + if(x.type == "chart") { + + if(x.debug) console.log("charting CHART"); + + chart = $("#" + el.id).highcharts(x.hc_opts); + + } else if (x.type == "stock") { + + if(x.debug) console.log("charting STOCK"); + + chart = $("#" + el.id).highcharts('StockChart', x.hc_opts); + + } else if (x.type == "map"){ + + if(x.debug) console.log("charting MAP"); + + x.hc_opts.series = x.hc_opts.series.map(function(e){ + if(e.geojson === true) { + if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); + e.data = Highcharts.geojson(e.data, e.type); + } + return e; + }); + + chart = $("#" + el.id).highcharts('Map', x.hc_opts); + + if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ + /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ + $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { + var e0 = e.originalEvent, + delta = e0.wheelDelta || -e0.detail; + this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; + e.preventDefault(); + + }); + + } + + } + + if(x.hc_opts.motion !== undefined) { + + $("#" + el.id).css({"position" : "relative" }); + + if(x.debug) console.log("setting MOTION options"); + + var pc = $($("#" + el.id).find("#play-controls")[0]); + + var ct = x.theme.chart; + + if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); + if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); + if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + + + } + + return chart; + + }, + + resize: function(el, width, height, instance) { + + /* http://stackoverflow.com/questions/18445784/ */ + var chart = $("#" + el.id).highcharts(); + + if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ + var w = chart.renderTo.clientWidth; + var h = chart.renderTo.clientHeight; + chart.setSize(w, h); + } + + } - renderValue: function(el, x, instance) { - - if(x.debug) { - window.xclone = JSON.parse(JSON.stringify(x)); - window.elclone = $(el); - console.log(el); - console.log("hc_opts", x.hc_opts); - console.log("theme", x.theme); - console.log("conf_opts", x.conf_opts); - } + }; + } +}); - if(x.fonts !== undefined) { - - x.fonts = ((typeof(x.fonts) == "string") ? [x.fonts] : x.fonts); +if (HTMLWidgets.shinyMode) { + + Shiny.addCustomMessageHandler('addSeries', function(msg) { - x.fonts.forEach(function(s){ - /* http://stackoverflow.com/questions/4724606 */ - var urlfont = 'https://fonts.googleapis.com/css?family=' + s; - if (!$("link[href='" + urlfont + "']").length) { - $('').appendTo("head"); - } - - }); + var chart = $("#" + msg.id).highcharts(); + + chart.addSeries(msg.series); - } + }); + + Shiny.addCustomMessageHandler('removeSeries', function(msg) { - ResetHighchartsOptions(); + var chart = $("#" + msg.id).highcharts(); - if(x.theme !== null) { - - if(x.debug) console.log("adding THEME"); - - Highcharts.setOptions(x.theme); - - } + chart.get(msg.idSeries).remove(); - if((x.theme && x.theme.chart.divBackgroundImage !== undefined) | - (x.hc_opts.chart && x.hc_opts.chart.divBackgroundImage !== undefined)) { - - if(x.debug) console.log("adding BackgroundImage"); - - var bkgrnd = x.theme.chart.divBackgroundImage || x.hc_opts.chart.divBackgroundImage; - - Highcharts.wrap(Highcharts.Chart.prototype, "getContainer", function (proceed) { - - proceed.call(this); - - $("#" + el.id).css("background-image", "url(" + bkgrnd + ")"); - $("#" + el.id).css("-webkit-background-size", "cover"); - $("#" + el.id).css("-moz-background-size", "cover"); - $("#" + el.id).css("-o-background-size", "cover"); - $("#" + el.id).css("background-size", "cover"); - - }); - - } + }); + + Shiny.addCustomMessageHandler('removeAllSeries', function(msg) { - Highcharts.setOptions(x.conf_opts); + var chart = $("#" + msg.id).highcharts(); - if(x.type == "chart") { - if(x.debug) console.log("charting CHART"); - $("#" + el.id).highcharts(x.hc_opts); - } else if (x.type == "stock") { - if(x.debug) console.log("charting STOCK"); - $("#" + el.id).highcharts('StockChart', x.hc_opts); - } else if (x.type == "map"){ - if(x.debug) console.log("charting MAP"); - - x.hc_opts.series = x.hc_opts.series.map(function(e){ - if(e.geojson === true) { - if(x.debug) console.log("geojson\n\t", e.type, "\n\t", typeof(e.series)); - e.data = Highcharts.geojson(e.data, e.type); - } - return e; - }); - - $("#" + el.id).highcharts('Map', x.hc_opts); - - if(x.hc_opts.mapNavigation !== undefined && x.hc_opts.mapNavigation.enabled === true){ - /* if have navigation option and enabled true: http://stackoverflow.com/questions/7600454 */ - $("#" + el.id).bind( 'mousewheel DOMMouseScroll', function ( e ) { - var e0 = e.originalEvent, - delta = e0.wheelDelta || -e0.detail; - this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30; - e.preventDefault(); - - }); - + while (chart.series.length) { + chart.series[0].remove(); } - - } - if(x.hc_opts.motion !== undefined) { - - $("#" + el.id).css({"position" : "relative" }); - - if(x.debug) console.log("setting MOTION options"); + }); + + Shiny.addCustomMessageHandler('updateChart', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.update(msg.options); + + }); + + Shiny.addCustomMessageHandler('updateSeries', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).update(msg.options); + + }); + + Shiny.addCustomMessageHandler('showLoading', function(msg) { + + var chart = $("#" + msg.id).highcharts(); + + if (msg.showLoading) { - var pc = $($("#" + el.id).find("#play-controls")[0]); + chart.showLoading(); - var ct = x.theme.chart; + } else { - if(ct.backgroundColor !== undefined) $(pc.find("#play-pause-button")[0]).css({backgroundColor : x.theme.chart.backgroundColor}); - if(ct.style !== undefined) $(pc.find("#play-output")[0]).css(x.theme.chart.style); - if(ct.style !== undefined && ct.style.color !== undefined) $(pc.find("#play-pause-button")[0]).css({color : x.theme.chart.style.color}); + chart.hideLoading(); + } - } + }); + + Shiny.addCustomMessageHandler('addPoint', function(msg) { - }, - - resize: function(el, width, height, instance) { + var chart = $("#" + msg.id).highcharts(); - /* http://stackoverflow.com/questions/18445784/ */ - var chart = $("#" +el.id).highcharts(); + chart.get(msg.idSeries).addPoint(msg.point, msg.redraw, msg.shift, msg.animation); - if (chart && chart.options.chart.reflow === true) { // _check for reflow option_ - var w = chart.renderTo.clientWidth; - var h = chart.renderTo.clientHeight; - chart.setSize(w, h); - } + }); + + Shiny.addCustomMessageHandler('removePoint', function(msg) { - - } - -}); + var chart = $("#" + msg.id).highcharts(); + + chart.get(msg.idSeries).removePoint(msg.i, msg.redraw); + + }); + + +} diff --git a/docs/articles/themes_files/highcharts-8.1.2/custom/delay-animation.js b/docs/articles/themes_files/highcharts-8.1.2/custom/delay-animation.js new file mode 100644 index 00000000..730e6af4 --- /dev/null +++ b/docs/articles/themes_files/highcharts-8.1.2/custom/delay-animation.js @@ -0,0 +1,135 @@ +/** + * by @TorsteinHonsi and modified by @frank-eisen + * returns a highcharts animation object with an own easing-function + * @param {number} duration + * @param {number} delay + * @param {function} timingFunction + * @return {number|object} + */ +function highchartsAnimation(duration, delay, timingFunction) +{ + if(typeof duration === 'number' && typeof delay === 'number' && typeof timingFunction === 'function') { + var delay_percent = delay / (duration + delay), + perc = 1 - delay_percent; + + return { + duration: duration + delay, + easing: function(pos) { + if(pos <= delay_percent) { + return 0; + } + else { + return timingFunction((pos - delay_percent) / perc); + } + } + }; + } + else { + return 750; + } +} + +/** + * returns a timing function + * @param name + * @return {function} + */ +function getTimingFunction(name) +{ + var args = arguments; + + function needArgumentsCount(need_count) + { + if(args.length < need_count) { + throw new Error('TimingFunction.' + name + ' needs ' + need_count + ' arguments'); + } + } + + switch(name) { + case 'pow': + case 'power': + needArgumentsCount(1); + return function power(percent_done) { + return Math.pow(percent_done, args[1]); + }; + + case 'quad': + return getTimingFunction.apply(this, ['pow', 2]); + + case 'cubic': + return getTimingFunction.apply(this, ['pow', 3]); + + case 'sqrt': + case 'squareroot': + return function sqrt(percent_done) { + return Math.sqrt(percent_done); + }; + + case 'sine': + case 'sinus': + return function sinus(percent_done) { + return Math.sin(percent_done * (Math.PI / 2)); + }; + + case 'steps': + needArgumentsCount(2); + return function steps(percent_done) { + return Math.floor(percent_done * (args[1])) / (args[1]); + }; + + case 'bezier': + needArgumentsCount(5); + + var bezier = simpleBezier([0, 0], [args[1], args[2]], [args[3], args[4]], [1, 1]); + + return function bez(percent_done) { + var coords = bezier(percent_done); + + return coords[1]; + }; + + case 'linear': + default: + return function linear(percent_done) { + return percent_done; + }; + } + + + function simpleBezier(p0, p1, p2, p3) + { + var x_c = getC(p0[0], p1[0]), + x_b = getB(p1[0], p2[0], x_c), + x_a = getA(p0[0], p3[0], x_b, x_c), + y_c = getC(p0[1], p1[1]), + y_b = getB(p1[1], p2[1], y_c), + y_a = getA(p0[1], p3[1], y_b, y_c); + + function getC(p0, p1) + { + return 3 * (p1 - p0); + } + + function getB(p1, p2, c) + { + return 3 * (p2 - p1) - c + } + + function getA(p0, p3, b, c) + { + return p3 - p0 - c - b + } + + function calculateBezier(a, b, c, t, position) + { + return (a * Math.pow(t, 3)) + (b * Math.pow(t, 2)) + (c * t) + position; + } + + return function getPositionFor(t) { + return [ + calculateBezier(x_a, x_b, x_c, t, p0[0]), + calculateBezier(y_a, y_b, y_c, t, p0[1]) + ]; + }; + } +} diff --git a/docs/index.html b/docs/index.html index bb2f1383..efa0c4f2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -194,36 +194,36 @@

    Highcharter is a R wrapper for Highcharts javascript library and its modules. Highcharts is very flexible and customizable javascript charting library and it has a great and powerful API.

    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +
    -
    - +
    +

    The main features of highcharter are:

    @@ -242,22 +242,22 @@

    Highcharts

    data(penguins, package = "palmerpenguins") hchart(penguins, "scatter", hcaes(x = flipper_length_mm, y = bill_length_mm, group = species))     -
    - +
    +

    Among its features highcharter can chart various objects depending of its class with the generic (magic) hchart function.

    x <- c(rnorm(10000), rnorm(1000, 4, 0.5))
 
 hchart(x, name = "data")
    -
    - +
    +

    One of the nicest class which hchart can plot is theforecast` class from the {forecast} package.

    library(forecast)
 
 airforecast <- forecast(auto.arima(AirPassengers), level = 95)
 
 hchart(airforecast)
    -
    - +
    +

    Highstock

    @@ -277,8 +277,8 @@

    Highstock

    highchart(type = "stock") %>% hc_add_series(x) %>% hc_add_series(y, type = "ohlc") -
    - +
    +

    Highmaps

    @@ -298,8 +298,8 @@

    Highmaps

    stops = color_stops(colors = viridisLite::inferno(10, begin = 0.1)), type = "logarithmic" ) -
    - +
    +

    diff --git a/docs/news/index.html b/docs/news/index.html index 1afd7ad5..0c85a42b 100644 --- a/docs/news/index.html +++ b/docs/news/index.html @@ -124,6 +124,9 @@
  • Highcharts API
    • +
  • + Javascript API Basics +
  • Showcase
    • @@ -151,6 +154,9 @@
  • Themes
    • +
  • + Commons HOW TOs +
  • Modules & plugins
    • @@ -194,14 +200,24 @@

    Changelog

    highcharter 0.8.3 Unreleased

    +
    +

    +Changes

    +
      +
    • Adding hcpxy_add_series, hcpxy_remove_series, hcpxy_update, hcpxy_update_series, hcpxy_add_point, hcpxy_remove_point and hcpxy_loading +
      • +
    • Adding hc_loading for use with hcpxy_loading +
      • +
    +

    highcharter 0.8.2 2020-07-26

    -
    +

    -Changes

    +Changes