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>

Rate Me:

0 Discussion:

Post a Comment

Your Comments on this post

Create Servlet Project as Module

You would have seen that many times we are writing out own servlet in Liferay portal to achieve some specific use case. In DXP, You can st...