24 May, 2013

Custom Label For ValueAxis and CategoryAxis : amChart

Use below code to generate custom label for valueaxis :
Here we uses line chart



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title>
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../amcharts/amcharts.js" type="text/javascript"></script>       
        <script type="text/javascript">
            var lineChartData = [
    {
        "monthDesc": "NOV 2012",
        "terms": 30.68
    },
    {
        "monthDesc": "DEC 2012",
        "terms": 29.35,
        "segment": "Premier Corporation"
    },
    {
        "monthDesc": "JAN 2013",
        "terms": 25.46,
        "segment": "Premier Corporation"
    },
    {
        "monthDesc": "FEB 2013",
        "terms": 28.27,
        "segment": "Premier Corporation"
    },
    {
        "monthDesc": "MAR 2013",
        "terms": 33.93,
        "segment": "Premier Corporation"
    },
    {
        "monthDesc": "APR 2013",
        "terms": 13.95,
        "segment": "Premier Corporation"
    }
]

            AmCharts.ready(function () {
                var chart = new AmCharts.AmSerialChart();
                chart.dataProvider = lineChartData;
                chart.pathToImages = "../amcharts/images/";
                chart.categoryField = "monthDesc";
               
                chart.addTitle("Top Telent Turnover", 10, "grey", "alpha", "bold")


                // sometimes we need to set margins manually
                // autoMargins should be set to false in order chart to use custom margin values
               
                //chart.autoMargins = false;
                chart.marginRight = 0;
                chart.marginLeft = 0;
                chart.marginBottom = 0;
                chart.marginTop = 0;

               
                // AXES
                // category               
                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.inside = true;
                categoryAxis.gridAlpha = 0;
                categoryAxis.tickLength = 0;
                //categoryAxis.axisAlpha = 0;
                categoryAxis.labelRotation = 45;
                //categoryAxis.startOnAxis = true;

                // value
                var valueAxis = new AmCharts.ValueAxis();

                //valueAxis.axisAlpha = 0;
                //valueAxis.inside = true;
                valueAxis.minimum = 0;
                valueAxis.maximum = 100;
                valueAxis.autoGridCount = false;
                valueAxis.gridCount = 10;
               
                valueAxis.tickLength = 0;
                valueAxis.dashLength = 2;

                function formatLabel(value, valueString, axis){
                  // let's say we dont' want minus sign next to negative numbers
                  if(value < 0) {
                    valueString = valueString.substr(1);
                  }
                 
                  // and we also want a letter % to be added next to all labels (you can do it with unit, but anyway)
                  valueString = valueString + "%";
                  return valueString;
                }
                valueAxis.labelFunction = formatLabel;

               
                chart.addValueAxis(valueAxis);

               
                // GRAPH
                var graph = new AmCharts.AmGraph();
                graph.title = "Premier Corporation";
                graph.type = "line";
                graph.valueField = "terms";
                graph.lineColor = "blue";
                //graph.bullet = "bubble";
                graph.customBullet = "images/bullet-point.png"; // bullet for all data points
                graph.bulletSize = 7; // bullet image should be a rectangle (width = height)
               // graph.customBulletField = "customBullet"; // this will make the graph to display custom bullet (red star)
                chart.addGraph(graph);


                 // LEGEND
                var legend = new AmCharts.AmLegend();
                legend.position = "bottom";
                legend.markerType = "bubble";
                legend.markerSize = 7;

                //legend.borderAlpha = 0.3;
                legend.horizontalGap = 10;
                //legend.switchType = "v";
                chart.addLegend(legend);

                // CURSOR
                //var chartCursor = new AmCharts.ChartCursor();
                //chart.addChartCursor(chartCursor);

                // WRITE
                chart.write("chartdiv");
            });
        </script>
    </head>
   
    <body>
       
        <div id="chartdiv" style="width:30%; height:400px;border:1px solid grey;border-radius:10px;padding:15px;"></div>
       
    </body>

</html>

Popular Posts

Featured Post

Liferay 7.3 compatibility matrix

Compatibility Matrix Liferay's general policy is to test Liferay Portal CE against newer major releases of operating systems, open s...