CODEWITHSUNDEEP
javascripthighcharts
Rodolfo Oliveira
Rodolfo Oliveira

Reputation: 235

Conditional in categories and series

Chart code:

        <script type="text/javascript">
$(function () {
$("#formulario").submit(function() {
    var cidade = $("#cidade").val();
    var cidade_nome = $( "#cidade option:selected" ).text();
    var mans_00 = $('#mans_00:checked').val();
    var mans_05 = $('#mans_05:checked').val();
    var mans_10 = $('#mans_10:checked').val();
    var registro;
    var param_1;
    console.log(cidade);
    $.post('envia.php', {cidade: cidade}, function(resposta) {
    resposta = JSON.parse(resposta);

      for(var i=0; i<resposta.length; i++) {
             registro = resposta[i];
            console.log(registro.man_ins_prod_05);
        }   
    $('#container2').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [

                if(mans_00==mans_ins_area_00)
                {'2000',}
                '2005',
                '2010'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Mandioca (ton)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} ton</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: cidade_nome,
            data: [Number(registro.man_ins_prod_00), Number(registro.man_ins_prod_05), Number(registro.man_ins_prod_10)]

        }]
        });
});
    });
});
        </script>

My problem is do: if the checkbox mans_00 is checked then put '2000' in categories.I tryed in this form: PS:mans_00 contain mans_ins_area_00

if(mans_00==mans_ins_area_00) {'2000',} '2005', '2010'

This code don't work

Upvotes: 0

Views: 146

Answers (1)

Hristo Ivanov
Hristo Ivanov

Reputation: 719

I think this is what you need.
http://jsfiddle.net/jzkvzo3z/3/

You will need a handler $('#myform :checkbox').click(function(){. Every time the checkbox is checked/unchecked this function will be called. Inside this handler goes all the needed logic. You can change the categories and all the data associated to those categories like this.

chart.xAxis[0].setCategories(categories);
chart.series[0].setData(john_data);

Edit

Hah, I forgot to explain what you was doing wrong. To build a chart you invoke the function: $('#container2').highcharts({. The function takes one argument which is a data structure. The data structure describes the chart you want to build. Data structures look like this.

var data_structure = {
     descriptor1 : value, //Value may be Integer, String ....
     descriptor2 : value, 
     descriptor3 : function () {....code.......},  //A descriptors value can be a function too.
     descriptor4 : [2,4,5,6],  //Array
     ..............................
}

You can not place code inside a structure.

Upvotes: 1

Related Questions