88
rated 0 times
[
93]
[
5]
/ answers: 1 / hits: 19445
/ 12 Years ago, thu, july 12, 2012, 12:00:00
I am creating a graph in HTML. I am using the API amCharts, but the problem is that it shows the text amchart within the graph.
How can I remove that text so that it may look OK?
<html>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8>
<title>Charts</title>
<link rel=stylesheet href=style.css type=text/css>
<script src=amcharts.js type=text/javascript></script>
<script type=text/javascript>
var chart;
var chartData = [{
country: USA,
visits: 400,
color: #FF0F00
}, {
country: China,
visits: 380,
color: #FF6600
}, {
country: Japan,
visits: 360,
color: #FF9E01
}, {
country: Germany,
visits: 340,
color: #FCD202
}, {
country: UK,
visits: 320,
color: #F8FF01
}, {
country: France,
visits: 300,
color: #B0DE09
}, {
country: India,
visits: 240,
color: #04D215
}, {
country: Spain,
visits: 200,
color: #0D8ECF
}, {
country: Netherlands,
visits: 140,
color: #0D52D1
}, {
country: Russia,
visits: 100,
color: #2A0CD0
}, {
country: South Korea,
visits: 80,
color: #8A0CCF
}, {
country: Canada,
visits: 20,
color: #CD0D74
}];
AmCharts.ready(function () {
chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = country;
chart.startDuration = 1;
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelRotation = 45; // this line makes category values to be rotated
categoryAxis.gridAlpha = 0;
categoryAxis.fillAlpha = 1;
categoryAxis.fillColor = #FAFAFA;
categoryAxis.gridPosition = start;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.dashLength = 5;
valueAxis.title = Visitors from country
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPH
var graph = new AmCharts.AmGraph();
graph.valueField = visits;
graph.colorField = color;
graph.balloonText = [[category]]: [[value]];
graph.type = column;
graph.lineAlpha = 0;
graph.fillAlphas = 1;
chart.addGraph(graph);
// WRITE
chart.write(chartdiv);
});
</script>
</head>
<body>
<div id=chartdiv style=width: 600px; height: 500px;></div>
</body>
</html>
More From » html
