Syncfusion JS Chart Custom Tooltip

Question

I'm using Syncfusion JS 12.1.0.43, trying to implement line chart with custom tooltip;

Here is my HTML;

<div id="div-overview-transaction-tooltip" style="display:none;">
  <div id="div-transaction-tooltip-value">
   <ul>
    <li>#point.totalValue#</li>
    <li>#point.dataSource.totalValue#</li>
    <li>{{:totalValue}}</li>
    <li>#series.dataSource.totalValue#</li>
   </ul>
  </div>
 </div>

Here is my example JSON;

{"TotalValue":0,"Percentage":0,"AverageResponseTime":0,"DateTime":"\/Date(1402056000000)\/"}

And here is my JS;

    $("#container").ejChart({
      primaryXAxis: { labelFormat: "HH:00" },
      primaryYAxis:
      {
        labelFormat: "{value}",
        rangePadding: 'round',
        range: { min: 0, max: 25, interval: 5 },
      },
      commonSeriesOptions: {
        type: 'line', animation: true,
        tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
        marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
        border: { width: 1 }
      },
      series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
      canResize: true,
      load: "loadTheme",
      size: { height: 300 },
      legend: { visible: true }
    });

Output:

          #point.TotalValue#
          #point.dataSource.TotalValue#
          {{:TotalValue}}
          #series.dataSource.TotalValue#

I want to show all of my property from JSON on custom tooltip. Except tooltip everything works fine.

Any help would be appriciated. Thanks already.

score 2 · Accepted Answer · answered Jun 11 '14 at 05:03

By default the Tool-tip template supports only point.x and point.y so there is no direct way to achieve this using Tool-tip template.

However the value "TotalValue" from JSON can be shown in the Tool-tip with the help of the following event "toolTipInitialize" as like in below code snippet.

$("#container").ejChart({
  primaryXAxis: { labelFormat: "HH:00" },
  primaryYAxis:
  {
    labelFormat: "{value}",
    rangePadding: 'round',
    range: { min: 0, max: 25, interval: 5 },
  },
  commonSeriesOptions: {
    type: 'line', animation: true,
    tooltip: { visible: true, template: 'div-overview-transaction-tooltip' },
    marker: { shape: 'circle', size: { height: 5, width: 5 }, visible: true },
    border: { width: 1 }
  },
  series: [{ name: 'GET', type: 'line', dataSource: { data: getJson, xName: "DateTime", yName: 'TotalValue' } }],
  canResize: true,
  load: "loadTheme",
  size: { height: 300 },
  toolTipInitialize:"rendertool"
  legend: { visible: true }
});

And in the method "rendertool"

function rendertool(sender) { 

sender.Data.currentText = "Total Value:"+sender.model.series[sender.Data.seriesIndex].dataSource.data[sender.Data.pointIndex].TotalValue.toString(); 

}

The sender of the event has the "model" properties of the chart where you can get the data source of the series and thus you can access any values in the JSON. Hope this works for you.

here is the sample link which I tried to achieve this.

Sample

Thanks

Syncfusion JS Chart Custom Tooltip

1 Answers1