You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.2 KiB
104 lines
3.2 KiB
5 years ago
|
$(function() {
|
||
|
|
var graph = new Rickshaw.Graph( {
|
||
|
|
element: document.querySelector("#chart"),
|
||
|
|
series: [{
|
||
|
|
color: '#1ab394',
|
||
|
|
data: [
|
||
|
|
{ x: 0, y: 40 },
|
||
|
|
{ x: 1, y: 49 },
|
||
|
|
{ x: 2, y: 38 },
|
||
|
|
{ x: 3, y: 30 },
|
||
|
|
{ x: 4, y: 32 } ]
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
graph.render();
|
||
|
|
|
||
|
|
var graph2 = new Rickshaw.Graph( {
|
||
|
|
element: document.querySelector("#rickshaw_multi"),
|
||
|
|
renderer: 'area',
|
||
|
|
stroke: true,
|
||
|
|
series: [ {
|
||
|
|
data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 20 }, { x: 4, y: 16 } ],
|
||
|
|
color: '#1ab394',
|
||
|
|
stroke: '#17997f'
|
||
|
|
}, {
|
||
|
|
data: [ { x: 0, y: 22 }, { x: 1, y: 25 }, { x: 2, y: 38 }, { x: 3, y: 44 }, { x: 4, y: 46 } ],
|
||
|
|
color: '#eeeeee',
|
||
|
|
stroke: '#d7d7d7'
|
||
|
|
} ]
|
||
|
|
} );
|
||
|
|
graph2.renderer.unstack = true;
|
||
|
|
graph2.render();
|
||
|
|
|
||
|
|
var graph3 = new Rickshaw.Graph({
|
||
|
|
element: document.querySelector("#rickshaw_line"),
|
||
|
|
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: '#1ab394'
|
||
|
|
} ]
|
||
|
|
} );
|
||
|
|
graph3.render();
|
||
|
|
|
||
|
|
var graph4 = new Rickshaw.Graph({
|
||
|
|
element: document.querySelector("#rickshaw_multi_line"),
|
||
|
|
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: '#1ab394'
|
||
|
|
}, {
|
||
|
|
data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 } ],
|
||
|
|
color: '#d7d7d7'
|
||
|
|
}]
|
||
|
|
});
|
||
|
|
graph4.render();
|
||
|
|
|
||
|
|
var graph5 = new Rickshaw.Graph( {
|
||
|
|
element: document.querySelector("#rickshaw_bars"),
|
||
|
|
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: '#1ab394'
|
||
|
|
} ]
|
||
|
|
} );
|
||
|
|
graph5.render();
|
||
|
|
|
||
|
|
var graph6 = new Rickshaw.Graph( {
|
||
|
|
element: document.querySelector("#rickshaw_bars_stacked"),
|
||
|
|
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: '#1ab394'
|
||
|
|
}, {
|
||
|
|
data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, { x: 2, y: 19 }, { x: 3, y: 15 }, { x: 4, y: 16 } ],
|
||
|
|
color: '#d7d7d7'
|
||
|
|
} ]
|
||
|
|
} );
|
||
|
|
graph6.render();
|
||
|
|
|
||
|
|
var graph7 = new Rickshaw.Graph( {
|
||
|
|
element: document.querySelector("#rickshaw_scatterplot"),
|
||
|
|
renderer: 'scatterplot',
|
||
|
|
stroke: true,
|
||
|
|
padding: { top: 0.05, left: 0.05, right: 0.05 },
|
||
|
|
series: [ {
|
||
|
|
data: [ { x: 0, y: 15 },
|
||
|
|
{ x: 1, y: 18 },
|
||
|
|
{ x: 2, y: 10 },
|
||
|
|
{ x: 3, y: 12 },
|
||
|
|
{ x: 4, y: 15 },
|
||
|
|
{ x: 5, y: 24 },
|
||
|
|
{ x: 6, y: 28 },
|
||
|
|
{ x: 7, y: 31 },
|
||
|
|
{ x: 8, y: 22 },
|
||
|
|
{ x: 9, y: 18 },
|
||
|
|
{ x: 10, y: 16 }
|
||
|
|
],
|
||
|
|
color: '#1ab394'
|
||
|
|
} ]
|
||
|
|
} );
|
||
|
|
graph7.render();
|
||
|
|
|
||
|
|
});
|