Bar Charts

<script src='https://www.gstatic.com/charts/loader.js'></script> was added in the page head.

xxxxxxxxxx

 

1

%%html

2

<div id='test_googlechart3' style='width:610px; height:410px;'/>

3

<script>

4

google.charts.load('current',{packages:['corechart']}); 

5

google.charts.setOnLoadCallback(drawChart);

6

function drawChart() {

7

    var data=google.visualization.arrayToDataTable([

8

        ['Element','Density',{role:'style'}],

9

        ['Copper',8.94,'color:#b87333; fill-opacity:'+

10

         Math.random()+'; stroke-width:4;'],

11

        ['Silver',10.49,'color:silver; fill-opacity:'+

12

         Math.random()+'; stroke-width:5;'],

13

        ['Gold',19.30,'color:gold; fill-opacity:'+

14

         Math.random()+'; stroke-width:6;'],

15

        ['Platinum',21.45,'color:#e5e4e2; fill-opacity:'+

16

         Math.random()+'; stroke-width:7;']]);

17

    var view=new google.visualization.DataView(data);

18

    view.setColumns([0,1,{calc:'stringify',sourceColumn:1,

19

                          type:'string',role:'annotation'},2]);

20

    var options={title:'Density of Precious Metals, in g/cm^3',

21

                 width:580,height:400,bar:{groupWidth:'80%'},

22

                 legend:{position:'none'},background:{color:'black'}};

23

    var doc=document.getElementById('test_googlechart3');

24

    var chart=new google.visualization.ColumnChart(doc); 

25

    chart.draw(data,options);};

Language: Sage Gap GP HTML Macaulay2 Maxima Octave Python R Singular

---

Messages