highchartsグラフィックレポート

パッケージされたhighchartsレポート
ここでdataResidenceAveragePriceとdataPropertyAveragePriceは、highchartsレポートに必要なデータであり、文字列形式でフォーマットされています.
例:

  
  
  
  

   
   
   
   
"1992-12-12,50;1993-12-12,100;1994-11-11,80" 
  
  
  
  
  containerId div id

  
  
  
  

   
   
   
   
function DrawLineScatter(dataResidenceAveragePrice, dataPropertyAveragePrice,containerId) 
   
   
   
   
 
   
   
   
   
{ 
   
   
   
   
 
   
   
   
   
    var chartResidenceAveragePrice = new Array(); 
   
   
   
   
    var chartPropertyAveragePrice = new Array(); 
   
   
   
   
     
   
   
   
   
    var tmpResidenceAveragePrices = dataResidenceAveragePrice.split(';'); 
   
   
   
   
    var tmpPropertyAveragePrices = dataPropertyAveragePrice.split(';'); 
   
   
   
   
     
   
   
   
   
    for(var i = 0; i < tmpResidenceAveragePrices.length - 1; i ++) 
   
   
   
   
    {                
   
   
   
   
        var tmpResidenceAveragePrice = tmpResidenceAveragePrices[i].split(','); 
   
   
   
   
         
   
   
   
   
        var info = new Array(); 
   
   
   
   
        if(i==0){ 
   
   
   
   
            this.weekDay=getWeekDay(tmpResidenceAveragePrice[0]); 
   
   
   
   
        } 
   
   
   
   
        info.push(getDate(tmpResidenceAveragePrice[0])); 
   
   
   
   
        info.push(parseFloat(tmpResidenceAveragePrice[1])); 
   
   
   
   
         
   
   
   
   
        chartResidenceAveragePrice.push(info); 
   
   
   
   
    } 
   
   
   
   
 
   
   
   
   
     
   
   
   
   
 
   
   
   
   
    for(var i = 0; i < tmpPropertyAveragePrices.length - 1; i ++) 
   
   
   
   
    {                
   
   
   
   
        var tmpPropertyAveragePrice = tmpPropertyAveragePrices[i].split(','); 
   
   
   
   
         
   
   
   
   
        var info = new Array(); 
   
   
   
   
        info.push(getDate(tmpPropertyAveragePrice[0])); 
   
   
   
   
        info.push(parseFloat(tmpPropertyAveragePrice[1])); 
   
   
   
   
         
   
   
   
   
        chartPropertyAveragePrice.push(info); 
   
   
   
   
    } 
   
   
   
   
 
   
   
   
   
     
   
   
   
   
 
   
   
   
   
    var chart; 
   
   
   
   
     
   
   
   
   
    chart = new Highcharts.Chart({ 
   
   
   
   
        chart: { 
   
   
   
   
            renderTo: containerId 
   
   
   
   
         
   
   
   
   
        }, 
   
   
   
   
        xAxis: {         
   
   
   
   
             labels:{  
   
   
   
   
                    step:chartResidenceAveragePrice.length/2 
   
   
   
   
                } , 
   
   
   
   
             
   
   
   
   
            type: 'datetime', 
   
   
   
   
 
   
   
   
   
            dateTimeLabelFormats: { 
   
   
   
   
 
   
   
   
   
                day: '%e of %b'   
   
   
   
   
 
   
   
   
   
            }, 
   
   
   
   
             
   
   
   
   
            //startOnTick: true, 
   
   
   
   
            endOnTick: true, 
   
   
   
   
            tickInterval:24 *7* 3600 * 1000, 
   
   
   
   
            startOfWeek: this.weekDay, 
   
   
   
   
            showLastLabel: true, 
   
   
   
   
             
   
   
   
   
             
   
   
   
   
        }, 
   
   
   
   
        yAxis: { 
   
   
   
   
            min: 0, 
   
   
   
   
            title: { 
   
   
   
   
                text: ' （ ）' // 
   
   
   
   
            }, 
   
   
   
   
            tickPixelInterval:30, 
   
   
   
   
            startOnTick: false 
   
   
   
   
        }, 
   
   
   
   
        title: { 
   
   
   
   
            text: '' 
   
   
   
   
        },                   
   
   
   
   
        series: [{ 
   
   
   
   
            type: 'line', 
   
   
   
   
            name: ' （ ）', 
   
   
   
   
            data: chartResidenceAveragePrice,    
   
   
   
   
            pointStart: chartResidenceAveragePrice[0][0], 
   
   
   
   
            pointInterval: 24 *7* 3600 * 1000 ,// seven day 
   
   
   
   
              
   
   
   
   
            marker: { 
   
   
   
   
                enabled: true 
   
   
   
   
            }, 
   
   
   
   
            states: { 
   
   
   
   
                hover: { 
   
   
   
   
                    lineWidth: 0 
   
   
   
   
                } 
   
   
   
   
            }, 
   
   
   
   
            enableMouseTracking: true 
   
   
   
   
        } 
   
   
   
   
        , { 
   
   
   
   
            type: 'scatter', 
   
   
   
   
            name: ' （ ）', 
   
   
   
   
            data: chartPropertyAveragePrice,     
   
   
   
   
            marker: { 
   
   
   
   
                radius: 10 
   
   
   
   
            } 
   
   
   
   
        }], 
   
   
   
   
        exporting: { 
   
   
   
   
                enabled: false 
   
   
   
   
            }    
   
   
   
   
    }); 
   
   
   
   
 
   
   
   
   
} 
   
   
   
   
 
   
   
   
   
function getWeekDay(strDate){ 
   
   
   
   
     var tmpDate = new Array(); 
   
   
   
   
    tmpDate = strDate.split('-'); 
   
   
   
   
     
   
   
   
   
    var year = tmpDate[0]; 
   
   
   
   
    var month = parseInt(tmpDate[1], 10) - 1; 
   
   
   
   
 
   
   
   
   
    var day = tmpDate[2]; 
   
   
   
   
    
   
   
   
   
     
   
   
   
   
    return new Date(year,month,day).getDay(); 
   
   
   
   
} 
   
   
   
   
 
   
   
   
   
 
   
   
   
   
 
   
   
   
   
function getDate(strDate) 
   
   
   
   
{     
   
   
   
   
    var tmpDate = new Array(); 
   
   
   
   
    tmpDate = strDate.split('-'); 
   
   
   
   
     
   
   
   
   
    var year = tmpDate[0]; 
   
   
   
   
    var month = parseInt(tmpDate[1], 10) - 1; 
   
   
   
   
    var day = tmpDate[2]; 
   
   
   
   
     
   
   
   
   
    return Date.UTC(year, month, day); 
   
   
   
   
}