score:2

Accepted answer

Img

Here modified_data is the data object containing additional data need for displaying exta information in tooltip

  var newseries;
  $.each(jsond, function(i, item) {
    var modified_data = [];

    $.each(item.data, function(j) {
      modified_data.push({
        y: item.data[j],
        android: item.android[j]
      })
    })

    newseries = {};
    newseries.name = item.name;
    newseries.data = modified_data;
    //newseries.android = item.android;
    options.series.push(newseries);
  });

Tooltip formatter

  formatter: function() {
    var s = '<b>' + Highcharts.dateFormat('%H:%M',
      new Date(this.x)) + '</b>';
    $.each(this.points, function() {
      //console.log(this)
      s += '<br/>' + this.series.name + ': ' +
        this.y + 'm' + '<br/>' + 'Android' + ': ' +
        this.point.android + 'm';
    });

    return s;
  },

Fiddle Snippet 

$(function() {
  var hour = 3600 * 1000;
  var options = {
    chart: {
      renderTo: 'container',
      type: 'line',
      options3d: {
        enabled: true,
        alpha: 0,
        beta: 0,
        depth: 0,
        viewDistance: 25
      }
    },
    title: {
      text: ''
    },
    subtitle: {
      text: ''
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },

    xAxis: {
      labels: {
        align: 'left',
        style: {
          color: '#423D3C',
          fontWeight: 'normal',
          fontFamily: 'Open Sans'
        }
      },
      showLastLabel: false,
      tickmarkPlacement: 'on',
      tickPosition: 'inside',
      tickWidth: 0,
      tickPixelInterval: 60,
      lineWidth: 2,
      lineColor: '#423D3C',
      maxPadding: 0,
      minPadding: 0,
      gridLineWidth: 0,
      offset: 0,
      startOnTick: true,
      type: 'datetime',
      dateTimeLabelFormats: {
        day: '%H:%M'
      },

      endOnTick: true
    },
    yAxis: {
      tickPositioner: function() {

        var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
        var halfMaxDeviation = Math.ceil(maxDeviation / 2);

        return [0, halfMaxDeviation, maxDeviation];
      },
      title: {
        text: "user"
      }
    },
    tooltip: {
      backgroundColor: '#1B1A1A',
      borderColor: '#1B1A1A',
      crosshairs: true,
      shadow: false,
      style: {
        color: 'white',
        fontSize: '12px',
        padding: '8px'
      },
      enabled: true,
      crosshairs: false,
      shared: false,
      snap: 30,
      formatter: function() {
        var s = '<b>' + Highcharts.dateFormat('%H:%M',
          new Date(this.x)) + '</b>';
        $.each(this.points, function() {
          //console.log(this)
          s += '<br/>' + this.series.name + ': ' +
            this.y + 'm' + '<br/>' + 'Android' + ': ' +
            this.point.android + 'm';
        });

        return s;
      },
      shared: true
    },
    plotOptions: {
      line: {
        //dashStyle: 'ShortDot',
        lineWidth: 2
      },
      series: {
        pointStart: 0 * hour,
        pointInterval: hour,
      },
      dataGrouping: {
        enabled: false
      },
      marker: {
        enabled: false,
        states: {
          hover: {
            enabled: true
          }
        },
        symbol: 'circle'
      },
    },
    series: [],
  };

  var jsond = [{
    "name": "Today",
    "data": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
      46, 0, 0, 0, 0, 0
    ],
    "android": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0,
      0, 0, 0, 0, 20, 21
    ]
  }, {
    "name": "Yesterday",
    "data": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
      48, 0, 38, 30
    ],
    "android": [17, 5, 27, 0, 28, 0, 27, 0, 25, 0, 27, 28, 26, 0, 0, 0, 60, 0,
      46, 0, 0, 0, 0, 0
    ]
  }, {
    "name": "Week_ago",
    "data": [0, 0, 13, 0, 14, 0, 8, 0, 12, 0, 20, 0, 22, 0, 17, 19, 0, 0, 0,
      0, 0, 0, 20, 21
    ],
    "android": [0, 0, 0, 0, 22, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 36,
      48, 0, 38, 30
    ]
  }]

  //$.getJSON('data.json', function(list) {
  var newseries;

  $.each(jsond, function(i, item) {
    var modified_data = [];

    $.each(item.data, function(j) {
      modified_data.push({
        y: item.data[j],
        android: item.android[j]
      })
    })



    newseries = {};
    newseries.name = item.name;
    newseries.data = modified_data;
    //newseries.android = item.android;
    options.series.push(newseries);
  });
  var chart = new Highcharts.Chart(options);

  //console.log(  options.series);
});
//});
/*
  
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>


<div id="container" style="width: 50%;min-width: 310px; height: 400px; margin: 0 auto"></div>

score:1

It is the problem with your data.json file. Check the highcharts documentation. Change your value in the formats mentioned in documentation. For eg:

[
      {
        "name":"Today",
        "data":[[17,0],[5,0], [27,13], [0,0], [28,14], [0,0], [27,8], [0,0], [25,12], [0,0], [27,20], [28,0], [26,22], [0,0], [0,17], [0,19], [60,0], [0,0], [46,0], [0,0], [0,0], [0,0], [0,20], [0,21]]
      }
 ]

and change the tooltip formatter function according to this.


Related Query

More Query from same tag