Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

Revision Autor Zeilennr. Zeile
9 lars 1 
<!DOCTYPE html>
2 
 
3 
<html>
4 
<head>
5 
 
6 
    <title>Bar Colors Example</title>
7 
 
8 
    <link class="include" rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
9 
    <link rel="stylesheet" type="text/css" href="examples.min.css" />
10 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.min.css" />
11 
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shThemejqPlot.min.css" />
12 
 
13 
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="../excanvas.js"></script><![endif]-->
14 
    <script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
15 
 
16 
 
17 
</head>
18 
<body>
19 
    <div id="header">
20 
        <div class="nav">
21 
            <a class="nav" href="../../../index.php"><span>&gt;</span>Home</a>
22 
            <a class="nav"  href="../../../docs/"><span>&gt;</span>Docs</a>
23 
            <a class="nav"  href="../../download/"><span>&gt;</span>Download</a>
24 
            <a class="nav" href="../../../info.php"><span>&gt;</span>Info</a>
25 
            <a class="nav"  href="../../../donate.php"><span>&gt;</span>Donate</a>
26 
        </div>
27 
    </div>
28 
    <div class="colmask leftmenu">
29 
      <div class="colleft">
30 
        <div class="col1" id="example-content">
31 
 
32 
 
33 
<!-- Example scripts go here -->
34 
 
35 
<div id="chart1" class="example-chart" style="height:300px;width:500px"></div>
36 
<div id="chart2" class="example-chart" style="height:300px;width:500px"></div>
37 
<div id="chart3" class="example-chart" style="height:300px;width:500px"></div>
38 
 
39 
<script type="text/javascript" class="code">
40 
$(document).ready(function(){
41 
    // A Bar chart from a single series will have all the bar colors the same.
42 
    var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];
43 
 
44 
    $('#chart1').jqplot([line1], {
45 
        title:'Default Bar Chart',
46 
        seriesDefaults:{
47 
            renderer:$.jqplot.BarRenderer
48 
        },
49 
        axes:{
50 
            xaxis:{
51 
                renderer: $.jqplot.CategoryAxisRenderer
52 
            }
53 
        }
54 
    });
55 
});
56 
</script>
57 
 
58 
<script type="text/javascript" class="code">
59 
$(document).ready(function(){
60 
    var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];
61 
 
62 
    $('#chart2').jqplot([line1], {
63 
        title:'Bar Chart with Varying Colors',
64 
        seriesDefaults:{
65 
            renderer:$.jqplot.BarRenderer,
66 
            rendererOptions: {
67 
                // Set the varyBarColor option to true to use different colors for each bar.
68 
                // The default series colors are used.
69 
                varyBarColor: true
70 
            }
71 
        },
72 
        axes:{
73 
            xaxis:{
74 
                renderer: $.jqplot.CategoryAxisRenderer
75 
            }
76 
        }
77 
    });
78 
});
79 
</script>
80 
 
81 
<script type="text/javascript" class="code">
82 
$(document).ready(function(){
83 
    var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];
84 
 
85 
    $('#chart3').jqplot([line1], {
86 
        title:'Bar Chart with Custom Colors',
87 
        // Provide a custom seriesColors array to override the default colors.
88 
        seriesColors:['#85802b', '#00749F', '#73C774', '#C7754C', '#17BDB8'],
89 
        seriesDefaults:{
90 
            renderer:$.jqplot.BarRenderer,
91 
            rendererOptions: {
92 
                // Set varyBarColor to tru to use the custom colors on the bars.
93 
                varyBarColor: true
94 
            }
95 
        },
96 
        axes:{
97 
            xaxis:{
98 
                renderer: $.jqplot.CategoryAxisRenderer
99 
            }
100 
        }
101 
    });
102 
});
103 
</script>
104 
 
105 
<!-- End example scripts -->
106 
 
107 
<!-- Don't touch this! -->
108 
 
