WinJS - Highcharts isn't loaded in Google Chrome

Question

Good morning,

I'm working on small dashboard and using WinJS, but I have problem with Highcharts. They can't load inside WinJS.UI.HubSection and only in google chrome. I tried firefox and there is showed. I have second graph where I'm using Highstock and then works fine everywhere. I tried almost everything and don't know why the highchart isn't loaded inside HubSection. Thanks for your answers and help.

RainbowShaggy

Answer 1

You are trying to create a chart in div #vehicles, but jQuery (in your demo) nor Highcharts (I tested) are able to find that container.

It seems that when Highstock chart is created all divs are available, so if you will be creating all charts in createChart function, then they should be created successfully.

Example: https://jsfiddle.net/r6twbj0z/6/

var clientsArray = [];
stationsArray = [];
companiesArray = [];

WinJS.Namespace.define("ListView.Clients", {
  data: new WinJS.Binding.List(clientsArray)
});

WinJS.Namespace.define("ListView.Stations", {
  data: new WinJS.Binding.List(stationsArray)
});

WinJS.Namespace.define("ListView.Companies", {
  data: new WinJS.Binding.List(companiesArray)
});

WinJS.UI.processAll();

$(function() {

  var seriesOptions = [],
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'];

  /**
   * Create the chart when all data is loaded
   * @returns {undefined}
   */
  function createChart() {

    $('#companyvalue').highcharts('StockChart', {

      /*chart : {
          events : {
              load : function () {

                  // set up the updating of the chart each second
                  var series = this.series[0];
                  setInterval(function () {
                      var x = (new Date()).getTime(), // current time
                          y = Math.round(Math.random() * 100);
                      series.addPoint([x, y], true, false);
                  }, 1000);
              }
          }
      },*/

      rangeSelector: {
        selected: 4
      },

      yAxis: {
        labels: {
          formatter: function() {
            return (this.value > 0 ? ' + ' : '') + this.value + '%';
          }
        },
        plotLines: [{
          value: 0,
          width: 2,
          color: 'silver'
        }]
      },

      plotOptions: {
        series: {
          compare: 'percent'
        }
      },

      tooltip: {
        pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
        valueDecimals: 2
      },

      series: seriesOptions
    });

    $('#vehicles').highcharts({
      chart: {
        type: 'column'
      },
      title: {
        text: 'Použité vozidla'
      },
      xAxis: {
        categories: ['Vlaky', 'Autobusy', 'Nákl. auta', 'Lodě', 'Letadla']
      },
      yAxis: {
        min: 0,
        title: {
          text: 'Počet vozidel'
        },
        stackLabels: {
          enabled: true,
          style: {
            fontWeight: 'bold',
            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
          }
        }
      },
      legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: 25,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        borderWidth: 1,
        shadow: false
      },
      tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
      },
      plotOptions: {
        column: {
          stacking: 'normal',
          dataLabels: {
            enabled: true,
            color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
            style: {
              textShadow: '0 0 3px black'
            }
          }
        }
      },
      series: [{
        name: 'John',
        data: [5, 3, 4, 7, 2]
      }, {
        name: 'Jane',
        data: [2, 2, 3, 2, 1]
      }, {
        name: 'Joe',
        data: [3, 4, 4, 2, 5]
      }]
    });
  }

  $.each(names, function(i, name) {

    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {

      seriesOptions[i] = {
        name: name,
        data: data
      };

      // As we're loading the data asynchronously, we don't know what order it will arrive. So
      // we keep a counter and create the chart when all the data is loaded.
      seriesCounter += 1;

      if (seriesCounter === names.length) {
        createChart();
      }
    });
  });
});