使用amCharts可视化工具提示上的表格

Question

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.

Answer 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>