This example uses d3, miso.dataset & rickshaw to build a stacked graph.
The google spreadsheet utilized in the example is here:
The data demonstrates types of industries and the number of sick permits they were issued per year, from 2006-2009.
The code is running in this jsFiddle.
| var ds = new Miso.Dataset({ | |
| importer : Miso.Dataset.Importers.GoogleSpreadsheet, | |
| parser : Miso.Dataset.Parsers.GoogleSpreadsheet, | |
| key : "0AhXjL0gsqM_zdDRsX1A2aHZHZzB0RG1qWE5VUFNwcGc", | |
| worksheet : "1" | |
| }); | |
| ds.fetch({ | |
| success: function() { | |
| // get years | |
| var years = [2006,2007,2008,2009]; | |
| var tipo = {}; | |
| var yVals = 'Tasa de órdenes'; | |
| ds.each(function(row) { | |
| // get the appropriate value for the y axis | |
| // and build the series | |
| tipo[row['Tipo de patrono']] = tipo[row['Tipo de patrono']] || []; | |
| // which year are we looking at? what position should it be in? | |
| var yearIndex = years.indexOf(row['año']); | |
| // build up the series | |
| tipo[row['Tipo de patrono']][yearIndex] = | |
| { x : row['año'], y : row[yVals] }; | |
| }); | |
| // convert data to be array of series | |
| var series = [], i = 0; | |
| var colorScale = d3.scale.category10(); | |
| for(t in tipo) { | |
| series.push({ | |
| data : tipo[t], | |
| color: colorScale(i++), | |
| name : t | |
| }); | |
| } | |
| // now make a stacked graph. | |
| var graph = new Rickshaw.Graph( { | |
| element: document.querySelector("#chart"), | |
| renderer: 'area', | |
| stroke: true, | |
| series: series | |
| } ); | |
| graph.render(); | |
| // make an x axis with the years | |
| var xAxis = new Rickshaw.Graph.Axis.X({ | |
| graph: graph, | |
| ticks: 4 | |
| }); | |
| xAxis.render(); | |
| // add hover details | |
| var hoverDetail = new Rickshaw.Graph.HoverDetail( { | |
| graph: graph, | |
| xFormatter: function(x) { return x; }, | |
| formatter: function(series, x, y) { | |
| var swatch = '<span class="detail_swatch" style="background-color: ' + | |
| series.color + | |
| '"></span>'; | |
| var content = swatch + series.name + ": " + parseInt(y) + '<br>'; | |
| return content; | |
| } | |
| } ); | |
| } | |
| }); |
| <div id="chart"></div> |
| .rickshaw_graph .detail { | |
| pointer-events: none; | |
| position: absolute; | |
| top: 0; | |
| z-index: 2; | |
| background: rgba(0, 0, 0, 0.1); | |
| bottom: 0; | |
| width: 1px; | |
| transition: opacity 0.25s linear; | |
| -moz-transition: opacity 0.25s linear; | |
| -o-transition: opacity 0.25s linear; | |
| -webkit-transition: opacity 0.25s linear; | |
| } | |
| .rickshaw_graph .detail.inactive { | |
| opacity: 0; | |
| } | |
| .rickshaw_graph .detail .item.active { | |
| opacity: 1; | |
| } | |
| .rickshaw_graph .detail .x_label { | |
| font-family: Arial, sans-serif; | |
| border-radius: 3px; | |
| padding: 6px; | |
| opacity: 0.5; | |
| border: 1px solid #e0e0e0; | |
| font-size: 12px; | |
| position: absolute; | |
| background: white; | |
| white-space: nowrap; | |
| } | |
| .rickshaw_graph .detail .item { | |
| position: absolute; | |
| z-index: 2; | |
| border-radius: 3px; | |
| padding: 0.25em; | |
| font-size: 12px; | |
| font-family: Arial, sans-serif; | |
| opacity: 0; | |
| background: rgba(0, 0, 0, 0.4); | |
| color: white; | |
| border: 1px solid rgba(0, 0, 0, 0.4); | |
| margin-left: 1em; | |
| margin-top: -1em; | |
| white-space: nowrap; | |
| } | |
| .rickshaw_graph .detail .item.active { | |
| opacity: 1; | |
| background: rgba(0, 0, 0, 0.8); | |
| } | |
| .rickshaw_graph .detail .item:before { | |
| content: "\25c2"; | |
| position: absolute; | |
| left: -0.5em; | |
| color: rgba(0, 0, 0, 0.7); | |
| width: 0; | |
| } | |
| .rickshaw_graph .detail .dot { | |
| width: 4px; | |
| height: 4px; | |
| margin-left: -4px; | |
| margin-top: -3px; | |
| border-radius: 5px; | |
| position: absolute; | |
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.6); | |
| background: white; | |
| border-width: 2px; | |
| border-style: solid; | |
| display: none; | |
| background-clip: padding-box; | |
| } | |
| .rickshaw_graph .detail .dot.active { | |
| display: block; | |
| } | |
| /* graph */ | |
| .rickshaw_graph { | |
| position: relative; | |
| } | |
| .rickshaw_graph svg { | |
| display: block; | |
| overflow: hidden; | |
| } | |
| /* ticks */ | |
| .rickshaw_graph .x_tick { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 0px; | |
| border-left: 1px dotted rgba(0, 0, 0, 0.2); | |
| pointer-events: none; | |
| } | |
| .rickshaw_graph .x_tick .title { | |
| position: absolute; | |
| font-size: 12px; | |
| font-family: Arial, sans-serif; | |
| opacity: 0.5; | |
| white-space: nowrap; | |
| margin-left: 3px; | |
| bottom: 1px; | |
| } | |
| /* annotations */ | |
| .rickshaw_annotation_timeline { | |
| height: 1px; | |
| border-top: 1px solid #e0e0e0; | |
| margin-top: 10px; | |
| position: relative; | |
| } | |
| .rickshaw_annotation_timeline .annotation { | |
| position: absolute; | |
| height: 6px; | |
| width: 6px; | |
| margin-left: -2px; | |
| top: -3px; | |
| border-radius: 5px; | |
| background-color: rgba(0, 0, 0, 0.25); | |
| } | |
| .rickshaw_graph .annotation_line { | |
| position: absolute; | |
| top: 0; | |
| bottom: -6px; | |
| width: 0px; | |
| border-left: 2px solid rgba(0, 0, 0, 0.3); | |
| display: none; | |
| } | |
| .rickshaw_graph .annotation_line.active { | |
| display: block; | |
| } | |
| .rickshaw_graph .annotation_range { | |
| background: rgba(0, 0, 0, 0.1); | |
| display: none; | |
| position: absolute; | |
| top: 0; | |
| bottom: -6px; | |
| } | |
| .rickshaw_graph .annotation_range.active { | |
| display: block; | |
| } | |
| .rickshaw_graph .annotation_range.active.offscreen { | |
| display: none; | |
| } | |
| .rickshaw_annotation_timeline .annotation .content { | |
| background: white; | |
| color: black; | |
| opacity: 0.9; | |
| padding: 5px 5px; | |
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.8); | |
| border-radius: 3px; | |
| position: relative; | |
| z-index: 20; | |
| font-size: 12px; | |
| padding: 6px 8px 8px; | |
| top: 18px; | |
| left: -11px; | |
| width: 160px; | |
| display: none; | |
| cursor: pointer; | |
| } | |
| .rickshaw_annotation_timeline .annotation .content:before { | |
| content: "\25b2"; | |
| position: absolute; | |
| top: -11px; | |
| color: white; | |
| text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.8); | |
| } | |
| .rickshaw_annotation_timeline .annotation.active, | |
| .rickshaw_annotation_timeline .annotation:hover { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| cursor: none; | |
| } | |
| .rickshaw_annotation_timeline .annotation .content:hover { | |
| z-index: 50; | |
| } | |
| .rickshaw_annotation_timeline .annotation.active .content { | |
| display: block; | |
| } | |
| .rickshaw_annotation_timeline .annotation:hover .content { | |
| display: block; | |
| z-index: 50; | |
| } | |
| .rickshaw_graph .y_axis, | |
| .rickshaw_graph .x_axis_d3 { | |
| fill: none; | |
| } | |
| .rickshaw_graph .y_ticks .tick, | |
| .rickshaw_graph .x_ticks_d3 .tick { | |
| stroke: rgba(0, 0, 0, 0.16); | |
| stroke-width: 2px; | |
| shape-rendering: crisp-edges; | |
| pointer-events: none; | |
| } | |
| .rickshaw_graph .y_grid .tick, | |
| .rickshaw_graph .x_grid_d3 .tick { | |
| z-index: -1; | |
| stroke: rgba(0, 0, 0, 0.20); | |
| stroke-width: 1px; | |
| stroke-dasharray: 1 1; | |
| } | |
| .rickshaw_graph .y_grid path, | |
| .rickshaw_graph .x_grid_d3 path { | |
| fill: none; | |
| stroke: none; | |
| } | |
| .rickshaw_graph .y_ticks path, | |
| .rickshaw_graph .x_ticks_d3 path { | |
| fill: none; | |
| stroke: #808080; | |
| } | |
| .rickshaw_graph .y_ticks text, | |
| .rickshaw_graph .x_ticks_d3 text { | |
| opacity: 0.5; | |
| font-size: 12px; | |
| pointer-events: none; | |
| } | |
| .rickshaw_graph .x_tick.glow .title, | |
| .rickshaw_graph .y_ticks.glow text { | |
| fill: black; | |
| color: black; | |
| text-shadow: | |
| -1px 1px 0 rgba(255, 255, 255, 0.1), | |
| 1px -1px 0 rgba(255, 255, 255, 0.1), | |
| 1px 1px 0 rgba(255, 255, 255, 0.1), | |
| 0px 1px 0 rgba(255, 255, 255, 0.1), | |
| 0px -1px 0 rgba(255, 255, 255, 0.1), | |
| 1px 0px 0 rgba(255, 255, 255, 0.1), | |
| -1px 0px 0 rgba(255, 255, 255, 0.1), | |
| -1px -1px 0 rgba(255, 255, 255, 0.1); | |
| } | |
| .rickshaw_graph .x_tick.inverse .title, | |
| .rickshaw_graph .y_ticks.inverse text { | |
| fill: white; | |
| color: white; | |
| text-shadow: | |
| -1px 1px 0 rgba(0, 0, 0, 0.8), | |
| 1px -1px 0 rgba(0, 0, 0, 0.8), | |
| 1px 1px 0 rgba(0, 0, 0, 0.8), | |
| 0px 1px 0 rgba(0, 0, 0, 0.8), | |
| 0px -1px 0 rgba(0, 0, 0, 0.8), | |
| 1px 0px 0 rgba(0, 0, 0, 0.8), | |
| -1px 0px 0 rgba(0, 0, 0, 0.8), | |
| -1px -1px 0 rgba(0, 0, 0, 0.8); | |
| } | |
| .rickshaw_legend { | |
| font-family: Arial; | |
| font-size: 12px; | |
| color: white; | |
| background: #404040; | |
| display: inline-block; | |
| padding: 12px 5px; | |
| border-radius: 2px; | |
| position: relative; | |
| } | |
| .rickshaw_legend:hover { | |
| z-index: 10; | |
| } | |
| .rickshaw_legend .swatch { | |
| width: 10px; | |
| height: 10px; | |
| border: 1px solid rgba(0, 0, 0, 0.2); | |
| } | |
| .rickshaw_legend .line { | |
| clear: both; | |
| line-height: 140%; | |
| padding-right: 15px; | |
| } | |
| .rickshaw_legend .line .swatch { | |
| display: inline-block; | |
| margin-right: 3px; | |
| border-radius: 2px; | |
| } | |
| .rickshaw_legend .label { | |
| margin: 0; | |
| white-space: nowrap; | |
| display: inline; | |
| font-size: inherit; | |
| background-color: transparent; | |
| color: inherit; | |
| font-weight: normal; | |
| line-height: normal; | |
| padding: 0px; | |
| text-shadow: none; | |
| } | |
| .rickshaw_legend .action:hover { | |
| opacity: 0.6; | |
| } | |
| .rickshaw_legend .action { | |
| margin-right: 0.2em; | |
| font-size: 10px; | |
| opacity: 0.2; | |
| cursor: pointer; | |
| font-size: 14px; | |
| } | |
| .rickshaw_legend .line.disabled { | |
| opacity: 0.4; | |
| } | |
| .rickshaw_legend ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| margin: 2px; | |
| cursor: pointer; | |
| } | |
| .rickshaw_legend li { | |
| padding: 0 0 0 2px; | |
| min-width: 80px; | |
| white-space: nowrap; | |
| } | |
| .rickshaw_legend li:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-radius: 3px; | |
| } | |
| .rickshaw_legend li:active { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-radius: 3px; | |
| } |