Support for embedded Highcharts Cloud charts.

It wouldn't work with an <iframe> with any HC-plugin, but it works with script injection, like any Highcharts plugin should.

The problem is that the data points need the sequence property, which is not available in the Cloud. This is also a problem with any Highcharts plugin which needs plugin-specific option configuration. It would have to be added in the Cloud's "custom code" box, together with the motion options:

Highcharts.extend(options, Highcharts.merge(options, {
  motion: {
    enabled: true,
    series: 0,
    labels: [2014, 2015, 2016, 2017]
  }
}));

var data = options.series[0].data;

data[0] = {name: 'Firefox', y: 45, sequence: [45, 38, 29, 25]};
data[1] = {name: 'IE', y: 26.8, sequence: [26.8, 22, 21, 15]};
data[2] = {name: 'Chrome', y: 12.8, sequence: [12.8, 15, 20, 30]};
data[3] = {name: 'Safari', y: 8.5, sequence: [8.5, 5, 4, 3]};
data[4] = {name: 'Opera', y: 6.2, sequence: [6.2, 4, 3, 2]};
data[5] = {name: 'Others', y: 0.7, sequence: [0.7, 0.6, 0.5, 0.4]};

The plugin script and styling also has to be added to the embed code:

<style>
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
#container {
    height: 400px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
#play-controls {
    text-align: center;
    width: 100%;
    padding: 5px 0 1em 0;
}
#play-controls * {
    display: inline-block;
    vertical-align: middle;
}
#play-pause-button {
    width: 30px;
    height: 30px;
    text-align: center;
    font-size: 15px;
    outline: none;
    cursor: pointer;
}
#play-range {
    margin: 2.5%;
    width: 70%;
}
#play-output {
    font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
</style>

<script src="//cloud.highcharts.com/resources/js/highstock-cloud.js"></script>
<!--Optional--><script src="//code.highcharts.com/modules/exporting.js"></script>
<!--Optional--><script src="//highcharts.github.io/export-csv/export-csv.js"></script>
<script src="https://rawgit.com/larsac07/Motion-Highcharts-Plugin/master/motion.js"></script>
<div id='highcharts-erohuna'><script src='//cloud.highcharts.com/inject/erohuna' defer='defer'></script></div>

Working example (site expires in 14 days from now): https://lars-cabrera.squarespace.com/test

TorsteinHonsi / Motion-Highcharts-Plugin

Support for embedded Highcharts Cloud charts. #9