1

Really Hope you can help! I am using AMCharts and Ive added some data through a simple php function (pulled from database) I've added some upper and lower limits, using the below function

  // HORIZONTAL GREEN RANGE
        var guide = new AmCharts.Guide();
        guide.value =11.00;
        guide.toValue = 11.80;
        guide.fillColor = "#00CC00";
        guide.inside = true;
        guide.fillAlpha = 0.2;
        guide.lineAlpha = 0;
        valueAxis.addGuide(guide);

        var guideRED = new AmCharts.Guide();
        guideRED.value = 11.80;
        guideRED.toValue = 11.90;
        guideRED.fillColor = "orange";
        guideRED.inside = true;
        guideRED.fillAlpha = 0.2;
        guideRED.lineAlpha = 0;
        valueAxis.addGuide(guideRED);

        var guideblue = new AmCharts.Guide();
        guideblue.value = 11.00;
        guideblue.toValue = 10.90;
        guideblue.fillColor = "orange";
        guideblue.inside = true;
        guideblue.fillAlpha = 0.2;
        guideblue.lineAlpha = 0;
        valueAxis.addGuide(guideblue);

but I need to set the display range on the Y (top to bottom???) to 11.90 and 10.50 respectivly so the operator can see the plotted line, and its relationship to the red and orange zones. At present the graph simply renders the chart to +1 the max and min it has in value form.

Here is the graph functions

AmCharts.ready(function () {
        // SERIAL CHART
        chart = new AmCharts.AmSerialChart();

        chart.dataProvider = chartData;
        chart.dataDateFormat = "DD-MM-YY";
        chart.categoryField = "date";

        // 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.gridAlpha = 0.1;
        categoryAxis.minorGridAlpha = 0.1;
        categoryAxis.axisAlpha = 0;
        categoryAxis.minorGridEnabled = true;
        categoryAxis.inside = true;


        // value
        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.tickLength = 4;
        valueAxis.axisAlpha = 0;
        valueAxis.showFirstLabel = false;
        valueAxis.showLastLabel = false;
        valueAxis.autoGridCount = true;
        valueAxis.gridCount = 500;

        chart.addValueAxis(valueAxis);

        // GRAPH
        var graph = new AmCharts.AmGraph();
        graph.dashLength = 2;
        graph.lineColor = "#00CC00";
        graph.valueField = "value";
        graph.dashLength = 3;
        graph.bullet = "round";
        graph.balloonText = "[[category]]<br><b><span style=\'font-size:14px;\'>value:[[value]]</span></b>";


        chart.addGraph(graph);

(this is all within a tag hence the escape char's

Many thanks.

3
  • Please consider using the JSON style to initialize your chart. It's far better write- and readable. related
    – gerric
    Aug 28, 2015 at 7:00
  • To your question: You're basically searching a way to set the range of your valueAxis? Is it important to have the 11.90 and 10.50 range, or would you be ok with 12 and 10? (First one would need some changes in the amcharts source file i guess)
    – gerric
    Aug 28, 2015 at 7:05
  • Take a look at this fiddle please.
    – gerric
    Aug 28, 2015 at 7:20

1 Answer 1

4

To force the value axis to particular scale, first set it's minimum and maximum properties. The chart will still try to use whole numbers. To disable that set strictMinMax.

I.e.:

var valueAxis = new AmCharts.ValueAxis();
valueAxis.minimum = 10.5;
valueAxis.maximum = 11.90;
valueAxis.strictMinMax = true;
1
  • Thank you all for your help I will try this in work on monday
    – Seth Void
    Aug 29, 2015 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.