How am I going to make a chart by area? [jQuery, Google Charts, etc.]

Question

How am I going to make a chart by area? [jQuery, Google Charts, etc.]

I have some data for which I need a chart. The problem is that the data has price ranges. Some of these prices have some overlap between them. In addition, all price ranges have upper and lower limits, which are not a zero value.

Here is an image to explain what I am looking to fulfill: enter image description here

jQuery Google, , . , , , , , , " " " ". , , .

-, ? ? .

+5

jquery google-visualization charts

Jim P 11 . '12 17:44

2

Ruut · Answer 1 · 2012-10-29T12:00:29+0000

. . . :

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Fill data object, first row contains legend text, which in 
        // this example contains the calculation rules. 
        var data = google.visualization.arrayToDataTable([
          ['Month', 'min(Dataset1)', 'max(Dataset1)-min(Dataset1)', 
           'min(Dataset2)-max(Dataset1)', 'max(Dataset2)-min(Dataset2)', 
           'min(Dataset3)-max(Dataset2)', 'max(Dataset3)-min(Dataset3)'],
          ['2004/05', 1, 2, 2, 2, 5,4],
          ['2005/06', 2, 3, 1, 1, 3,3],
          ['2006/07', 3, 4, 0, 2, 0,2],
          ['2007/08', 3, 4, -1, 2, -5,2],
          ['2008/09', 4, 4, -2, 3, -9,1]
        ]);

        // Create and draw the visualization.
        var ac = new google.visualization.AreaChart(
         document.getElementById('visualization'));
        ac.draw(data, {
          isStacked: true,
          chartArea:{left:"5%",top:"2%",width:"50%",height:"93%"}, 
          series: {
            0:{color: 'transparent'},
            2:{color: 'transparent'},
            4:{color: 'transparent'},
          }
        });
      }
      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
  </body>
</html>

, . , .

:

aendrew · Answer 2 · 2012-06-24T22:11:07+0000

, - , , , .

, , , Google Charts, http://dygraphs.com/ .

-:

How am I going to make a chart by area? [jQuery, Google Charts, etc.]

More articles: