javascriptphpcodeignitergoogle-pie-chart

Pie Chart data is not updating when data is changed


I am trying to generate reports of my project. These reports are shown with help of pie charts. I am getting correct data in response but pie chart is not updating in first request. I have to send 2-3 request more then it updates the pie chart. My js code is here:

//Pie chart for product
            var dataLeadproduct = google.visualization.arrayToDataTable(pieproductdataLeadSummery);
            var productLeadoptions = {
                title: 'Top Product',
                pieHole: 0,
                pieSliceText: '',
                pieSliceBorderColor: '#00ffffff',
                colors: ['#FF772D', '#57c8f2', '#8175c7', '#ff6c60', '#A9D86E'],
                chartArea: {left: 20, top: 10, width: '100%', height: '75%'},
                is3D: false,
                reverseCategories: false,
                'tooltip.text': 'value'
            };
            var productLeadSummery = new google.visualization.PieChart(document.getElementById('leadsummeryproduct_piechart'));
            productLeadSummery.draw(dataLeadproduct, productLeadoptions);

CI's controller code:

//Product Pie Chart
                $leadProduct_query = 'SELECT COUNT(lead_product_id) AS lead_product_count, lead_product_id FROM leads WHERE lead_id IN (' . implode(',', $leadsID) . ') AND lead_location_id ="' . $leadsummery_city . '" AND lead_progress LIKE \'%:"' . $leadsummery_stages . '";%\' AND lead_loan_amount >="' . $leadsummery_amount_from . '" AND lead_loan_amount <="' . $leadsummery_amount_to . '" AND lead_reg_date <="' . $leadsummery_startdate . '" AND lead_reg_date >="' . $leadsummery_enddate . '" GROUP BY lead_product_id ORDER BY COUNT(lead_product_id) DESC limit 5';
                $leadProduct = $this->db->query($leadProduct_query)->result_array();
                $leadProduct_count = count($leadProduct);

                foreach ($leadProduct as $lp) {
                    $product_name[] = $this->Generalmodel->getfromid('products', 'product_name', $lp['lead_product_id']);
                    $pro_percent[] = round(($lp['lead_product_count'] / $leads_count) * 100);
                }

                $tempLeadPro[] = array('Product Name', 'Count');
                for ($i = 0; $i < $leadProduct_count; $i++) {
                    $proData = array($product_name[$i], $pro_percent[$i]);
                    $tempLeadPro[] = $proData;
                    $leadSummeryProductpiedata = $tempLeadPro;
                }

Solution

  • Problem solved. It cause due to google.charts.setOnLoadCallback(drawLeadSummeryChart);. As i am using setOnLoadCallback multiple times in same jquery. Due to this it always shows an errors in console "Uncaught Error: Container is not defined" and unable to load response. So i just check that length of id from view page is greater than 0. If it is greater then execute setOnLoadCallback. Code is given below:

    if ($('#IDFROMVIEWPAGE').length > 0) {
                    google.charts.setOnLoadCallback(drawLeadSummeryChart);
                }