amCharts support forum

abuserpl · #1 2012-07-04 05:46:56

Hi,
Could you tell me how to remove value axis from chart?
I tried to set

Code:

chart.valueAxesSettings = undefined;
                chart.valueAxis = undefined;

but it doesen't works;

I am adding 5 charts (values of points are constant), and I need to remove from them value axis because it looks bad:

My code:

Code:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amStock Example</title>
        <link rel="stylesheet" href="../amcharts/style.css"
        type="text/css">
        <script src="../amcharts/amstock.js" type="text/javascript"></script>
        <script type="text/javascript">
            var chart;

            var chartData = [];
            
            AmCharts.ready(function () {
                generateChartData();
                
                createStockChart(1);
                createStockChart(2);
                createStockChart(3);
                createStockChart(4);
                createStockChart(5);
                
            });
            
            function generateChartData(){
            
                var firstDate = new Date();
                firstDate.setHours(0, 0, 0, 0);
                firstDate.setDate(firstDate.getDate() - 2000);

                for (var i = 0; i < 100; i++) {
                    var newDate = new Date(firstDate);

                    newDate.setDate(newDate.getDate() + i);
                    
                    var color = '';
                    if((i % 2) == 0){
                         color = "#F8FF01";
                    }
                    else{
                         color = "#FF6600";
                    }
                    chartData.push({
                        date: newDate,
                        value: 4,    
                        color: color
                    });
                }
            }
           

           function createStockChart(divNo) {

                chart = new AmCharts.AmSerialChart();
                chart.dataProvider = chartData;
                //chart.categoryField = "date";

                chart.valueAxesSettings = undefined;
                chart.valueAxis = undefined;
                
                var graph = new AmCharts.AmGraph();
                graph.valueField = "value";
                graph.colorField = "color";                
                graph.type = "column";
                graph.lineAlpha = 0;
                graph.showBalloon = false;
                
                graph.fillAlphas = 1;
                chart.addGraph(graph);

                // WRITE
                chart.write("chartdiv" + divNo);
            }
        </script>
        
    </head>
    <body style="background-color:#FFFFFF">        
        <div id="chartdiv1" style="width: 100%; height: 75px;"></div>
        <div id="chartdiv2" style="width: 100%; height: 75px; margin-top: -50px;"></div>
        <div id="chartdiv3" style="width: 100%; height: 75px; margin-top: -50px;"></div>
        <div id="chartdiv4" style="width: 100%; height: 75px; margin-top: -50px;"></div>
        <div id="chartdiv5" style="width: 100%; height: 75px; margin-top: -50px;"></div>
    </body>

</html>

Second issue is how to set colorField for volume panel:

Code:

Code:

