I'm new in js and design generally,i try my best to explain the problem i have as best as i can,i have a column and bar charts,when i click on the bars,it should give me another 3 different charts accordingly,implementing this is not a big deal,but the user interface is becoming a pain,i want to know whats the logical suggestion for a problem like this,it should be modal or just different div's on the page,to show the charts?
maybe the example below can make my point better:
Here is my HTML:
<div style="width:100%">
<div id="chart" style="width:30% ;float:left"></div>
<div id="chart2" style="width:35%;float:right"></div>
<div id="chart3" style="width:25%;float:left"></div>
</div>
here is JS:
$("#chart").kendoChart({
series: [{
data: [1, 2],
color: function(point) {
if (point.value > 1) {
return "red";
}
// use the default series theme color
}
}],
seriesClick:seriesClick
});
function seriesClick(){
$("#chart2").kendoChart({
command:{ text: "View Details" },
series: [{
data: [5, 6],
color: function(point) {
if (point.value > 5) {
return "blue";
}
}
}],
});
$("#chart3").kendoChart({
command:{ text: "View Details" },
series: [{
data: [1, 3],
color: function(point) {
if (point.value > 1) {
return "green";
}
}
}],
});
}
here is the DEMO:
Demo
You can try modifying the existing bar chart. The existing bars can be modified. Using the existing resources to slide to the next is always good and seems much better than randomly popping out the bars out of nowhere.
Just check out this link http://nivo.rocks/bar . Click on the roll the dice button on the right or change the stacked option to grouped which is present below, you will get an idea regarding it.
Related
I'm working with jointJs and Rappid. I know how to draw a bpmn diagram, as the photo I have attached. I'm drawing the elements, but I'm having some problems with rows (flows). Is there any way to add a flow label or name? As I added on my image in red color.
I have seen this in their documentation, but I can't see anything about labels
var flow = new joint.shapes.bpmn.Flow({
source: { id: task.id },
target: { id: annotation.id },
flowType: 'association'
});
Thanks,
You may want to look into dia.Link.prototype.labels, since BPMN Flows are just Links extensions (joint.shapes.bpmn.Flow = joint.dia.Link.extend({).
An example to your flow:
flow.label(0, // the label's index (you can have multiple labels per link/flow)
{
position: .5, // place it halfway on the link (0-1)
attrs: {
text: { fill: 'red', text: 'Label' }
}
}
);
I have a single chart showing on my site. Viewers can then click links beside the chart in order to change the chart data. My problem is that the data will not show in the chart upon initialization - only if you start clicking the buttons beside the chart will the data load. I load data into the charts using JSON. I have been told that the problem might be that the JSON data is loaded after the chart is first displayed (an asynchronous problem), but I don't know how to fix this.
Below is the code I use for setting the first chart I have (chartOptions.chart1) into the "container" div. This will initialize the chart structure but it will not call my data - the data will only show if I start clicking the div-links.
$('chart').ready(function() {
//common options
Highcharts.setOptions({
chart: {
marginRight: 0
},
legend: {
enabled: false
},
plotOptions: {
bar: {
pointPadding: .01
},
column: {
borderWidth: 0.5
},
line: {
lineWidth: 1
},
},
series: [{
color: '#027ff7',
data: []
}]
});
$('#container').highcharts(chartOptions.chart1);
chart = $('#container').highcharts();
$(document).on('click', '.chart-update', function() {
$('div').removeClass('selected');
$(this).addClass('selected');
chart.destroy();
$('#container').highcharts(chartOptions[$(this).data('chartName')]);
chart = $('#container').highcharts();
});
});
</script>
</head>
<body>
<span class="wrapper">
<span class="block chart"><div id="container" style="width:400px;height:300px;float:left;"></div></span>
<span class="block buttons">
<div id="divchart" class="chart-update selected" data-chart-name="chart1">Chart1</div>
<div id="divchart" class="chart-update" data-chart-name="chart2">Chart2</div>
</span>
</span>
</body>
So I am wondering if I can use something else instead of the
$('#container').highcharts(chartOptions.chart1);
in order to have the first chart initialized in the container-div when visitors first enter the site? Of if there is some javascript code that will automatically trigger the on-"click" part - since this works just fine.
Using Highcharts to display a bar chart, is there a built-in way to link legend items to categories rather than to series? As such I would see a chart with a bunch of bars, and when I click a legend item it would show or hide just the bar(s) associated with a single category.
Thanks
There is not a built in way.
You can fake it in a number of ways, however.
One way is to use a separate series for each category, set grouping to false, dummy the x values to hover around the actual category value.
plotOptions: {
series: {
grouping: false,
pointRange: 0.2
}
},
series: [{
name: 'Group A',
data: [[-0.25,5],[0,7],[0.25,6]]
}]
Example:
http://jsfiddle.net/jlbriggs/x1cdz54r/
In the end, I found no out-of-the-box way to do this. But I found a solution that works, as follows:
correlate each bar with a single series (see fiddle referenced above)
in legendItemClick:
manually show or hide the series associated with the clicked-on legend item
given visibility of each category, recompute the indices of each visible category and update each visible bar series data[0].x with the new index of the category with which it is associated (use point.update())
call xAxis.setCategories with a list of the categories you want to be currently visible
call xAxis.setExtremes with the new extremes for the category indices
Here is a very simple example of the above:
legendItemClick = function (e) {
var seriesClicked = e.currentTarget;
var chart = seriesClicked.chart;
var axis = chart.xAxis[0]
if (seriesClicked.visible) {
seriesClicked.hide();
chart.series[2].data[0].update( { x: 1 });
axis.setCategories(['Group A', 'Group C'], false)
axis.setExtremes(0, 1, true)
} else {
seriesClicked.show();
chart.series[2].data[0].update( { x: 2 });
axis.setCategories(['Group A', 'Group B', 'Group C'], false)
axis.setExtremes(0, 2, true)
}
return false;
}
And a fiddle: http://jsfiddle.net/dkent600/e6357a22/17/
Is it possible to position the Kendo Pie Chart labels depending on whether there is enough room for them to fit inside the Pie Chart, just like the best fit option in Excel? So if they can fit they go inside and if they can't an arrow will point to them from the outside. Possibly similar to this: Kendo barchart category labels left and right based on value
I don't mind doing it manually if I have to because I don't think Kendo has the feature built in.
I just worked it out, it turns out kendo passes the current data item as a parameter to the position property if you set it to a function, so all I had to do was check it's percentage and if its less than 30% (or whatever you want) then it will be in the inside otherwise it will be on the outside. The same can be done with color.
$("#chart").kendoChart({
series: [ {
labels: {
visible: true,
align: "circle",
position: function(e) {
if(e.percentage < 0.1)
return "outsideEnd";
else
return "insideEnd";
},
color: function(e) {
if(e.percentage < 0.1)
return "#000";
else
return "#fff";
}
},
type: "pie",
data: [2,1,3,4,2, 5]
}]
});
http://dojo.telerik.com/ewIva/3
Is it possible to combine the following?
Fiddle 1 (answered by mäksä) as a main template:
Single horizontal stacked bar with bar segments
Combined with the following features of Fiddle 2 (answered by aus_lacy):
Always visible on bar segments:
Data names (labels) (i.c. "apples", "pears",...)
Percentages (calculated if possible: "50%","50%",...)
Shown on mousehover:
Original data numbers (i.c. "15","15",...)
Series name/description (i.c. "Browser share")
Almost but not quite:
An example of a horizontal bar chart with "percentages" always shown, and "original data numbers" on mousehover can be found in Fiddle 3 (answered by jlbriggs), but there the "data names" are lacking, and I can't find a way to change the "series name". Further more: this is a horizontal bar chart, but this is not a single stacked one.
Any help would greatly be appreciated, many thanks.
Again it's a simple modification of the Highcharts attributes in particular this small snippet:
bar: {
dataLabels: {
enabled: true,
distance : -50,
formatter: function() {
var dlabel = this.series.name + '<br/>';
dlabel += Math.round(this.percentage*100)/100 + ' %';
return dlabel
},
style: {
color: 'white',
},
},
},
I think this snippet is what you are after?