var totalData = [ {year:2001,television:74,newspapers:45,radio:18,internet:13}, {year:2002,television:82,newspapers:42,radio:21,internet:14}, {year:2003,television:80,newspapers:50,radio:18,internet:20}, {year:2004,television:74,newspapers:46,radio:21,internet:24}, {year:2005,television:73,newspapers:36,radio:16,internet:20}, {year:2006,television:72,newspapers:36,radio:14,internet:24}, {year:2007,television:74,newspapers:34,radio:13,internet:24}, {year:2008,television:70,newspapers:35,radio:18,internet:40}, {year:2009,television:70,newspapers:32,radio:17,internet:35}, {year:2010,television:66,newspapers:31,radio:16,internet:41}, {year:2011,television:66,newspapers:31,radio:19,internet:43}]; var age1829Data = [ {year:2001,television:72,newspapers:36,radio:21,internet:18}, {year:2002,television:80,newspapers:32,radio:24,internet:23}, {year:2003,television:74,newspapers:36,radio:18,internet:35}, {year:2004,television:66,newspapers:30,radio:25,internet:38}, {year:2005,television:62,newspapers:29,radio:21,internet:25}, {year:2006,television:62,newspapers:29,radio:16,internet:32}, {year:2007,television:68,newspapers:23,radio:13,internet:34}, {year:2008,television:59,newspapers:28,radio:18,internet:59}, {year:2009,television:56,newspapers:25,radio:17,internet:56}, {year:2010,television:52,newspapers:21,radio:15,internet:65}, {year:2011,television:51,newspapers:24,radio:16,internet:65}]; var age3049Data = [ {year:2001,television:70,newspapers:43,radio:23,internet:16}, {year:2002,television:77,newspapers:38,radio:26,internet:16}, {year:2003,television:79,newspapers:48,radio:22,internet:23}, {year:2004,television:74,newspapers:42,radio:23,internet:26}, {year:2005,television:70,newspapers:30,radio:17,internet:26}, {year:2006,television:68,newspapers:31,radio:16,internet:33}, {year:2007,television:71,newspapers:26,radio:15,internet:32}, {year:2008,television:68,newspapers:28,radio:19,internet:47}, {year:2009,television:67,newspapers:25,radio:20,internet:42}, {year:2010,television:63,newspapers:22,radio:19,internet:48}, {year:2011,television:61,newspapers:25,radio:21,internet:50}]; var age5064Data = [ {year:2001,television:76,newspapers:50,radio:14,internet:11}, {year:2002,television:86,newspapers:48,radio:17,internet:10}, {year:2003,television:81,newspapers:57,radio:19,internet:14}, {year:2004,television:78,newspapers:53,radio:21,internet:19}, {year:2005,television:76,newspapers:42,radio:12,internet:17}, {year:2006,television:77,newspapers:40,radio:12,internet:18}, {year:2007,television:76,newspapers:41,radio:12,internet:17}, {year:2008,television:72,newspapers:41,radio:19,internet:31}, {year:2009,television:77,newspapers:37,radio:15,internet:25}, {year:2010,television:71,newspapers:38,radio:15,internet:34}, {year:2011,television:75,newspapers:33,radio:20,internet:36}]; var age65Data = [ {year:2001,television:86,newspapers:55,radio:7,internet:1}, {year:2002,television:89,newspapers:53,radio:13,internet:4}, {year:2003,television:90,newspapers:64,radio:11,internet:3}, {year:2004,television:81,newspapers:63,radio:12,internet:4}, {year:2005,television:87,newspapers:51,radio:11,internet:3}, {year:2006,television:86,newspapers:52,radio:12,internet:2}, {year:2007,television:85,newspapers:49,radio:10,internet:5}, {year:2008,television:83,newspapers:52,radio:14,internet:9}, {year:2009,television:83,newspapers:48,radio:14,internet:11}, {year:2010,television:79,newspapers:47,radio:13,internet:14}, {year:2011,television:81,newspapers:49,radio:15,internet:15}]; window.onload = function() { //CHART 1 Total Population var chart1 = new AmCharts.AmSerialChart(); chart1.dataProvider = totalData; chart1.categoryField = 'year'; chart1.marginRight = 0; chart1.marginLeft = 40; chart1.marginBottom = 30; chart1.marginTop = 20; chart1.panEventsEnabled = true; chart1.pathToImages = "http://digitalinfo.org/scripts/amcharts/javascript/images/"; var catAxis = chart1.categoryAxis; catAxis.inside = false; catAxis.gridAlpha = 0; catAxis.tickLength = 0; catAxis.autoGridCount = false; catAxis.gridCount = 5; catAxis.fontSize = 12; var valueAxis = new AmCharts.ValueAxis(); valueAxis.dashLength = 4; valueAxis.axisAlpha = 0; valueAxis.minimum = 0; valueAxis.maximum = 100; valueAxis.fontSize = 12; chart1.addValueAxis(valueAxis); var balloon = chart1.balloon; balloon.adjustBorderColor = true; balloon.color = "#000000"; balloon.borderThickness = 3; balloon.cornerRadius = 0; balloon.fillAlpha = 1; balloon.fillColor = "#FFFFFF"; balloon.pointerWidth = 7; balloon.fontSize = 11; var graph1 = new AmCharts.AmGraph(); graph1.valueField = 'television'; graph1.title = "Television"; graph1.balloonText = "Television: [[value]]%"; graph1.legendValueText = "[[value]]%"; graph1.type = 'line'; graph1.bulletSize = 8; graph1.bullet = "round"; graph1.bulletBorderThickness = 0; graph1.lineThickness = 4; graph1.lineColor = "#005e8f"; chart1.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.valueField = 'newspapers'; graph2.title = "Newspaper"; graph2.balloonText = "Newspaper: [[value]]%"; graph2.legendValueText = "[[value]]%"; graph2.type = 'line'; graph2.bulletSize = 8; graph2.bullet = "round"; graph2.bulletBorderThickness = 0; graph2.lineThickness = 4; graph2.lineColor = "#8dc548"; chart1.addGraph(graph2); var graph3 = new AmCharts.AmGraph(); graph3.valueField = 'radio'; graph3.title = "Radio"; graph3.balloonText = "Radio: [[value]]%"; graph3.legendValueText = "[[value]]%"; graph3.type = 'line'; graph3.bulletSize = 8; graph3.bullet = "round"; graph3.bulletBorderThickness = 0; graph3.lineThickness = 4; graph3.lineColor = "#999999"; chart1.addGraph(graph3); var graph4 = new AmCharts.AmGraph(); graph4.valueField = 'internet'; graph4.title = "Internet"; graph4.balloonText = "Internet: [[value]]%"; graph4.legendValueText = "[[value]]%"; graph4.type = 'line'; graph4.bulletSize = 8; graph4.bullet = "round"; graph4.bulletBorderThickness = 0; graph4.lineThickness = 4; graph4.fillAlphas = .15; graph4.lineColor = "#db8804"; chart1.addGraph(graph4); var chartCursor = new AmCharts.ChartCursor(); chartCursor.categoryBalloonDateFormat = "MM-YYYY"; chartCursor.cursorColor = "#000000"; chartCursor.cursorPosition = "middle"; chart1.addChartCursor(chartCursor); /* take out legend var legend = new AmCharts.AmLegend(); legend.marginLeft = 20; legend.marginTop = 0; legend.marginRight = 0; legend.fontSize = 10; legend.verticalGap = 20; legend.markerSize = 10; legend.markerLabelGap = 10; legend.textClickEnabled = false; legend.rollOverColor = "#000000"; legend.spacing = 0; legend.valueWidth = 40; chart1.addLegend(legend); */ //CHART 2 18-29 var chart2 = new AmCharts.AmSerialChart(); chart2.dataProvider = age1829Data; chart2.categoryField = 'year'; chart2.marginRight = 0; chart2.marginLeft = 0; chart2.marginBottom = 30; chart2.marginTop = 10; chart2.panEventsEnabled = true; chart2.pathToImages = "http://digitalinfo.org/scripts/amcharts/javascript/images/"; var catAxis = chart2.categoryAxis; catAxis.inside = false; catAxis.gridAlpha = 0; catAxis.tickLength = 0; catAxis.autoGridCount = false; catAxis.gridCount = 5; catAxis.fontSize = 10; var valueAxis = new AmCharts.ValueAxis(); valueAxis.dashLength = 4; valueAxis.axisAlpha = 0; valueAxis.minimum = 0; valueAxis.maximum = 100; valueAxis.fontSize = 9; chart2.addValueAxis(valueAxis); var balloon = chart2.balloon; balloon.adjustBorderColor = true; balloon.color = "#000000"; balloon.borderThickness = 3; balloon.cornerRadius = 0; balloon.fillAlpha = 1; balloon.fillColor = "#FFFFFF"; balloon.pointerWidth = 7; balloon.fontSize = 10; var graph1 = new AmCharts.AmGraph(); graph1.valueField = 'television'; graph1.title = "Television"; graph1.balloonText = "Television: [[value]]%"; graph1.legendValueText = "[[value]]%"; graph1.type = 'line'; graph1.bulletSize = 8; graph1.bullet = "round"; graph1.bulletBorderThickness = 0; graph1.lineThickness = 4; graph1.lineColor = "#005e8f"; chart2.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.valueField = 'newspapers'; graph2.title = "Newspaper"; graph2.balloonText = "Newspaper: [[value]]%"; graph2.legendValueText = "[[value]]%"; graph2.type = 'line'; graph2.bulletSize = 8; graph2.bullet = "round"; graph2.bulletBorderThickness = 0; graph2.lineThickness = 4; graph2.lineColor = "#8dc548"; chart2.addGraph(graph2); var graph3 = new AmCharts.AmGraph(); graph3.valueField = 'radio'; graph3.title = "Radio"; graph3.balloonText = "Radio: [[value]]%"; graph3.legendValueText = "[[value]]%"; graph3.type = 'line'; graph3.bulletSize = 8; graph3.bullet = "round"; graph3.bulletBorderThickness = 0; graph3.lineThickness = 4; graph3.lineColor = "#999999"; chart2.addGraph(graph3); var graph4 = new AmCharts.AmGraph(); graph4.valueField = 'internet'; graph4.title = "Internet"; graph4.balloonText = "Internet: [[value]]%"; graph4.legendValueText = "[[value]]%"; graph4.type = 'line'; graph4.bulletSize = 8; graph4.bullet = "round"; graph4.bulletBorderThickness = 0; graph4.lineThickness = 4; graph4.lineColor = "#db8804"; graph4.fillAlphas = .15; chart2.addGraph(graph4); var chartCursor = new AmCharts.ChartCursor(); chartCursor.categoryBalloonDateFormat = "MM-YYYY"; chartCursor.cursorColor = "#000000"; chartCursor.cursorPosition = "middle"; chart2.addChartCursor(chartCursor); /* var legend = new AmCharts.AmLegend(); legend.marginLeft = 20; legend.marginTop = 0; legend.marginRight = 0; legend.fontSize = 10; legend.verticalGap = 20; legend.markerSize = 10; legend.markerLabelGap = 10; legend.textClickEnabled = false; legend.rollOverColor = "#000000"; legend.spacing = 0; legend.valueWidth = 40; chart2.addLegend(legend); */ //CHART 3 30-49 var chart3 = new AmCharts.AmSerialChart(); chart3.dataProvider = age3049Data; chart3.categoryField = 'year'; chart3.marginRight = 0; chart3.marginLeft = 50; chart3.marginBottom = 30; chart3.marginTop = 10; chart3.panEventsEnabled = true; chart3.pathToImages = "http://digitalinfo.org/scripts/amcharts/javascript/images/"; var catAxis = chart3.categoryAxis; catAxis.inside = false; catAxis.gridAlpha = 0; catAxis.tickLength = 0; catAxis.autoGridCount = false; catAxis.gridCount = 5; catAxis.fontSize = 10; var valueAxis = new AmCharts.ValueAxis(); valueAxis.dashLength = 4; valueAxis.axisAlpha = 0; valueAxis.minimum = 0; valueAxis.maximum = 100; valueAxis.fontSize = 10; valueAxis.offset = 20; chart3.addValueAxis(valueAxis); var balloon = chart3.balloon; balloon.adjustBorderColor = true; balloon.color = "#000000"; balloon.borderThickness = 3; balloon.cornerRadius = 0; balloon.fillAlpha = 1; balloon.fillColor = "#FFFFFF"; balloon.pointerWidth = 7; balloon.fontSize = 10; var graph1 = new AmCharts.AmGraph(); graph1.valueField = 'television'; graph1.title = "Television"; graph1.balloonText = "Television: [[value]]%"; graph1.legendValueText = "[[value]]%"; graph1.type = 'line'; graph1.bulletSize = 8; graph1.bullet = "round"; graph1.bulletBorderThickness = 0; graph1.lineThickness = 4; graph1.lineColor = "#005e8f"; chart3.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.valueField = 'newspapers'; graph2.title = "Newspaper"; graph2.balloonText = "Newspaper: [[value]]%"; graph2.legendValueText = "[[value]]%"; graph2.type = 'line'; graph2.bulletSize = 8; graph2.bullet = "round"; graph2.bulletBorderThickness = 0; graph2.lineThickness = 4; graph2.lineColor = "#8dc548"; chart3.addGraph(graph2); var graph3 = new AmCharts.AmGraph(); graph3.valueField = 'radio'; graph3.title = "Radio"; graph3.balloonText = "Radio: [[value]]%"; graph3.legendValueText = "[[value]]%"; graph3.type = 'line'; graph3.bulletSize = 8; graph3.bullet = "round"; graph3.bulletBorderThickness = 0; graph3.lineThickness = 4; graph3.lineColor = "#999999"; chart3.addGraph(graph3); var graph4 = new AmCharts.AmGraph(); graph4.valueField = 'internet'; graph4.title = "Internet"; graph4.balloonText = "Internet: [[value]]%"; graph4.legendValueText = "[[value]]%"; graph4.type = 'line'; graph4.bulletSize = 8; graph4.bullet = "round"; graph4.bulletBorderThickness = 0; graph4.lineThickness = 4; graph4.lineColor = "#db8804"; graph4.fillAlphas = .15; chart3.addGraph(graph4); var chartCursor = new AmCharts.ChartCursor(); chartCursor.categoryBalloonDateFormat = "MM-YYYY"; chartCursor.cursorColor = "#000000"; chartCursor.cursorPosition = "middle"; chart3.addChartCursor(chartCursor); /* var legend = new AmCharts.AmLegend(); legend.marginLeft = 20; legend.marginTop = 0; legend.marginRight = 0; legend.fontSize = 10; legend.verticalGap = 20; legend.markerSize = 10; legend.markerLabelGap = 10; legend.textClickEnabled = false; legend.rollOverColor = "#000000"; legend.spacing = 0; legend.valueWidth = 40; chart3.addLegend(legend); */ //CHART 4 50-64 var chart4 = new AmCharts.AmSerialChart(); chart4.dataProvider = age5064Data; chart4.categoryField = 'year'; chart4.marginRight = 0; chart4.marginLeft = 0; chart4.marginBottom = 30; chart4.marginTop = 10; chart4.panEventsEnabled = true; chart4.pathToImages = "http://digitalinfo.org/scripts/amcharts/javascript/images/"; var catAxis = chart4.categoryAxis; catAxis.inside = false; catAxis.gridAlpha = 0; catAxis.tickLength = 0; catAxis.autoGridCount = false; catAxis.gridCount = 5; catAxis.fontSize = 10; var valueAxis = new AmCharts.ValueAxis(); valueAxis.dashLength = 4; valueAxis.axisAlpha = 0; valueAxis.minimum = 0; valueAxis.maximum = 100; valueAxis.fontSize = 9; chart4.addValueAxis(valueAxis); var balloon = chart4.balloon; balloon.adjustBorderColor = true; balloon.color = "#000000"; balloon.borderThickness = 3; balloon.cornerRadius = 0; balloon.fillAlpha = 1; balloon.fillColor = "#FFFFFF"; balloon.pointerWidth = 7; balloon.fontSize = 10; var graph1 = new AmCharts.AmGraph(); graph1.valueField = 'television'; graph1.title = "Television"; graph1.balloonText = "Television: [[value]]%"; graph1.legendValueText = "[[value]]%"; graph1.type = 'line'; graph1.bulletSize = 8; graph1.bullet = "round"; graph1.bulletBorderThickness = 0; graph1.lineThickness = 4; graph1.lineColor = "#005e8f"; chart4.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.valueField = 'newspapers'; graph2.title = "Newspaper"; graph2.balloonText = "Newspaper: [[value]]%"; graph2.legendValueText = "[[value]]%"; graph2.type = 'line'; graph2.bulletSize = 8; graph2.bullet = "round"; graph2.bulletBorderThickness = 0; graph2.lineThickness = 4; graph2.lineColor = "#8dc548"; chart4.addGraph(graph2); var graph3 = new AmCharts.AmGraph(); graph3.valueField = 'radio'; graph3.title = "Radio"; graph3.balloonText = "Radio: [[value]]%"; graph3.legendValueText = "[[value]]%"; graph3.type = 'line'; graph3.bulletSize = 8; graph3.bullet = "round"; graph3.bulletBorderThickness = 0; graph3.lineThickness = 4; graph3.lineColor = "#999999"; chart4.addGraph(graph3); var graph4 = new AmCharts.AmGraph(); graph4.valueField = 'internet'; graph4.title = "Internet"; graph4.balloonText = "Internet: [[value]]%"; graph4.legendValueText = "[[value]]%"; graph4.type = 'line'; graph4.bulletSize = 8; graph4.bullet = "round"; graph4.bulletBorderThickness = 0; graph4.lineThickness = 4; graph4.lineColor = "#db8804"; graph4.fillAlphas = .15; chart4.addGraph(graph4); var chartCursor = new AmCharts.ChartCursor(); chartCursor.categoryBalloonDateFormat = "MM-YYYY"; chartCursor.cursorColor = "#000000"; chartCursor.cursorPosition = "middle"; chart4.addChartCursor(chartCursor); /* var legend = new AmCharts.AmLegend(); legend.marginLeft = 20; legend.marginTop = 0; legend.marginRight = 0; legend.fontSize = 10; legend.verticalGap = 20; legend.markerSize = 10; legend.markerLabelGap = 10; legend.textClickEnabled = false; legend.rollOverColor = "#000000"; legend.spacing = 0; legend.valueWidth = 40; chart4.addLegend(legend); */ //CHART 5 65+ var chart5 = new AmCharts.AmSerialChart(); chart5.dataProvider = age65Data; chart5.categoryField = 'year'; chart5.marginRight = 0; chart5.marginLeft = 50; chart5.marginBottom = 30; chart5.marginTop = 10; chart5.panEventsEnabled = true; chart5.pathToImages = "http://digitalinfo.org/scripts/amcharts/javascript/images/"; var catAxis = chart5.categoryAxis; catAxis.inside = false; catAxis.gridAlpha = 0; catAxis.tickLength = 0; catAxis.autoGridCount = false; catAxis.gridCount = 5; catAxis.fontSize = 10; var valueAxis = new AmCharts.ValueAxis(); valueAxis.dashLength = 4; valueAxis.axisAlpha = 0; valueAxis.minimum = 0; valueAxis.maximum = 100; valueAxis.fontSize = 10; valueAxis.offset = 20; chart5.addValueAxis(valueAxis); var balloon = chart5.balloon; balloon.adjustBorderColor = true; balloon.color = "#000000"; balloon.borderThickness = 3; balloon.cornerRadius = 0; balloon.fillAlpha = 1; balloon.fillColor = "#FFFFFF"; balloon.pointerWidth = 7; balloon.fontSize = 10; var graph1 = new AmCharts.AmGraph(); graph1.valueField = 'television'; graph1.title = "Television"; graph1.balloonText = "Television: [[value]]%"; graph1.legendValueText = "[[value]]%"; graph1.type = 'line'; graph1.bulletSize = 8; graph1.bullet = "round"; graph1.bulletBorderThickness = 0; graph1.lineThickness = 4; graph1.lineColor = "#005e8f"; chart5.addGraph(graph1); var graph2 = new AmCharts.AmGraph(); graph2.valueField = 'newspapers'; graph2.title = "Newspaper"; graph2.balloonText = "Newspaper: [[value]]%"; graph2.legendValueText = "[[value]]%"; graph2.type = 'line'; graph2.bulletSize = 8; graph2.bullet = "round"; graph2.bulletBorderThickness = 0; graph2.lineThickness = 4; graph2.lineColor = "#8dc548"; chart5.addGraph(graph2); var graph3 = new AmCharts.AmGraph(); graph3.valueField = 'radio'; graph3.title = "Radio"; graph3.balloonText = "Radio: [[value]]%"; graph3.legendValueText = "[[value]]%"; graph3.type = 'line'; graph3.bulletSize = 8; graph3.bullet = "round"; graph3.bulletBorderThickness = 0; graph3.lineThickness = 4; graph3.lineColor = "#999999"; chart5.addGraph(graph3); var graph4 = new AmCharts.AmGraph(); graph4.valueField = 'internet'; graph4.title = "Internet"; graph4.balloonText = "Internet: [[value]]%"; graph4.legendValueText = "[[value]]%"; graph4.type = 'line'; graph4.bulletSize = 8; graph4.bullet = "round"; graph4.bulletBorderThickness = 0; graph4.lineThickness = 4; graph4.lineColor = "#db8804"; graph4.fillAlphas = .15; chart5.addGraph(graph4); var chartCursor = new AmCharts.ChartCursor(); chartCursor.categoryBalloonDateFormat = "MM-YYYY"; chartCursor.cursorColor = "#000000"; chartCursor.cursorPosition = "middle"; chart5.addChartCursor(chartCursor); /* var legend = new AmCharts.AmLegend(); legend.marginLeft = 20; legend.marginTop = 0; legend.marginRight = 0; legend.fontSize = 10; legend.verticalGap = 20; legend.markerSize = 10; legend.markerLabelGap = 10; legend.textClickEnabled = false; legend.rollOverColor = "#000000"; legend.spacing = 0; legend.valueWidth = 40; chart5.addLegend(legend); */ chart1.write('container1'); chart2.write('container2'); chart3.write('container3'); chart4.write('container4'); chart5.write('container5'); }