jqplot: draw series - javascript

I want to draw some data using jqplot and I have a small issue.
The code I use is this (code on fiddle):
$.jqplot('chart1', [[202],[249],[148]], {
seriesColors : ['#ff0000', '#0f0', '#00f'],
seriesDefaults : {
renderer :$.jqplot.BarRenderer,
pointLabels : {
show : true
},
tickRenderer : $.jqplot.CanvasAxisTickRenderer,
rendererOptions : {
barDirection : 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ["some value", "other series", "third series"],
},
},
});
The graph has 3 horizontal regions, "some value", "other series" and "third series"
I need that each graph bar to be under corresponding region, and to keep the colors as now (red to "some value", green to "other series" and blue to "third series").
How do I need to format the data to get this?
As extra questions:
I want few pixels margin between yaxis and corresponding axe labels. How do I set this?
The graph has a bg color (fade yellow). How do I eliminate that color and to get as bg whatever color the container has?

You need to change your data to
data = [[[202,1],[248,2],[148,3]]];
See working example here.
PS1 : You can change width of the bar by setting barWidth = xx; where xx is in pixels (50px in given example).
PS2 : For your first extra question, you can add something like this :
$("#chart1 .jqplot-grid-canvas").offset({left:$("#chart1 .jqplot-grid-canvas").offset().left+5});
$("#chart1 .jqplot-series-shadowCanvas").offset({left:$("#chart1 .jqplot-series-shadowCanvas").offset().left+5});
$("#chart1 .jqplot-series-canvas").offset({left:$("#chart1 .jqplot-series-canvas").offset().left+5});
$("#chart1 .jqplot-point-label").offset({left:$("#chart1 .jqplot-point-label").offset().left+5});
$("#chart1 .jqplot-highlight-canvas").offset({left:$("#chart1 .jqplot-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-highlighter-tooltip").offset({left:$("#chart1 .jqplot-highlighter-tooltip").offset().left+5});
$("#chart1 .jqplot-barRenderer-highlight-canvas").offset({left:$("#chart1 .jqplot-barRenderer-highlight-canvas").offset().left+5});
$("#chart1 .jqplot-event-canvas").offset({left:$("#chart1 .jqplot-event-canvas").offset().left+5});
I'm pretty sure you can make it a cleaner way but it works (change the +5 values to whatever you need in order to move the chart block). Please see an updated working example here

Related

Amchart 5 : Align bottom a Sankey graph

I try used Sankey graph from Amcharts5.
It's work, I filled my data, perfect.
But i want align the graph to bottom when i have white-spaces between 2 nodes. And i don't find how it's work.
My objective is to have white space at the top and stacked data at the bottom.
I create my graph so that :
var root = am5.Root.new(idDiv);
root.setThemes([
am5themes_Responsive.new(root)
]);
var series = root.container.children.push(
am5flow.Sankey.new(root, {
sourceIdField: "from",
targetIdField: "to",
valueField: "value",
nodePadding: 0,
nodeAlign: "justify"
})
);
series.nodes.setAll({
fillField: "color"
});
series.links.template.setAll({
fillStyle: "source",
fillOpacity: 0.35
});
series.appear();
See here how my graph look actualy : https://i.imgur.com/Q9P2rG7.png
Someone have a solution ?
Thank you
(Sorry, I don't speak english very well)

How to Set D3 Funnel Chart Label Legend

I am trying to d3 funnel chart label legend in horizontal position.i mentioned only label name and value .I want label name with particular label color.Below i mention my sample code. Please someone review my example code and help.
var data = [
['L0', 4, '#080800'],
['L1', 5, '#702963'],
['L2', 0, '#6f34fd'],
['L3', 6, '#07fff0']
];
var options = {
width : 600,
height : 400,
};
var funnel = new D3Funnel ( data, options );
funnel.draw ( "#funnelContainer" );
You should have an attribute named labelColor to override on row-level and give it a valid hex.
labelColor : string, A row-level override for label.fill. Hex only.
Working example D3 Funnel

Dojo charting - rightmost axis title getting cut in half

I am using dojo to create a bar chart with multiple vertical axes (one for an actual count, the other for a percentage), and when I do, the title for the right axis always gets cut off (i.e., the half of it that's furthest from the chart gets cut off by the edge of the chart). I've already tried using chart.resize(w,h), but this only shrinks the data in the chart, while maintaining the same margins from the edge (and thus the same title cut as before). Does anyone know how to get the title to properly display? For reference, here's the code I'm using, both to create the div node and the chart.
chartNode = domConstruct.create("div", {
id : this.context.viewid + "_ChartNode",
}, this.context.element, "first");
domStyle.set(chartNode, {
width : "800px",
height : "400px"
});
var chart = new Chart(chartNode);
chart.addPlot("default", {
type : "Columns",
markers : true,
gap : 5
});
chart.addPlot("something", {
type : "Columns",
vAxis : "percent"
});
chart.addAxis("x", {
title : "Person",
titleOrientation : "away",
minorTicks : false,
majorTickStep : 1,
dropLabels : false
});
chart.addAxis("y", {
vertical : true,
fixLower : "includeZero",
title : "Count",
min : 0,
max : data[0].totalSubmitted
});
chart.addAxis("percent", {
title : "Percentage",
titleGap : 20,
vertical : true,
leftBottom : false,
fixLower : "includeZero",
min : 0,
max : 100,
})
chart.addSeries("y", data);
chart.render();
Edit: This is what my code is actually generating, with the cutoff being highlighted in red.

jqplot set custom color for pie charts based on label name

To plot my data I'm using jqplot. I wish I could set a specific color on my pie chart according to the label values.
For example, I have this set of labels: "wood", "plastic" and I would like to set the color for "Wood" to brown and every time that category shows up in a graph.
Here is my current code:
switch(attrs.type) {
case 'pie': return $.extend(config, {
seriesColors:['#4bb2c5', '#EAA228', '#c5b47f', '#579575', '#839557', '#958c12', '#953579', '#4b5de4', '#d8b83f', '#ff5800', '#0085cc', '#c747a3', '#cddf54', '#FBD178', '#26B4E3', '#bd70c7'],
seriesDefaults: {
shadow: false,
renderer: $.jqplot.PieRenderer,
rendererOptions: {
showDataLabels: true,
varyBarColor: true
},
}
}
);
Thanks in advance!
You can use the dataLabels, seriesColors and labels property(of legends) to achieve this.
Refer below for jqPLot docs
dataLabels
seriesColors
legend labels
I have created a fiddle. Is this something that you are looking out for?
Follow this link: jqPLot Pie Chart - Series labels and colors
Regards,
Anish

jQPlot Horizontal Bar Graph - assign names to Y Axis

I figured it out:
I was not including the jqplot.CategoryAxisRenderer. Once I included that, I was able to get it working.
Thanks, everyone!
UPDATE:
My code works in JSFiddle, so it's a CSS problem I'm having. Please disregard.
I'm trying to create a fairly simple bar chart in jQPlot. I'm expecting two horizontal bars, one on top of the other. Both are equal to 1 on the X axis. I want the Y axis to have the labels 'In Progress' for the top bar, and 'Apr 2014' for the bottom bar. I have tried numerous combinations. If I do not specify Ticks, then I see the two bars. Specifying Ticks, or using the desired labels as the Y axis data point just shows both labels overlapping with no bars. (ignore the setTimeout) Thanks in advance.
Here's the code:
var data = [[1,1],[1,2]];
var ticks = ['In Progress','Mar 2014'];
$(function () {
setTimeout(function(){
var plot1 = jQuery.jqplot ('chartdiv', [data],
{
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal'
},
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
},
100);
});
I have modified the JsFiddle given by Batu Zet previously adding following lines in order to label your bar chart here :
series: [
{
pointLabels:{
show:true,
labels:['Apr 2014', 'Apr 2014']
}
},
{
pointLabels:{
show:true,
labels:['In Progress', 'In Progress']
}
}
]
P.S : The labels are duplicated for each serie in order to display the same label for two points in a serie.

Categories