<!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>amStock Example</title>
        <link rel="stylesheet" href="../amcharts/style.css"
        type="text/css">
        <script src="../amcharts/amstock.js" type="text/javascript"></script>
        <script type="text/javascript">
            AmCharts.ready(function () {
                generateChartData();
                createStockChart();
            });

            var chartData1 = [];
            var chartData2 = [];
            var chartData3 = [];
            var chartData4 = [];

            function generateChartData() {
                var firstDate = new Date();
                firstDate.setDate(firstDate.getDate() - 500)
                firstDate.setHours(0, 0, 0, 0);

                for (var i = 0; i < 500; i++) {
                    var newDate = new Date(firstDate);
                    newDate.setDate(newDate.getDate() + i);

                    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
                    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

                    var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

                    var a3 = Math.round(Math.random() * (100 + i)) + 200;
                    var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

                    var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
                    var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;

                    var color = '';
                    if((i % 2) == 0){
                         color = "#F8FF01";
                    }
                    else{
                         color = "#FF6600";
                    }
                    
                    chartData1.push({
                        date: newDate,
                        value: a1,
                        volume: 5,
                        color: color
                    });
                    chartData2.push({
                        date: newDate,
                        value: a2,
                        volume: 5,
                        color: color
                    });
                    chartData3.push({
                        date: newDate,
                        value: a3,
                        volume: 5,
                        color: color
                    });
                    chartData4.push({
                        date: newDate,
                        value: a4,
                        volume: 5,
                        color: color
                    });
                }
            }

            function createStockChart() {
                var chart = new AmCharts.AmStockChart();
                chart.pathToImages = "../amcharts/images/";

                // DATASETS //////////////////////////////////////////
                // create data sets first
                var dataSet1 = new AmCharts.DataSet();
                dataSet1.title = "first data set";
                dataSet1.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"
                }];
                dataSet1.dataProvider = chartData1;
                dataSet1.categoryField = "date";

                var dataSet2 = new AmCharts.DataSet();
                dataSet2.title = "second data set";
                dataSet2.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"                
                }];
                dataSet2.dataProvider = chartData2;
                dataSet2.categoryField = "date";

                var dataSet3 = new AmCharts.DataSet();
                dataSet3.title = "third data set";
                dataSet3.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"                
                }];
                dataSet3.dataProvider = chartData3;
                dataSet3.categoryField = "date";

                var dataSet4 = new AmCharts.DataSet();
                dataSet4.title = "fourth data set";
                dataSet4.fieldMappings = [{
                    fromField: "value",
                    toField: "value"
                }, {
                    fromField: "volume",
                    toField: "volume"                
                }];
                dataSet4.dataProvider = chartData4;
                dataSet4.categoryField = "date";

                // set data sets to the chart
                chart.dataSets = [dataSet1, dataSet2, dataSet3, dataSet4];

                // PANELS ///////////////////////////////////////////                                                  
                // first stock panel
                var stockPanel1 = new AmCharts.StockPanel();
                stockPanel1.showCategoryAxis = true;
                stockPanel1.title = "Value";
                stockPanel1.percentHeight = 70;

                // graph of first stock panel
                var graph1 = new AmCharts.StockGraph();
                graph1.valueField = "value";
                graph1.showBalloon = true;        
                graph1.compareField = "value";
                stockPanel1.addStockGraph(graph1);

                // create stock legend                
                stockPanel1.stockLegend = new AmCharts.StockLegend();

                // second stock panel
                var stockPanel2 = new AmCharts.StockPanel();                
                stockPanel2.percentHeight = 5;
                stockPanel2.showCategoryAxis = false;
                var graph2 = new AmCharts.StockGraph();
                graph2.valueField = "volume";
                graph2.type = "column";
                graph2.colorField = "color";
                graph2.showBalloon = false;                
                graph2.fillAlphas = 1;                
                stockPanel2.addStockGraph(graph2);
                
                
                // second stock panel
                var stockPanel3 = new AmCharts.StockPanel();                
                stockPanel3.percentHeight = 5;
                stockPanel3.showCategoryAxis = false;
                var graph3 = new AmCharts.StockGraph();
                graph3.valueField = "volume";
                graph3.type = "column";
                graph3.showBalloon = false;        
                                graph3.colorField = "color";        
                graph3.fillAlphas = 1;
                stockPanel3.addStockGraph(graph3);
                

                // set panels to the chart
                chart.panels = [stockPanel1, stockPanel2, stockPanel3];

                chart.write('chartdiv');
            }
        </script>
    </head>
    <body style="background-color:#FFFFFF">
        <div id="chartdiv" style="width:100%; height:600px;"></div>
    </body>

ChartData contains object with field color, and I am setting colorField property like in my first code sample in this thread, but color doesen't changed.

Thanks for your help

Last edited by abuserpl (2012-07-04 06:25:19)

martynasma · #2 2012-07-04 06:25:21

Try this:

Code:

chart.valueAxesSettings.labelsEnabled = false;
chart.valueAxesSettings.axisAlpha = 0;

abuserpl · #3 2012-07-04 06:30:46

ok, thanks.
your solution works with second case but with first not (Uncaught TypeError: Cannot set property 'labelsEnabled' of undefined).
in second code sample your code remove value axis from all panels.
I didn't write it before, but I need to remove value axis in second chart too, but only from panels which are contains volume columns graphs, but in panel which contains line chart value axis is necessary.
Could you tell me how set colors to volume graphs in second sample?

Last edited by abuserpl (2012-07-04 07:37:06)

