CODEWITHSUNDEEP
javascriptjqueryamcharts
user7255640
user7255640

Reputation:

Amchart change dateformat of label

I'm using AmChart do display my chart with the information from my server.

If you run the code and scroll down and hover the chart it will display (Aug 01, 2012 OR Sep 01, 2012 OR Oct 01, 2012)

I'cant seem to find a way to change the value so it only display the month (Aug OR Sep OR Oct)

Does anyome know how to fix that?

var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginLeft": 60,
  "marginButtom": 70,
  "autoMarginOffset": 20,
  "dataDateFormat": "YYYY-MM",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "allLabels": [{
    "text": "Index / mio",
    "bold": true,
    "x": 20,
    "y": height,
    "rotation": "270"
  }, {
    "text": "Index / mio",
    "bold": true,
    "x": width / 1.2,
    "y": (height * 2) - 20
  }],
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
    },
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:10px;'>[[value]]</span>"
  }],
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "dataProvider": [{
    "date": "2012-08",
    "value": 13
  }, {
    "date": "2012-09",
    "value": 22
  }, {
    "date": "2012-10",
    "value": 23
  }]
});
#chartdiv {
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Upvotes: 0

Views: 858

Answers (1)

xorspark
xorspark

Reputation: 16012

You can modify the format string in the chartCursor's categoryBalloonDateFormat property to "MMM" instead of the default "MMM DD, YYYY".

  "chartCursor": {
    "categoryBalloonDateFormat": "MMM",
    // ...
  }

Updated demo below:

var height = $('#chartdiv').height() / 2;
var width = $('#chartdiv').width() / 2;

var chart = AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "theme": "light",
  "marginLeft": 60,
  "marginButtom": 70,
  "autoMarginOffset": 20,
  "dataDateFormat": "YYYY-MM",
  "valueAxes": [{
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  }],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "allLabels": [{
    "text": "Index / mio",
    "bold": true,
    "x": 20,
    "y": height,
    "rotation": "270"
  }, {
    "text": "Index / mio",
    "bold": true,
    "x": width / 1.2,
    "y": (height * 2) - 20
  }],
  "graphs": [{
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
    },
    "labelText": "[[category]]",
    "labelPosition": "bottom",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<span style='font-size:10px;'>[[value]]</span>"
  }],
  "chartCursor": {
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 1,
    "cursorColor": "#258cbb",
    "limitToGraph": "g1",
    "valueLineAlpha": 0.2,
    "categoryBalloonDateFormat": "MMM"
  },
  "categoryField": "date",
  "categoryAxis": {
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true
  },
  "dataProvider": [{
    "date": "2012-08",
    "value": 13
  }, {
    "date": "2012-09",
    "value": 22
  }, {
    "date": "2012-10",
    "value": 23
  }]
});
#chartdiv {
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

Upvotes: 1

Related Questions