109 
 
110 
    <script class="include" type="text/javascript" src="../jquery.jqplot.min.js"></script>
111 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.min.js"></script>
112 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.min.js"></script>
113 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.min.js"></script>
114 
<!-- End Don't touch this! -->
115 
 
116 
<!-- Additional plugins go here -->
117 
 
118 
    <script language="javascript" type="text/javascript" src="../plugins/jqplot.categoryAxisRenderer.min.js"></script>
119 
    <script language="javascript" type="text/javascript" src="../plugins/jqplot.barRenderer.min.js"></script>
120 
 
121 
<!-- End additional plugins -->
122 
 
123 
        </div>
124 
         <div class="col2">
125 
 
126 
           <div class="example-link"><a class="example-link" href="data-renderers.html">AJAX and JSON Data Loading via Data Renderers</a></div>
127 
           <div class="example-link"><a class="example-link" href="barLineAnimated.html">Animated Charts</a></div>
128 
           <div class="example-link"><a class="example-link" href="dashboardWidget.html">Animated Dashboard Sample - Filled Line with Log Axis</a></div>
129 
           <div class="example-link"><a class="example-link" href="kcp_area.html">Area Chart</a></div>
130 
           <div class="example-link"><a class="example-link" href="kcp_area2.html">Area Chart 2</a></div>
131 
           <div class="example-link"><a class="example-link" href="axisLabelTests.html">Axis Labels</a></div>
132 
           <div class="example-link"><a class="example-link" href="axisLabelsRotatedText.html">Axis Labels and Rotated Text</a></div>
133 
           <div class="example-link"><a class="example-link" href="barTest.html">Bar Charts</a></div>
134 
           <div class="example-link"><a class="example-link" href="multipleBarColors.html">Bar Colors Example</a></div>
135 
           <div class="example-link"><a class="example-link" href="bezierCurve.html">Bezier Curve Plots</a></div>
136 
           <div class="example-link"><a class="example-link" href="blockPlot.html">Block Plots</a></div>
137 
           <div class="example-link"><a class="example-link" href="bubbleChart.html">Bubble Charts</a></div>
138 
           <div class="example-link"><a class="example-link" href="bubble-plots.html">Bubble Plots</a></div>
139 
           <div class="example-link"><a class="example-link" href="candlestick.html">Candlestick and Open Hi Low Close Charts</a></div>
140 
           <div class="example-link"><a class="example-link" href="theming.html">Chart Theming</a></div>
141 
           <div class="example-link"><a class="example-link" href="fillBetweenLines.html">Charts with Fill Between Lines</a></div>
142 
           <div class="example-link"><a class="example-link" href="kcp_cdf.html">Cumulative Density Function Chart</a></div>
143 
           <div class="example-link"><a class="example-link" href="dashedLines.html">Dashed Lines with Smoothing</a></div>
144 
           <div class="example-link"><a class="example-link" href="cursor-highlighter.html">Data Point Highlighting, Tooltips and Cursor Tracking</a></div>
145 
           <div class="example-link"><a class="example-link" href="point-labels.html">Data Point labels</a></div>
146 
           <div class="example-link"><a class="example-link" href="date-axes.html">Date Axes</a></div>
147 
           <div class="example-link"><a class="example-link" href="dateAxisRenderer.html">Date Axes 2</a></div>
148 
           <div class="example-link"><a class="example-link" href="rotatedTickLabelsZoom.html">Date Axes, Rotated Labels and Zooming</a></div>
149 
           <div class="example-link"><a class="example-link" href="canvas-overlay.html">Draw Lines on Plots - Canvas Overlay</a></div>
150 
           <div class="example-link"><a class="example-link" href="draw-rectangles.html">Draw Rectangles on Plots</a></div>
151 
           <div class="example-link"><a class="example-link" href="kcp_engel.html">Engel Curves</a></div>