martynasma · #4 2012-07-05 06:34:56

If you want to remove it for particular panel just set the same properties directly to panel object's value axis. I.e.:

Code:

var valueAxis2 = new AmCharts.ValueAxis();
valueAxis2.labelsEnabled = false;
valueAxis2.axisAlpha = 0;
stockPanel2.addValueAxis(valueAxis2);

abuserpl · #5 2012-07-05 08:04:29

thanks.
Could you tell me how to disable this lines:

Code:

Code:

<script type="text/javascript">
    
            var chart;
            var chartData = [];
            
            AmCharts.ready(function () {
            
               createData();
               createChart();
            });
                        
            function createData(){
            
                var firstDate = new Date();
                firstDate.setHours(0, 0, 0, 0);
                firstDate.setDate(firstDate.getDate() - 365);
                        
                for (var i = 0; i < 100; i++) {
                    var newDate = new Date(firstDate);
                        newDate.setDate(newDate.getDate() + i);
                    
                    var color = '';
                    var size = 20;
                    if((i % 2) == 0){
                         color = "#F8FF01";                         
                    }
                    else{
                         color = "#FF6600";
                    }
                    chartData.push({
                        y: 1,
                        date: newDate,                        
                        color: color,
                        size: size
                    });
                    chartData.push({
                        y: 6.5,
                        date: newDate,
                        color: color,
                        size: size
                    });
                    chartData.push({
                        y: 12.2,
                        date: newDate,
                        color: color,
                        size: size
                    });
                }                
                
            }
            
            function createChart(){

                chart = new AmCharts.AmSerialChart();
                chart.pathToImages = "/lib/samples/javascript/images/";
                chart.panEventsEnabled = true;
                chart.dataProvider = chartData;
                
                chart.categoryField = "date";                
                chart.categoryAxis.parseDates = true;
                
                var yAxis = new AmCharts.ValueAxis();
                yAxis.position = "left";
                yAxis.gridAlpha = 0.0;
                yAxis.autoGridCount = false;                
                yAxis.minimum = -5;
                yAxis.maximum = 20;
                yAxis.integersOnly = true;
                yAxis.labelsEnabled = false;
                yAxis.axisAlpha = 0.0;
                yAxis.gridThickness = 0.0;
                yAxis.fillAlpha = 0.0;                
                chart.addValueAxis(yAxis);

                var graph = new AmCharts.AmGraph();
                graph.valueField = "y";
                graph.xField = "date";
                graph.colorField = "color";
                graph.bulletBorderThickness = 1;
                graph.bulletBorderColor = "black";
                graph.lineAlpha = 0;
                graph.bulletSizeField = "size";                
                graph.showBalloon = true;
                graph.balloonText = "[[category]]";
                graph.bullet = "square";
                chart.addGraph(graph);

                chart.write("chartdiv");
            }
        </script>

I don't need them, other grid lines I have turned off, but I don't know how to disable them.

Last edited by abuserpl (2012-07-05 08:10:06)

Patrice · #6 2012-07-05 08:41:58

Hi,

You can set it to white color

Code:

chart.categoryAxis.gridColor ="#FFFFFF";

or without opacity

Code:

chart.categoryAxis.gridAlpha =0;

Last edited by Patrice (2012-07-05 10:14:18)

abuserpl · #7 2012-07-05 09:15:53

thanks,
I was looking at classes in documentation and have not noticed this option.
thanks a lot.

amCharts support forum

Announcement

JavaScript Charts: JavaScript Stock Chart

#1 2012-07-04 05:46:56

How to remove value axis from chart

Code:

Code:

Code:

#2 2012-07-04 06:25:21

Re: How to remove value axis from chart

Code:

#3 2012-07-04 06:30:46

Re: How to remove value axis from chart

#4 2012-07-05 06:34:56

Re: How to remove value axis from chart

Code:

#5 2012-07-05 08:04:29

Re: How to remove value axis from chart

Code:

#6 2012-07-05 08:41:58

Re: How to remove value axis from chart

Code:

Code:

#7 2012-07-05 09:15:53

Re: How to remove value axis from chart