Visualize table on tooltip with amCharts

问题

I'm novice on JavaScript, but really amazed by amCharts.

So, I ask here, after search a lot on internet: is it possible (or someone can tell me how) make a table as a tooltip on a amCharts graph?

I mean: I have a trend graph, based on "date", if I click on a date of a day, view a popup with a table of the details of the day's data.

回答1:

Searching and try a lot of code, and I reach a possible solution. So, considering that there aren't similar questions here or developed like I ask, I post my solution to share it.

You can try clicking "RUN": When you clicking on a point of graph, an HTML Table was displayed filled by data (fake value in this example).

THIS IS THE SNIPPET:

function createTable(){
    var table = "<table>";

    table += "<thead>";
       table += "<tr>";
            table +="<th> Dealer </th>";
    		table +="<th> Percent </th>";
            table +="<th> Proportional </th>";
        table +="</tr>";
    table +="</thead>";
    table +="<tbody>";
    for(var i=0;i<200;i++){
            table += "<tr>";
            table +="<td> New York </td>";
    		table +="<td> "+Math.random();+" </td>";
            table +="<td> "+Math.random();+" </td>";
            table +="</tr>";
    };
	
    table += "</tbody>";
    table += "</table>";

    return table;
};

var chartData = [{
    date: new Date(2012, 0, 1),
    distance: 227,
    duration: 408},
{
    date: new Date(2012, 0, 2),
    distance: 371,
    duration: 482},
{
    date: new Date(2012, 0, 3),
    distance: 433,
    duration: 562},
{
    date: new Date(2012, 0, 4),
    distance: 345,
    duration: 379},
{
    date: new Date(2012, 0, 5),
    distance: 480,
    duration: 501},
{
    date: new Date(2012, 0, 6),
    distance: 386,
    duration: 443},
{
    date: new Date(2012, 0, 7),
    distance: 348,
    duration: 405},
{
    date: new Date(2012, 0, 8),
    distance: 238,
    duration: 309},
{
    date: new Date(2012, 0, 9),
    distance: 218,
    duration: 287},
{
    date: new Date(2012, 0, 10),
    distance: 349,
    duration: 485},
{
    date: new Date(2012, 0, 11),
    distance: 603,
    duration: 890},
{
    date: new Date(2012, 0, 12),
    distance: 534,
    duration: 810}];
var chart;