152 
           <div class="example-link"><a class="example-link" href="bandedLine.html">Error Bands and Confidence Intervals</a></div>
153 
           <div class="example-link"><a class="example-link" href="area.html">Filled (Area) Charts</a></div>
154 
           <div class="example-link"><a class="example-link" href="axisScalingForceTickAt.html">Force Plot to Have Tick at 0 or 100</a></div>
155 
           <div class="example-link"><a class="example-link" href="hiddenPlotsInTabs.html">Hidden Plots</a></div>
156 
           <div class="example-link"><a class="example-link" href="customHighlighterCursorTrendline.html">Highlighting, Dragging Points, Cursor and Trend Lines</a></div>
157 
           <div class="example-link"><a class="example-link" href="line-charts.html">Line Charts and Options</a></div>
158 
           <div class="example-link"><a class="example-link" href="kcp_lorenz.html">Lorenz Curves</a></div>
159 
           <div class="example-link"><a class="example-link" href="mekkoCharts.html">Mekko Charts</a></div>
160 
           <div class="example-link"><a class="example-link" href="meterGauge.html">Meter Gauge</a></div>
161 
           <div class="example-link"><a class="example-link" href="candlestick-charts.html">Open Hi Low Close and Candlestick Charts</a></div>
162 
           <div class="example-link"><a class="example-link" href="pieTest.html">Pie Charts and Options</a></div>
163 
           <div class="example-link"><a class="example-link" href="pieTest4.html">Pie Charts and Options 2</a></div>
164 
           <div class="example-link"><a class="example-link" href="pie-donut-charts.html">Pie and Donut Charts</a></div>
165 
           <div class="example-link"><a class="example-link" href="selectorSyntax.html">Plot Creation with jQuery Selectors</a></div>
166 
           <div class="example-link"><a class="example-link" href="zooming.html">Plot Zooming and Cursor Control</a></div>
167 
           <div class="example-link"><a class="example-link" href="kcp_pdf.html">Probability Density Function Chart</a></div>
168 
           <div class="example-link"><a class="example-link" href="kcp_pyramid_by_age.html">Pyramid Chart By Age</a></div>
169 
           <div class="example-link"><a class="example-link" href="kcp_pyramid.html">Pyramid Charts</a></div>
170 
           <div class="example-link"><a class="example-link" href="kcp_pyramid2.html">Pyramid Charts 2</a></div>
171 
           <div class="example-link"><a class="example-link" href="kcp_quintiles.html">Quintile Pyramid Charts</a></div>
172 
           <div class="example-link"><a class="example-link" href="resizablePlot.html">Resizable Plots</a></div>
173 
           <div class="example-link"><a class="example-link" href="rotated-tick-labels.html">Rotated Labels and Font Styling</a></div>
174 
           <div class="example-link"><a class="example-link" href="smoothedLine.html">Smoothed Lines</a></div>
175 
           <div class="example-link"><a class="example-link" href="bar-charts.html">Vertical and Horizontal Bar Charts</a></div>
176 
           <div class="example-link"><a class="example-link" href="waterfall.html">Waterfall Charts</a></div>
177 
           <div class="example-link"><a class="example-link" href="waterfall2.html">Waterfall Charts 2</a></div>
178 
           <div class="example-link"><a class="example-link" href="zoomOptions.html">Zoom Options</a></div>
179 
           <div class="example-link"><a class="example-link" href="zoomProxy.html">Zoom Proxy - Control one plot from another</a></div>
180 
           <div class="example-link"><a class="example-link" href="zoom1.html">Zooming</a></div>
181 
           <div class="example-link"><a class="example-link" href="dateAxisLogAxisZooming.html">Zooming with Date and Log Axes</a></div>
182 
 
183 
         </div>
184 
               </div>
185 
    </div>
186 
    <script type="text/javascript" src="example.min.js"></script>
187 
 
188 
</body>
189 
 
190 
 
191 
</html>