Display date in x Axis value using amCharts

Question

I've a AmSerialChart with three AmGraph on whcih I've formatted the balloonText like this:

grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";

The problem with the category (x value) is that is also displayed in the balloonText with the following format: "MMM DD, YYYY". How can I display this date in another way?

I've checked dateFormats in the categoryaxis and dataDateFormat but that only changes the bottom value.

Here's the full code so far:

   <script src="amcharts/amcharts.js" type="text/javascript"></script>
    <script src="amcharts/serial.js" type="text/javascript"></script>

    <script type="text/javascript">
        var chart;
        var chartData = <% properties.get("jsonData") %>;
        var chartTitles = <% properties.get("jsonTitles") %>;

        AmCharts.ready(function () {

            // SERIAL CHART
            chart = new AmCharts.AmSerialChart();
            chart.pathToImages = "amcharts/images/";
            chart.dataProvider = chartData;
            chart.categoryField = "date";
            chart.dataDateFormat = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];




            // listen for "dataUpdated" event (fired when chart is inited) and call zoomChart method when it happens
//               chart.addListener("dataUpdated", zoomChart);

            // AXES
            // category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.parseDates = true; // as our data is date-based, we set parseDates to true
            categoryAxis.minPeriod = "ss";
            categoryAxis.minorGridEnabled = true;
            categoryAxis.axisColor = "#DADADA";
//            categoryAxis.dateFormats = [{period:'fff',format:'JJ:NN:SS'},{period:'ss',format:'JJ:NN:SS'},{period:'mm',format:'JJ:NN:SS'},{period:'hh',format:'JJ:NN:SS'},{period:'DD',format:'JJ:NN:SS'},{period:'WW',format:'JJ:NN:SS'},{period:'MM',format:'JJ:NN:SS'},{period:'YYYY',format:'JJ:NN:SS'}];

            var vAxis = new AmCharts.ValueAxis();
            chart.addValueAxis(vAxis);

            for (var i = 0; i < chartTitles.length; i++) {
                var grp = new AmCharts.AmGraph();
                grp.valueField = "d"+i;
                grp.title = chartTitles[i];
                grp.type = "line";
                grp.valueAxis = vAxis; // indicate which axis should be used 
                grp.lineThickness = 1;
                grp.bullet = "round";
                grp.labelPosition = "right";
                grp.balloonText = "<small><b>Date: [[category]]</b></small><br>[[value]]";
                grp.balloonText = "[[value]], [[description]], [[percents]], [[open]], [[total]], [[category]]";
                grp.showBalloon = true;
                grp.bulletSize = 1;
                grp.bulletBorderThickness = 6;
                grp.dashLengthField = "dashLength";

                chart.addGraph(grp);
            }


            // SCROLLBAR
            var chartScrollbar = new AmCharts.ChartScrollbar();
            chart.addChartScrollbar(chartScrollbar);

            // LEGEND
            var legend = new AmCharts.AmLegend();
            legend.marginLeft = 180;
            legend.useGraphSettings = true;
            chart.addLegend(legend);

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




    </script>
    <div id="chartdiv" style="width: 100%; height: 360px;"></div>

Answer 1

Good questions, which helped me to find out that I have a missing property in the docs. In case you don't use ChartCursor, you should use chart.balloonDateFormat property to format the date.