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