Source

jqplot / examples / theming.html

<!DOCTYPE html>

<html lang="en">
<head>
  <!-- Use Compatibility mode in IE -->
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" >
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Theming Test</title>
  <!--[if IE]><script language="javascript" type="text/javascript" src="../src/excanvas.js"></script><![endif]-->
  
  <!-- <link rel="stylesheet" type="text/css" href="../src/themes/jqplot.brass.css" /> -->
  <link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
  <link rel="stylesheet" type="text/css" href="examples.css" />
  
  <!-- BEGIN: load jquery -->
  <script language="javascript" type="text/javascript" src="../src/jquery-1.4.2.min.js"></script>
  <!-- END: load jquery -->
  
  <!-- BEGIN: load jqplot -->
  <script language="javascript" type="text/javascript" src="../src/jquery.jqplot.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.pieRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.donutRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.highlighter.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.funnelRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
  <script language="javascript" type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
  <!-- END: load jqplot -->

<style type="text/css">
.jqplot-target {
    margin: 30px;
}
</style>

<script language="javascript" type="text/javascript">
$(document).ready(function(){

    l1 = [['Seoul', 1], ['Paris', 7], ['Singapore',3], ['Hong  Kong',5], ['Chicago', 2], ['New York', 9]];
    l2 = [11, 9, 5, 12, 14];
    l3 = [4, 8, 5, 3, 6];
    l4 = [12, 6, 13, 11, 2];
    l5 = [4, -3, 3, 6, 2, -2];

    pop1980 = [7071639, 2968528, 3005072, 1595138, 789704, 1688210, 785940, 904599];
    pop1990 = [7322564, 3485398, 2783726, 1630553, 983403, 1585577, 935933, 1006877];
    pop2000 = [8008654, 3694644, 2896051, 1974152, 1322025, 1517550, 1160005, 1188603];
    pop2008 = [8363710, 3833995, 2853114, 2242193, 1567924, 1447395, 1351305, 1279910];

    ticks = ["New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio", "Dallas"];

    plot1 = $.jqplot('chart1',[l2],{
       title: 'Line Chart',
       highlighter: {
           show:true
       },
       cursor: {
           show: true,
           zoom: true
       },
       axes: {
           xaxis: {
               label: 'Sample'
           }
       }
    });
    
    plot1b = $.jqplot('chart1b',[l2, l3, l4],{
       stackSeries: true,
       showMarker: false,
       seriesDefaults: {
           fill: true
       }
    });

    plot2 = $.jqplot('chart2',[pop1980, pop1990, pop2000, pop2008],{
       title: 'City Population',
       legend: {
           show: true
       },
       seriesDefaults: {
           renderer: $.jqplot.BarRenderer,
           rendererOptions: {
               barPadding: 2
           }
       },
       series: [
          {label: '1980'},
          {label: '1990'},
          {label: '2000'},
          {label: '2008 (est)'}
       ],
       axes: {
           xaxis: {
               label: 'City',
               renderer: $.jqplot.CategoryAxisRenderer,
               tickRenderer: $.jqplot.CanvasAxisTickRenderer,
               labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
               ticks: ticks,
               tickOptions: {
                   angle: -30
                }
           },
           yaxis: {
               tickRenderer: $.jqplot.CanvasAxisTickRenderer,
               max: 9000000,
               min: 0,
               tickOptions: {
                   formatString: '%d',
                   angle: -30
                }
           }
       }
    });
    
    plot3 = $.jqplot('chart3',[l1],{
       title: 'Global City Index',
       legend: {
           show: true,
           rendererOptions: {
               // numberColumns: 2,
               fontSize: '10pt'
           }
        },
       seriesDefaults: {
           renderer: $.jqplot.FunnelRenderer
       }
    });
        
    // plot4 = $.jqplot('chart4',[l2, l3],{
    //    title: 'Stacked Bar Chart',
    //    stackSeries: true,
    //    legend: {
    //        show: true,
    //        location: 'nw'
    //    },
    //    seriesDefaults: {
    //        renderer: $.jqplot.BarRenderer
    //    },
    //    axes: {
    //        xaxis: {
    //            renderer: $.jqplot.CategoryAxisRenderer
    //        }
    //    }
    // });
        
        plot5 = $.jqplot('chart5',[l1],{
           title: 'Pie Chart',
           seriesDefaults: {
               renderer: $.jqplot.PieRenderer
           },
           legend: {
               show: true
           }
        });
    // 
    // plot6 = $.jqplot('chart6',[l2, l3],{
    //    title: 'Donut Chart',
    //    seriesDefaults: {
    //        renderer: $.jqplot.DonutRenderer,
    //        rendererOptions: {
    //            ringMargin: 4
    //        }
    //    }
    // });
    // 
    e1 = plot1.themeEngine;
    brass = e1.copy('Default', 'brass');
    brass.title.fontFamily = 'Copperplate, Impact';
    brass.grid.backgroundColor = "rgb(216, 198, 114)";
    brass.grid.drawGridlines = false;
    brass.series[0].lineWidth = 6.5;
    brass.series[0].markerOptions.show = false;
    // brass.axes.xaxis.ticks.fontFamily = "Copperplate, Impact";
    brass.axesStyles.label.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
    brass.axesStyles.ticks.fontFamily = "Copperplate, 'Copperplate Gothic Light', Impact";
    brass.axesStyles.label.fontSize = '14pt';
    
    temp = {
        grid: {
            backgroundColor: "#593D2B",
            gridLineColor: '#E8E8E8',
            gridLineWidth: 3
        },
        title: {
            fontFamily: '"Comic Sans MS", cursive',
            fontSize: '18pt',
            textColor: '#C7CC4E'
        },
        seriesStyles: {
            color: "#DBBCAF",
            lineWidth: 8,
            markerOptions: {
                show: false
            }
        },
        axes: {
            xaxis: {
                label: {
                    fontFamily: '"Comic Sans MS", cursive',
                    textColor: '#C7CC4E'
                }
            }
        }
    };
    
    chocolate = plot1.themeEngine.copy('Default', 'chocolate', temp);
    
    temp = {
        series: [
            {color: 'rgba(216, 159, 60, 0.4)'},
            {color: 'rgba(159, 216, 60, 0.4)'},
            {color: 'rgba(60, 159, 216, 0.4)'},
        ],
        grid: {
            backgroundColor: '#DEA493'
        }
    }
    
    gabe = plot1b.themeEngine.newTheme('gabe', temp);
    
    temp = {
        title: {
            fontFamily: 'Times New Roman',
            textColor: 'black'
        },
        axesStyles: {
           borderWidth: 0,
           ticks: {
               fontSize: '12pt',
               fontFamily: "'Times New Roman'",
               textColor: 'black'
           },
           label: {
               fontFamily: "'Times New Roman'",
               textColor: 'black'
           }
        },
        grid: {
            backgroundColor: 'white',
            borderWidth: 0,
            gridLineColor: 'black',
            gridLineWidth: 2,
            borderColor: 'black'
        },
        series: [
            {color: 'red', highlightColors: ['aqua', 'black', 'blue', 'fuchsia', 'gray', 'green', 'lime', 'maroon', 'navy', 'olive', 'purple', 'red', 'silver', 'teal', 'white', 'yellow']},
            // {color: 'red', highlightColors: []},
            {color: 'green', highlightColors: []},
            {color: 'blue', highlightColors: []},
            {color: 'yellow', highlightColors: 'rgb(255, 245, 185)'}
        ],
        legend: {
            background: 'white',
            textColor: 'black',
            fontFamily: 'Times New Roman',
            border: '1px solid black'
        }
    };
    
    // old = plot2.themeEngine.newTheme('1995', temp);
    
    oldstyle = new $.jqplot.Theme('oldstyle', temp);
    
    plot2.themeEngine.add(oldstyle);
    
    temp = {
        seriesStyles: {
            seriesColors: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo'],
            highlightColors: ['lightpink', 'lightsalmon', 'lightyellow', 'lightgreen', 'lightblue', 'mediumslateblue']
        },
        legend: {
            fontSize: '8pt'
        },
        title: {
            fontSize: '18pt'
        },
        grid: {
            backgroundColor: 'rgb(211, 233, 195)'
        }
    };
    
    uma = new $.jqplot.Theme('uma', temp);
    plot3.themeEngine.add(uma);
    plot5.themeEngine.add(uma);
    // uma = plot3.themeEngine.newTheme('uma', temp);
    
});

function switchTheme(plot, theme) {
    plot.activateTheme(theme);
}


</script>
  </head>
  <body>
<?php include "nav.inc"; ?>
<div id="chart1" class="plot" style="width:400px;height:260px;"></div>
<div id="chart1b" class="plot" style="width:400px;height:260px;"></div>
<div id="chart2" class="plot" style="width:760px;height:360px;"></div>
<div id="chart3" class="plot" style="width:400px;height:320px;"></div>
<div id="chart4" class="plot" style="width:400px;height:260px;"></div>
<div id="chart5" class="plot" style="width:400px;height:260px;"></div>
<div id="chart6" class="plot" style="width:400px;height:260px;"></div>
  </body>
</html>