入力フィールド値とクエリ結果でAmchartsのデータプロバイダを更新する方法

Question

私はシリアル型のamchartを使用しており、dataProviderでクエリ結果を使用しています。今私は別のグラフを使用したので、入力値に応じてdataProviderの値を変更する必要があります。しかし、グラフ2は誰も私にdataProviderの値を変更するソリューションを提案していない。

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script> 
 
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script> 
 

 
<script> 
 
/** 
 
* Define universal config 
 
*/ 
 
var chartConfig = { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "marginRight": 80, 
 
    "dataProvider": [], 
 
    "valueAxes": [{ 
 
    "axisAlpha": 0, 
 
    "position": "left", 
 
    "title": "Send count by each mailer " 
 
    }], 
 
    "startDuration": 1, 
 
    "graphs": [{ 
 
    "balloonText": "<b>[[category]]: [[value]]</b>", 
 
    "fillColorsField": "color", 
 
    "fillAlphas": 0.9, 
 
    "lineAlpha": 0.2, 
 
    "type": "column", 
 
    "customBulletField": "bullet", 
 
    "bulletOffset": 10, 
 
    "bulletSize": 52, 
 
    "valueField": "visits" 
 
    }], 
 
    "chartCursor": { 
 
    "categoryBalloonEnabled": false, 
 
    "cursorAlpha": 0, 
 
    "zoomable": false 
 
    }, 
 
    "categoryField": "country", 
 
    "categoryAxis": { 
 
    "gridPosition": "start", 
 
    "labelRotation": 45 
 
    }, 
 
    "export": { 
 
    "enabled": true 
 
    } 
 
}; 
 

 
/** 
 
* Define function for cloning objects 
 
* Taken from: http://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object 
 
*/ 
 
function clone(obj) { 
 
    var copy; 
 

 
    // Handle the 3 simple types, and null or undefined 
 
    if (null == obj || "object" != typeof obj) return obj; 
 

 
    // Handle Date 
 
    if (obj instanceof Date) { 
 
    copy = new Date(); 
 
    copy.setTime(obj.getTime()); 
 
    return copy; 
 
    } 
 

 
    // Handle Array 
 
    if (obj instanceof Array) { 
 
    copy = []; 
 
    for (var i = 0, len = obj.length; i < len; i++) { 
 
     copy[i] = clone(obj[i]); 
 
    } 
 
    return copy; 
 
    } 
 

 
    // Handle Object 
 
    if (obj instanceof Object) { 
 
    copy = {}; 
 
    for (var attr in obj) { 
 
     if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]); 
 
    } 
 
    return copy; 
 
    } 
 

 
    throw new Error("Unable to copy obj! Its type isn't supported."); 
 
} 
 

 
/** 
 
* Create first chart 
 
*/ 
 

 
// create a copy of the universal config 
 
var chartConfig1 = clone(chartConfig); 
 

 
// modify a copy of the config 
 
chartConfig1.dataProvider = [ 
 
<?php 
 
$livemailersend="select t1.emp_id,t2.isp,t2.fname,t2.iurl,sum(t1.sent),sum(t1.opens) from red_global t1, admin_emp t2 where t1.emp_id=t2.emp_id and t1.status_date between '$fromdate' and '$todate' and t1.emp_id in (2010,2015,2016,2020,2022,2023,2025,2027) group by 1,2,3,4 order by 5 desc;"; 
 
    $lmailersend_fetch=mysql_query($livemailersend,$link1); 
 
    $color = array("#ccff33", "#ffcc00", "#ff9933","#ff33cc","#0099ff","#00ffcc","#00cc00","#0000cc","#6b616b","#a8a36b","#c5a6ff"); 
 
    $i=0; 
 
    while($lmailersend=mysql_fetch_array($lmailersend_fetch)) 
 
    { 
 
    echo" 
 
    { 
 
    'country': '".$lmailersend[2]."(".round(($lmailersend[5]/$lmailersend[4])*100 , 2) ."%)', 
 
    'visits': ".$lmailersend[4].", 
 
    'color': '".$color[$i]."', 
 
    'bullet': 'img/wxemp/".$lmailersend[3]."' 
 
    },"; 
 
    $i=$i+1; 
 
    }?> 
 
    ]; 
 

 
// create the chart 
 
AmCharts.makeChart("chart1", chartConfig1); 
 

 
/** 
 
* Create second chart 
 
*/ 
 

 
// create a copy of the universal config 
 
var chartConfig2 = clone(chartConfig); 
 

 
// modify a copy of the config 
 
chartConfig2.dataProvider = [ 
 
<?php 
 
$livemailersend="select t1.emp_id,t2.isp,t2.fname,t2.iurl,sum(t1.sent),sum(t1.opens) from red_global t1, admin_emp t2 where t1.emp_id=t2.emp_id and t1.status_date between '2017-05-18' and '2017-05-31' and t1.emp_id in (2010,2015,2016,2020,2022,2023,2025,2027) group by 1,2,3,4 order by 5 desc;"; 
 
    $lmailersend_fetch=mysql_query($livemailersend,$link1); 
 
    $color = array("#ccff33", "#ffcc00", "#ff9933","#ff33cc","#0099ff","#00ffcc","#00cc00","#0000cc","#6b616b","#a8a36b","#c5a6ff"); 
 
    $i=0; 
 
    while($lmailersend=mysql_fetch_array($lmailersend_fetch)) 
 
    { 
 
    echo" 
 
    { 
 
    'country': '".$lmailersend[2]."(".round(($lmailersend[5]/$lmailersend[4])*100 , 2) ."%)', 
 
    'visits': ".$lmailersend[4].", 
 
    'color': '".$color[$i]."', 
 
    'bullet': 'img/wxemp/".$lmailersend[3]."' 
 
    },"; 
 
    $i=$i+1; 
 
    }?> 
 
    ]; 
 

 
// create the chart 
 
AmCharts.makeChart("chart2", chartConfig2); 
 
</script>

<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

<?php 
 
$fromdate = date("Y-m-d");; 
 
$todate = date("Y-m-d");; 
 
$proteam = "yah"; 
 
//-----------------------datewise live report-------------------------------------// 
 
$action =$_POST['action']; 
 
$fromdatepick =$_POST['fromdatepick']; 
 
$todatepick =$_POST['todatepick']; 
 
if(($action)=="datewise") 
 
{ 
 
echo($action. "<br/>".$fromdatepick. "<br/>".$todatepick. "<br/>"); 
 
} 
 
?> \t 
 
<!-- BAR Chart --> 
 
<div class="col-sm-12"> 
 
\t <div id="bg-default" class="panel-collapse collapse in"> 
 
\t \t \t <?php if(($action)!="datewise") 
 
\t \t \t { 
 
\t \t \t $where = ("and t1.status_date between '$fromdate' and '$todate'");?> 
 
\t \t \t \t <div id="chart1" class="chartdiv" style="width \t : 100%; \t height \t : 500px;"></div> 
 
\t \t \t <?php } else { 
 
\t \t \t $where = ("and t1.status_date between '$fromdatepick' and '$todatepick'");?> 
 
\t \t \t <div id="chart2" class="chartdiv" style="width \t : 100%; \t height \t : 500px;"></div> 
 
      <?php } ?> \t \t \t \t \t 
 
\t \t \t </div> 
 
</div>

Answer 1

すでに変数chartのチャートのインスタンスを持って考えると、次のことができます。私が使用している場合

chart.dataProvider = [...]; // Change or replace the array 
chart.validateData(); // Refreshes the chart based on the new data 

See more about validateData here