yakuzaaaa

/*
  A very inefficient but with best browser support way would be to check if the
  clientBoundingRect of the image is currently inside the viewport or not on every
  scroll event, damn! it's costly!
*/

/* 
  
 Let's say the images in HTML are:

yakuzaaaa

.shimmer-background {
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeHolderShimmer;
  animation-timing-function: linear;
  background: #f6f7f9;
  background-image: linear-gradient(to right, #f6f7f9 20%, #e9ebee 40%, #f6f7f9 60%, #f6f7f9 100%);
  background-repeat: no-repeat;

yakuzaaaa

base: {
	chart: {
		canvasBgColor: '#ffffff'
	}
	pie2d: {
		chart: {
			bgColor: '#FF0000'
		}
	},
	msline: {

yakuzaaaa

{
    "chart": {
        "caption": "Monthly revenue for last year",
        "subCaption": "Harry's SuperMart",
        "xAxisName": "Month",
        "yAxisName": "Revenue",
        "theme": "fusion"
    },
    "data": [
        {

yakuzaaaa

// Base definition
function getTheme(options) {
    return {
      "name": "custom",
      "theme": {
        "base": {
          "chart": {
            "showlegend": "1" 
          },
          "dataset": [{

yakuzaaaa

var themeObject = {
  name: 'custom',
  theme: {
    base: {
      chart: {
        showlegend: '1' 
      },
      dataset: [{
          data: [{
            color: '#ff0000'

yakuzaaaa

<!-- First include the theme of our choice -->
<script src="../path/to/fusioncharts.theme.fusion.js"></script>

<script>
  // before rendering a chart
  FusionCharts.options.defaultTheme = 'fusion';
</script>

yakuzaaaa

"dataSource": {
    "chart": {
        "showLegend": "1"
    },
    "dataset": [{
        "seriesname": "2006",
        "data": [
          {
            "value": "27400",
            "color": '#004D40',

yakuzaaaa

base: {
    chart: {
        canvasBgColor: '#ffffff'
    }
    dataset: [{
        data: function (index, data) {
                var colorHex = data.value > 30000 ? '#0000ff' : '#ffff00';
          return {
            color: colorHex
          };

yakuzaaaa

const image = document.getElementById('lazy-image');
image.src = image.dataset.src;