2 Umsetzen von Charts
Dazu jscharts.js nach /mnt-system/htdocs/techne/js kopieren.
In /mnt-system/htdocs/techne/inc/konstanten.inc beim Haeder folgendes ergänzen:
<script type=\"text/javascript\" src=\"http://www.kramann.info/techne/js/jscharts.js\"> </script>
Beispiele
<div id="graph">Loading graph...</div>
<script type="text/javascript">
var myData = new Array([1996, 22], [1997, 36], [1998, 37], [1999, 45], [2000, 50], [2001, 55], [2002, 61], [2003, 61], [2004, 62], [2005, 66], [2006, 73]);
var myChart = new JSChart('graph', 'line');
myChart.setDataArray(myData);
myChart.setTitle('Percentage of U.S. Adults Online');
myChart.setTitleColor('#8E8E8E');
myChart.setTitleFontSize(11);
myChart.setAxisNameX('');
myChart.setAxisNameY('');
myChart.setAxisColor('#C4C4C4');
myChart.setAxisValuesColor('#343434');
myChart.setAxisPaddingLeft(100);
myChart.setAxisPaddingRight(120);
myChart.setAxisPaddingTop(50);
myChart.setAxisPaddingBottom(40);
myChart.setAxisValuesNumberX(6);
myChart.setGraphExtend(true);
myChart.setGridColor('#c2c2c2');
myChart.setLineWidth(6);
myChart.setLineColor('#9F0505');
myChart.setSize(616, 321);
myChart.draw();
</script>
|
Loading graph...
|
<div id="graphB">Loading graph...</div>
<script type="text/javascript">
var myDataB = new Array([1997, 7.80], [1998, 4.80], [1999, 6.50], [2000, 6.10], [2001, 4.40], [2002, 5.80], [2003, 4.00], [2004, 8.50], [2005, 8.90], [2006, 9.20]);
var myChartB = new JSChart('graphB', 'line');
myChartB.setDataArray(myDataB);
myChartB.setTitle('India GDP');
myChartB.setTitleColor('#8E8E8E');
myChartB.setTitleFontSize(11);
myChartB.setAxisNameX('');
myChartB.setAxisNameY('');
myChartB.setAxisColor('#8420CA');
myChartB.setAxisValuesColor('#949494');
myChartB.setAxisPaddingLeft(100);
myChartB.setAxisPaddingRight(120);
myChartB.setAxisPaddingTop(50);
myChartB.setAxisPaddingBottom(40);
myChartB.setAxisValuesDecimals(3);
myChartB.setAxisValuesNumberX(10);
myChartB.setShowXValues(false);
myChartB.setGridColor('#C5A2DE');
myChartB.setLineColor('#BBBBBB');
myChartB.setLineWidth(2);
myChartB.setFlagColor('#9D12FD');
myChartB.setFlagRadius(4);
myChartB.setTooltip([1997, 'GDP 7.80']);
myChartB.setTooltip([1998, 'GDP 4.80']);
myChartB.setTooltip([1999, 'GDP 6.50']);
myChartB.setTooltip([2000, 'GDP 6.10']);
myChartB.setTooltip([2001, 'GDP 4.40']);
myChartB.setTooltip([2002, 'GDP 5.80']);
myChartB.setTooltip([2003, 'GDP 4.00']);
myChartB.setTooltip([2004, 'GDP 8.50']);
myChartB.setTooltip([2005, 'GDP 8.90']);
myChartB.setTooltip([2006, 'GDP 9.20']);
myChartB.setLabelX([1997, '1997']);
myChartB.setLabelX([1998, '1998']);
myChartB.setLabelX([1999, '1999']);
myChartB.setLabelX([2000, '2000']);
myChartB.setLabelX([2001, '2001']);
myChartB.setLabelX([2002, '2002']);
myChartB.setLabelX([2003, '2003']);
myChartB.setLabelX([2004, '2004']);
myChartB.setLabelX([2005, '2005']);
myChartB.setLabelX([2006, '2006']);
myChartB.setSize(616, 321);
myChartB.draw();
</script>
|
Loading graph...
|
<div id="graphC">Loading graph...</div>
<script type="text/javascript">
var myChartC = new JSChart('graphC', 'line');
myChartC.setDataArray([[1, 80],[2, 40],[3, 60],[4, 65],[5, 50],[6, 50],[7, 60],[8, 80],[9, 150],[10, 100]], 'blue');
myChartC.setDataArray([[1, 100],[2, 55],[3, 80],[4, 115],[5, 80],[6, 70],[7, 30],[8, 130],[9, 160],[10, 170]], 'green');
myChartC.setDataArray([[1, 150],[2, 25],[3, 100],[4, 80],[5, 20],[6, 65],[7, 0],[8, 155],[9, 190],[10, 200]], 'gray');
myChartC.setAxisPaddingBottom(40);
myChartC.setTextPaddingBottom(10);
myChartC.setAxisValuesNumberY(5);
myChartC.setIntervalStartY(0);
myChartC.setIntervalEndY(200);
myChartC.setLabelX([2,'p1']);
myChartC.setLabelX([4,'p2']);
myChartC.setLabelX([6,'p3']);
myChartC.setLabelX([8,'p4']);
myChartC.setLabelX([10,'p5']);
myChartC.setAxisValuesNumberX(5);
myChartC.setShowXValues(false);
myChartC.setTitleColor('#454545');
myChartC.setAxisValuesColor('#454545');
myChartC.setLineColor('#A4D314', 'green');
myChartC.setLineColor('#BBBBBB', 'gray');
myChartC.setTooltip([1]);
myChartC.setTooltip([2]);
myChartC.setTooltip([3]);
myChartC.setTooltip([4]);
myChartC.setTooltip([5]);
myChartC.setTooltip([6]);
myChartC.setTooltip([7]);
myChartC.setTooltip([8]);
myChartC.setTooltip([9]);
myChartC.setTooltip([10]);
myChartC.setFlagColor('#9D16FC');
myChartC.setFlagRadius(4);
myChartC.setBackgroundImage('chart_bg.jpg');
myChartC.setSize(616, 321);
myChartC.draw();
</script>
|
Loading graph...
|
<div id="graphD">Loading graph...</div>
<script type="text/javascript">
var myDataD = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChartD = new JSChart('graphD', 'line');
myChartD.setDataArray(myDataD);
myChartD.setAxisNameFontSize(10);
myChartD.setAxisNameX('Horizontal axis values');
myChartD.setAxisNameY('Vertical axis');
myChartD.setAxisNameColor('#787878');
myChartD.setAxisValuesNumberX(6);
myChartD.setAxisValuesNumberY(5);
myChartD.setAxisValuesColor('#38a4d9');
myChartD.setAxisColor('#38a4d9');
myChartD.setLineColor('#C71112');
myChartD.setTitle('A customized chart');
myChartD.setTitleColor('#383838');
myChartD.setGraphExtend(true);
myChartD.setGridColor('#38a4d9');
myChartD.setSize(616, 321);
myChartD.setAxisPaddingLeft(140);
myChartD.setAxisPaddingRight(140);
myChartD.setAxisPaddingTop(60);
myChartD.setAxisPaddingBottom(45);
myChartD.setTextPaddingLeft(105);
myChartD.setTextPaddingBottom(12);
myChartD.setBackgroundImage('chart_bg_blue.jpg');
myChartD.draw();
</script>
|
Loading graph...
|
<div id="graphE">Loading graph...</div>
<script type="text/javascript">
var myDataE = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChartE = new JSChart('graphE', 'line');
myChartE.setDataArray(myDataE);
myChartE.setLineColor('#8D9386');
myChartE.setLineWidth(4);
myChartE.setTitleColor('#7D7D7D');
myChartE.setAxisColor('#9F0505');
myChartE.setGridColor('#a4a4a4');
myChartE.setAxisValuesColor('#333639');
myChartE.setAxisNameColor('#333639');
myChartE.setTextPaddingLeft(0);
myChartE.draw();
</script>
|
Loading graph...
|
<div id="graphF">Loading graph...</div>
<script type="text/javascript">
var myDataF = new Array(['Mar04-Mar05', 21], ['Mar05-Mar06', 28], ['Mar06-Mar07', 12], ['Mar07-Mar08', 17]);
var colors = ['#AF0202', '#EC7A00', '#FCD200', '#81C714'];
var myChartF = new JSChart('graphF', 'bar');
myChartF.setDataArray(myDataF);
myChartF.colorizeBars(colors);
myChartF.setTitle('Year-to-year growth in home broadband penetration in U.S.');
myChartF.setTitleColor('#8E8E8E');
myChartF.setAxisNameX('');
myChartF.setAxisNameY('%');
myChartF.setAxisColor('#C4C4C4');
myChartF.setAxisNameFontSize(16);
myChartF.setAxisNameColor('#999');
myChartF.setAxisValuesColor('#7E7E7E');
myChartF.setBarValuesColor('#7E7E7E');
myChartF.setAxisPaddingTop(60);
myChartF.setAxisPaddingRight(140);
myChartF.setAxisPaddingLeft(150);
myChartF.setAxisPaddingBottom(40);
myChartF.setTextPaddingLeft(105);
myChartF.setTitleFontSize(11);
myChartF.setBarBorderWidth(1);
myChartF.setBarBorderColor('#C4C4C4');
myChartF.setBarSpacingRatio(50);
myChartF.setGrid(false);
myChartF.setSize(616, 321);
myChartF.setBackgroundImage('chart_bg.jpg');
myChartF.draw();
</script>
|
Loading graph...
|
<div id="graphG">Loading graph...</div>
<script type="text/javascript">
var myDataG = new Array(['Communicate socially', 42], ['Engage in work for classes', 38], ['Be entertained', 10], ['Communicate professionally', 7], ['Not sure/Don\'t know', 2]);
var colors = ['#C40000', '#750303', '#F9ECA2', '#FA9000', '#FA5400'];
var myChartG = new JSChart('graphG', 'pie');
myChartG.setDataArray(myDataG);
myChartG.colorizePie(colors);
myChartG.setTitle('Students use the Internet most often to (%)');
myChartG.setTitleColor('#8E8E8E');
myChartG.setTitleFontSize(11);
myChartG.setTextPaddingTop(30);
myChartG.setSize(616, 321);
myChartG.setPiePosition(308, 170);
myChartG.setPieRadius(85);
myChartG.setPieUnitsColor('#555');
myChartG.setBackgroundImage('chart_bg.jpg');
myChartG.draw();
</script>
|
Loading graph...
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|