logo
down
shadow

JQPlot trouble to render vertical stacked bar and horizontal legend


JQPlot trouble to render vertical stacked bar and horizontal legend

Content Index :

JQPlot trouble to render vertical stacked bar and horizontal legend
Tag : javascript , By : gcomstock
Date : November 24 2020, 05:44 AM


Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

how to change label on jqplot stacked horizontal bar chart


Tag : jquery , By : Jet Thompson
Date : March 29 2020, 07:55 AM
wish helps you Use the ticks option (2nd example on this page):
perc_data = [[[6, "1"]], [[92, "1"]], [[1, "1"]], [[1, "1"]]];
ticks = ["My Label"];

series_array = [ { label:'Mud', color:"#ccaa00"}, { label:"Sand", color:"#ffeecc"}, { label:"Gravel", color:"#dddddd"}, { label:"Rock", color:"#664400"} ];

var perc_chart = $.jqplot('chart1', perc_data, {
    stackSeries: true,
    seriesDefaults: {
        renderer:$.jqplot.BarRenderer,
        shadowAngle: 135,
        rendererOptions: {  barWidth: 25,
                            barDirection: 'horizontal',
        }
    },
    series: series_array,
    axes: {
        yaxis: {
            renderer: $.jqplot.CategoryAxisRenderer,
            rendererOptions: {  tickRenderer: $.jqplot.AxisTickRenderer, 
                                tickOptions: {  mark: null,
                                                fontSize: 12
                                             }
            },
            ticks: ticks
        },
        xaxis: {
            min: 0,
            max: 100,
            numberTicks: 6
        }
    },
    grid: {
        drawGridlines: false,
        drawBorder: false,
        shadow: false
    }
});

JQPlot - Stacked Horizontal Bar Chart - No Bars When Stacked


Tag : development , By : Waynew
Date : March 29 2020, 07:55 AM
this one helps. I found a way to fix my problem (not entirely, but sufficiently for my need). This issue only occurs when I use custom lables pulled from somewhere else; if I use generic "1,2,3,4,etc." the graph stacks properly and shows data. Ideally I would have custom lables, but I can just put a simple table beside the graph to act as the axis labels.

jqPlot - How to add vertical scrollbar to legend box containing many legend items


Tag : css , By : Chris Tattum
Date : March 29 2020, 07:55 AM
To fix this issue I found some people on the web mentioned some issues with overflow on tables in IE, but I couldn't get a needed answer.
Therefore, my approach was to wrap the table into another element. I wrap it in a div and set appropriate values on it and it works cross browser :)

jqPlot - Horizontal legend


Tag : jquery , By : DarrenBeck
Date : March 29 2020, 07:55 AM
around this issue This is very easy to achieve using the EnhancedLegendRenderer plugin. Just include the plugin and use options similar to this.
legend:{
    renderer: $.jqplot.EnhancedLegendRenderer,
    show: true,
    rendererOptions: {
        numberRows: 1
    }
}

stacked bar chart legend issue jqplot


Tag : javascript , By : user183442
Date : March 29 2020, 07:55 AM
seems to work fine You have not set the renderer for legend. Set renderer to $.jqplot.EnhancedLegendRenderer
So the legend object would look like this:
legend:{
    renderer: $.jqplot.EnhancedLegendRenderer,
    show:true, 
    placement:'outside',
    rendererOptions: {
        numberRows: 2,
        numberColumns: 2
    }, 
    location:'s',
    marginTop: '40px',
    border:'none'
}
Related Posts Related QUESTIONS :
  • Capturing TAB key in text box
  • How to set CSS background color of HTML using JavaScript
  • How can I make the browser see CSS and Javascript changes?
  • redux how to use state
  • All data in the db is lost when closing a express based node js server
  • How to convert javascript code for Angular
  • XPath select on child nodes
  • Idle event on mouse move - how to stop script permanently on mouse move
  • Why do I get logic is not defined in this code
  • When I enter a number in the input, the first function starts
  • ES6 imports and node_modules hell
  • How to get css selector of clicked-on element?
  • How to auto input MySQL data (input column 1 data to auto input column 2 data with same column) in php?
  • Appending to Datalist Via Javascript
  • Customizing Material-UI Components with Styled-Components
  • Populate elements with class name using Javascript
  • How to execute promises in batches (first resolving 10, then next 10 and so on)
  • Maximo JS automation script: "importPackage" is not defined
  • How to surround selected text inside textarea with <em> on key combination CTRL+i?
  • Your configured registry does not support audit requests ~ On npm audit
  • What's the Angular equivalent of Vue <slot/>?
  • Iconify icon not updating when "data-icon" set with setAttribute()
  • Javascript newbie stuck with XMLHttpRequest return data
  • How to add obj to to state in my example Redux React
  • Loading "grunt-karma.js" tasks...ERROR >> SyntaxError: Unexpected identifier
  • Why do I get log is not defined
  • get the multiple index of the same string
  • How can I iterate over an Array object by using For IN or FOR OF
  • Launch local executable from web browser
  • How to prepare array of json objects to d3 hierarchical tree structure
  • VueJS - event emitted - show HTML before other calculations
  • Export SASS/SCSS variables to Javascript without exporting them to CSS
  • How to attach an event handler only once continuously
  • How to make button open a link in new tab in JavaScript?
  • Find range from the javascript object
  • How can I use my jQuery code as JavaScript?
  • How to show 5 images in a 2 row slider with bxslider
  • How to convert stream into variables in typescript
  • Three.js custom shader error on Chrome GL_INVALID_OPERATION: Active draw buffers with missing fragment shader outputs
  • My JavaScript doesn't work. How can I solve this problem?
  • Why is this async function is running synchronously?
  • Get updated variable from within react hook before return
  • I want to show all image preview but whenever I upload a new one the old one is gone
  • Would I be able to give access to specific electron APIs safely?
  • Why several clicks fire for each instance of a Class?
  • cant grab value from div using attr()
  • Make web service not accessible by browser?
  • Select DOM elements within template
  • How to customize angular ui-grid row background color?
  • Binding data in two respective $scope in AngularJS, how?
  • react put some props after import class
  • Variable is distributed among same components
  • switch class in jQuery/JavaScript for active/inactive state
  • How To Track Outbound Clicks Using Javascript
  • How to get total seconds elapsed since the beginning of the month?
  • Protractor: Stale element reference at "browser.wait(EC.visibilityOf(confDial), FIFTY_SECONDS);"
  • Access to an array inside an object
  • Reseting an JavaScript Interval with different value?
  • Learning Angular for the first time - version 2 or 4?
  • Rendering RSS feed (XML) in React with jquery, why do object values parsed from the feed seem empty?
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com