AmCharts.ready(function() {
    
    // SERIAL CHART
    chart = new AmCharts.AmSerialChart();
    chart.dataProvider = chartData;
    chart.categoryField = "date";
    chart.marginTop = 0;
    chart.autoMarginOffset = 5;
    chart.balloon.showBullet = false;

    // AXES
    // category axis
    var categoryAxis = chart.categoryAxis;
    categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
    categoryAxis.minPeriod = "DD"; // our data is daily, so we set minPeriod to DD                
    categoryAxis.autoGridCount = false;
    categoryAxis.gridCount = 50;
    categoryAxis.gridAlpha = 0;
    categoryAxis.gridColor = "#000000";
    categoryAxis.axisColor = "#555555";
    // we want custom date formatting, so we change it in next line
    categoryAxis.dateFormats = [{
        period: 'DD',
        format: 'DD'},
    {
        period: 'WW',
        format: 'MMM DD'},
    {
        period: 'MM',
        format: 'MMM'},
    {
        period: 'YYYY',
        format: 'YYYY'}];

    // as we have data of different units, we create two different value axes
    // Duration value axis            
    var durationAxis = new AmCharts.ValueAxis();
    durationAxis.title = "duration";
    durationAxis.gridAlpha = 0.05;
    durationAxis.axisAlpha = 0;
    durationAxis.inside = true;
    // the following line makes this value axis to convert values to duration
    // it tells the axis what duration unit it should use. mm - minute, hh - hour...                
    durationAxis.duration = "mm";
    durationAxis.durationUnits = {
        DD: "d. ",
        hh: "h ",
        mm: "min",
        ss: ""
    };
    chart.addValueAxis(durationAxis);

    // Distance value axis 
    var distanceAxis = new AmCharts.ValueAxis();
    distanceAxis.title = "distance";
    distanceAxis.gridAlpha = 0;
    distanceAxis.position = "right";
    distanceAxis.inside = true;
    distanceAxis.unit = "mi";
    distanceAxis.axisAlpha = 0;
    chart.addValueAxis(distanceAxis);

    // GRAPHS
    // duration graph
    var durationGraph = new AmCharts.AmGraph();
    durationGraph.title = "duration";
    durationGraph.valueField = "duration";
    durationGraph.type = "line";
    durationGraph.valueAxis = durationAxis; // indicate which axis should be used
    durationGraph.lineColor = "#CC0000";
    durationGraph.balloonText = "[[value]]";
    durationGraph.lineThickness = 1;
    durationGraph.legendValueText = "[[value]]";
    durationGraph.bullet = "square";
    chart.addGraph(durationGraph);

     // CURSOR                
    var chartCursor = new AmCharts.ChartCursor();
    chartCursor.zoomable = false;
    chartCursor.categoryBalloonDateFormat = "DD";
    chartCursor.cursorAlpha = 0;
    chart.addChartCursor(chartCursor);

    // LEGEND
    var legend = new AmCharts.AmLegend();
    legend.bulletType = "round";
    legend.equalWidths = false;
    legend.valueWidth = 120;
    legend.color = "#000000";
    chart.addLegend(legend);
    
    // SET UP CLICK EVENTS
    
    // create prerequisite properties
    AmCharts.clickTimeout = 0;             // this will hold setTimeout reference
    AmCharts.lastClick = 0;                // last click timestamp
    AmCharts.doubleClickDuration = 300;    // distance between clicks in ms - if it's less than that - it's a doubleckick
    
    // let's define functions to actually do something on clicks/doubleclicks
    // you will want to replace the insides of these with your own code
    AmCharts.doSingleClick = function (event) {        
        //var div = document.getElementById("databody");
       var table=createTable();
       document.getElementById("databody").innerHTML=table;
      //div.innerHTML = "Ciao<br />" + div.innerHTML;
    }
    
    /*AmCharts.doDoubleClick = function (event) {
        var div = document.getElementById("events");
        div.innerHTML = "Double Click<br />" + div.innerHTML;
    }*/
    
    // create click handler
    AmCharts.myClickHandler = function (event) {
        var ts = (new Date()).getTime();
        if ((ts - AmCharts.lastClick) < AmCharts.doubleClickDuration) {
            // it's double click!
            // let's clear the timeout so the "click" event does not fire
            if (AmCharts.clickTimeout) {
                clearTimeout(AmCharts.clickTimeout);
            }
            
            // reset last click
            AmCharts.lastClick = 0;
            
            // now let's do whatever we want to do on double-click
            AmCharts.doDoubleClick(event);
        }
        else {
            // single click!
            // let's delay it to see if a second click will come through
            AmCharts.clickTimeout = setTimeout(function () {
                // let's do whatever we want to do on single click
                AmCharts.doSingleClick(event);
            }, AmCharts.doubleClickDuration);
        }
        AmCharts.lastClick = ts;
    }
    
    // add handler to the chart
    chart.addListener("clickGraphItem", AmCharts.myClickHandler);

    // WRITE                                
    chart.write("chartdiv");
});

body {
    font-family: Verdana;
    font-size: 12px;
    padding: 10px;
}
#databody, #databody th, #databody td {
    border: 1px solid #ccc;
    padding: 10px;
}
#databody th {
    font-weight: bold;
    background-color: #eee;
}

div.box{
    width:360px !important;  width /**/:200px;
    height:190px !important; height /**/: 200px;
    padding: 4px;
    border:1px solid #EEE; border-right:0 solid;
    background:url(gradient.png) repeat-x fixed top left;
    overflow:auto
    }
}

<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<div id="chartdiv" style="height: 362px;"></div>
<div class="box" id="databody">
</div>

来源：https://stackoverflow.com/questions/33940803/visualize-table-on-tooltip-with-amcharts

标签

javascript

jquery

amcharts