I am developing a website for a mobile using jquery. where i haave to use charts like Bar, pie, line etc. as this is been achhieved through Javascript. i have imported all the charts which i needed. but i have to align these charts one by one in a vertical line. so please help me to attain this. and following is my code. i have also fiddled it but i didnt get the complete output. http://jsfiddle.net/2VPUX/1/
<!doctype html>
<script src="http://code.shutterstock.com/rickshaw/vendor/d3.v2.js"></script>
<script src="http://code.shutterstock.com/rickshaw/rickshaw.min.js"></script>
Bar Graph
<div id="chart"></div>
<script>
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 400,
height: 850,
renderer: 'bar',
series: [ {
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
color: 'Black'
} ]
} );
graph.render();
</script>
<div id="chart" align="left"></div>
<script>
var graph = new Rickshaw.Graph({
element: document.querySelector("#chart"),
width: 400,
height: 850,
renderer: 'line',
series: [{
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
color: 'Red'
}, {
data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 37 }, { x: 3, y: 15 }, { x: 4, y: 16 } ],
color: 'Black'
}]
});
graph.render();
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Vehicle Sales', 'Per Year'],
['Cars', 15],
['Bus', 12],
['Lorry', 10],
['Two Wheeler', 45],
['Others', 18]
]);
var options = {
title: 'Pie Chart'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" align="left" style="width: 900px; height: 600px; float: left"> </div>
</body>
<div id="chart" align="left"></div>
<script>
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 435,
height: 200,
renderer: 'area',
stroke: true,
series: [ {
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
color: 'Maroon'
} ]
} );
graph.render();
</script>
<div id="chart"></div>
<script>
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 1000,
height: 85,
renderer: 'scatterplot',
stroke: true,
padding: { top: 0.05, left: 0.05, right: 0.05 },
series: [ {
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 }, { x: 5, y: 40 }, { x: 6, y: 49 }, { x: 7, y: 38 }, { x: 8, y: 30 }, { x: 9, y: 32} ],
color: 'Black'
} ]
} );
graph.render();
</script>
I have to align these charts one by one in a vertical line
#container { display: block; }
<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg"> <rect x="25" y="15" height="15" width="15" style="fill:red;"/> <rect x="25" y="45" height="15" width="15" style="fill:black;"/> <rect x="25" y="75" height="15" width="15" style="fill:green;"/> </svg>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.