Grafica de Barras con orientación horizontal
var Site={
// Define a dataset.
dataset1 : {
'myFirstDataset': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
'mySecondDataset': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]],
'myFourthDataset': [[0, 0.86], [1, 0.83], [2, 3], [3, 1.73]]
},
// Define options.
options1 : {
// Define a padding for the canvas node
padding: {left: 30, right: 0, top: 10, bottom: 30},
// Background color to render.
backgroundColor: '#f2f2f2',
// Use the predefined blue colorscheme.
colorScheme: 'blue',
// Render a horizontal oriented barchart.
barOrientation: 'horizontal',
// Set the labels.
xTicks: [
{v:0, label:'day 1'},
{v:1, label:'day 2'},
{v:2, label:'day 3'},
{v:3, label:'day 4'}
]
},
graph:function(){
// Instantiate a new BarCart.
var horizontal = new Plotr.BarChart('bars1',Site.options1);
// Add a dataset to it.
horizontal.addDataset(Site.dataset1);
// Render it.
horizontal.render();
// Add a legend.
horizontal.addLegend('bars1');
}
}
window.addEvent('domready',Site.graph);
Gráfica de líneas (showInSide=true)
var Site={
// Define a dataset.dataset2 : {
'January': [[0, 3], [1, 2], [2, 1.414], [3, 2.3]],
'February': [[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]],
'March': [[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]],
'April': [[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]]
},
options2 : {
// Define a padding for the canvas node
padding: {left: 30, right: 0, top: 10, bottom: 30},
// Set a custom colorScheme
colorScheme: new Hash({
'January': '#1c4a7e',
'February': '#bb5b3d',
'March': '#3a8133',
'April': '#813379'
}).obj,
showInSide:true,
// Background color to render.
backgroundColor: '#f2f2f2',
shouldFill: false,
// Set the labels.
xTicks: [
{v:0, label:'IE6'},
{v:1, label:'IE7'},
{v:2, label:'FF2'},
{v:3, label:'Opera 9'}
]
},
graph:function(){
// Instantiate a new LineCart.
var line = new Plotr.LineChart('lines1',Site.options2);
// Add a dataset to it.
line.addDataset(Site.dataset2);
// Render it.
line.render();
// Add a legend.
line.addLegend('lines1');
}
}
window.addEvent('domready',Site.graph);