morris.js

I have a situation where I am trying to use MorrisJS charts inside two different bootstrap tabs . The chart loads fine in the first (default) tab but when I click into the second tab the chart doesn't load properly at all. It is very odd as I am copying and pasting the exact same chart to be in the first and second tab but the second one isn't loading for me. Here is a link to a jsfiddle I setup. https://jsfiddle.net/phz0e68d/5/ Here is the code: HTML: <div> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home"

Why am I getting an exception Uncaught Error: Graph container element not found when using morris.js ? Gene Bo Solution: Put the javascript after the morris.js div From this post from tiraeth: https://github.com/morrisjs/morris.js/issues/137 Anatole Nkwadjo if don' t use the chart on this page, you can do this: Go to the line where the exception is throwed in morris.js change it like this: before: if (this.el === null || this.el.length === 0) { return; // throw new Error("Graph placeholder not found."); } I had this issue when I was using the node.js framework. Taking out the script tags

I have 2 tabs with 1 morris.js graph in each. The Graph in the first (active) tab loads perfectly, but the graph in the second tab doesn't load (strange result in Chrome, nothing in Firefox). See jsbin: http://jsbin.com/canajije/1/edit <div class="row"> <ul class="nav nav-tabs nav-justified"> <li ><a href="#a" data-toggle="tab">Tab A</a></li> <li><a href="#b" data-toggle="tab">Tab B</a></li> </ul> <div class="tab-content col-sm-12" > <div class="tab-pane active" id="a"> <div id="tab-a" style="height:200px;width:200px;"></div> </div> <div class="tab-pane" id="b"> <div id="tab-b" style="height

I have this morris.js bar with multiple bars, i want to change width of the bars or make space between durations. From the below image is there a way to provide either more space between Feb March and April or is there a way to adjust bar widths? Here is my code Morris.Bar({ element: 'morris-chart-bar', data: [ { y: 'Feb', a: 75, b: 60, c: 5, d: 50 }, { y: 'March', a: 180, b: 220, c: 140, d: 160 }, { y: 'April', a: 300, b: 340, c: 350, d: 270 } ], xkey: 'y', ykeys: ['a', 'b', 'c', 'd'], labels: ['A', 'B', 'C', 'D'], barColors: ['#0B62A4','#f75b68','#4DA74D','#646464'], hideHover: 'auto' });

I have some charts created with ggplot2 which I would like to embed in a web application: I'd like to enhance the plots with tooltips. I've looked into several options. I'm currently experimenting with the rCharts library and, among others, dimple plots. Here is the original ggplot: Here is a first attempt to transpose this to a dimple plot: I have several issues: after formatting the y-axis with percentages, the data is altered. after formatting the x-axis to correctly render dates, too many labels are printed. I am not tied to dimple charts, so if there are other options that allow for an

I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar. I have setup a JSBIN example for the same here: When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead. JSBIN example Ruben Kazumov Piece of cake. Demo and code: <script type="text