Google 차트 - 툴팁 내의 그래프

Question

현재 툴팁이 켜져있는 분산 형 차트가 있습니다. API에 따르면 툴팁에 자바 스크립트 (및 HTML)를 사용할 수 있습니다. 내가하고 싶은 것은 사용자가 데이터 포인트 위로 마우스를 가져 가서 그에 대한 더 많은 정보를 볼 수있을뿐 아니라 툴팁에서 다른 그래프를 볼 수도 있습니다. {{}} 단순히 마찬가지로 장고 변수와, {%의 %}이다 있습니다 장고 논리 문에 동봉

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
     var aPart = (4 - 16)/({{ lowest_velocity }} - {{ highest_velocity }}); 
     var bPart = 4 - {{ lowest_velocity }} * aPart; 
     var options = {width: {{ img_width }}, height: {{ img_height }}, title: 'Results for model: {{ current_model_selection }}, build: {{ current_build_selection }}', chartArea: {left: 50, top: 100}, backgroundColor: 'transparent', colors: ['#3cb521'], legend: 'none', 

      hAxis: {viewWindow: {min: {{ tunnelminx }}, max: {{ tunnelmaxx }}}, agridlines: {count: 0}}, pointSize: 8, fontName: '"Arial"', 
      vAxis: {viewWindow: {min: {{ tunnelminy }}, max: {{ tunnelmaxy }}}, agridlines: {count: 0}}, tooltip: { isHtml: true }, 
      series: [ 
       {% for lst in velocity_pressure_list %} 
        {% if lst.1 == 0%} {# If pressure == 0 #} 
         {color: 'red', pointSize: aPart * {{lst.0}} + bPart}, 
        {% else %} {# Else is pressure so change size #} 
         {pointSize: aPart * {{lst.0}} + bPart}, 
        {% endif %} 
       {% endfor %} 
      ] 
     }; 
     google.load("visualization", "1", {packages: ["corechart", "table"]}); 
     google.setOnLoadCallback(drawChart); 
     var data; 
     function drawChart() { 
      data = new google.visualization.DataTable(); 

      data.addColumn('number', 'X'); 
      {% for column in num_columns %} 
       data.addColumn('number', 'Y'); 
       data.addColumn({type: 'string', label: 'Probe Details', role: 'tooltip', 'p': {'html': true}}); 
      {% endfor %} 
      data.addRows({{ vtime_cd_list_of_lists|safe }}); 

      var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 

      google.visualization.events.addListener(chart, 'select', 
        function() { 
         table.setSelection([ 
          {row: chart.getSelection()[0].row} 
         ]); 
        }); 
      var table = new google.visualization.Table(document.getElementById('table_div')); 
      table.draw(data, {showRowNumber: true}); 
     } 
    </script> 

부품. 누군가가 이것에 대해 어떻게 움직이는 지에 대한 아이디어가 있다면 크게 고맙겠습니다.

Answer 1

제레미 팔러 (JeremyFaller)가 제안한 그래프에서 png 기법으로 그래프를 사용하여 문제를 해결했습니다. 내 대답은 몇 가지 장고를 포함하지만, 대부분의 사람들이 php 등에 대한 일반적인 아이디어를 얻을 것이라고 믿습니다.

그래프를 툴팁에 표시하기위한 관련 부분 만 포함되었습니다. 마찬가지로 코드 주석에 중요한 정보가 있습니다. 놓치지 마세요.

이 첫 번째 비트는 단지 기본 차트입니다 (DB에서 동적으로 생성되지 않음).

var encoded_img; 
var copy_of_data_list; 
google.load("visualization", "1", {packages: ["corechart", "table"]}); 
google.setOnLoadCallback(drawVisualization); 
function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
     ['x', 'Cats', 'Blanket 1', 'Blanket 2'], 
     ['A', 1, 1, 0.5], 
     ['B', 2, 0.5, 1], 
     ['C', 4, 1, 0.5], 
     ['D', 8, 0.5, 1], 
     ['E', 7, 1, 0.5], 
     ['F', 7, 0.5, 1], 
     ['G', 8, 1, 0.5], 
     ['H', 4, 0.5, 1], 
     ['I', 2, 1, 0.5], 
     ['J', 3.5, 0.5, 1], 
     ['K', 3, 1, 0.5], 
     ['L', 3.5, 0.5, 1], 
     ['M', 1, 1, 0.5], 
     ['N', 1, 0.5, 1] 
    ]); 

    // Create and draw the visualization. 
    var chart_divB = document.getElementById('chart_divB'); //chart_divB is hidden 
    var chartB = new google.visualization.LineChart(chart_divB) 
    google.visualization.events.addListener(chartB, 'ready', function() { 
     encoded_img = '<p><img src="' + chartB.getImageURI() + '"></p>'; //Creates the encoded img 
    }); 
    var options = {title: 'Something random and cutsie about cats', 
     width: 600, 
     height: 400 
    }; 

    chartB.draw(data, options); //Draws it in the hidden div (required for the png trick) 
    copy_of_data_list ={{ main_graph_list_of_lists|safe }} //My Django data from a db 
    for (var i = 0; i < copy_of_data_list.length; i++) { 
     copy_of_data_list[i][2 * i + 2] += encoded_img; //Adds the encoded png image to the correct tooltip columns (most people will just have one, but I have other things going on) 
    } 
} 

이 표시되고 툴팁을 갖는 제 '적절한' 차트이다.

google.load("visualization", "1", {packages: ["corechart", "table"]}); 
    google.setOnLoadCallback(drawChart); 
    var data; 
    function drawChart() { 
     data = new google.visualization.DataTable(); 

     data.addColumn('number', 'X'); 
     {% for column in num_columns %} //More stuff that is not specifically related to this problem 
      data.addColumn('number', 'Y'); 
      data.addColumn({type: 'string', label: 'Probe Details', role: 'tooltip', 'p': {'html': true}});//It is essential that the tooltip column/s is html enabled 
     {% endfor %} 
     data.addRows(copy_of_data_list); //The modified data thanks to the last 'chart' 

     var chart = new google.visualization.ScatterChart(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 

PNG 이미지 인코딩을 사용하는이 기술은 툴팁마다 상이한 차트를 만드는 데 사용할 수

한 도움말 차트이 이후 촬영. N 개의 숨겨진 div를 만들면 각자 고유 한 ID로 - 위에서 수행 한 작업을 약간 수정하여이 작업을 수행 할 수 있습니다. 힌트 : ID로 요소를 가져 오는 것에서 차트의 그림으로 N 번 반복하십시오 (가지고있는 툴팁 수). 숨겨진 div 각각에 대해 고유 한 ID를 사용하여 기본적으로 숨겨진 그래프를 그린 다음 png로 변환 할 수 있습니다.

참고 : 사람들이 더 좋은 예를 원하면 다른 툴팁 차트를 사용할 수없는 경우 요청시 만들어 드리겠습니다.