We Keep Coding

Custom chart suggestions

I've always use flot.js for common charting requirements, but I'd like to explore new ways to visualize data that might be beyond this charting library. I'd appreciate any advice or recommendations as to how others might programmatically render the custom display chart below. Maybe CSS?

I know you probably weren't looking for an answer spelling out how to implement this in flot, but it was a fun exercise.
Getting creative with hiding and stacking bars with the stack plugin allows you to represent your bounds. For each set of bounds, you'll need to create a hidden bar with your lower bound value and then create a visible bar with your upper bound value (and stack the two). Specifying which bars should stack on each other is easy by setting the stack option to the same key.
Once the bars are setup, the next step is to set the options of the chart. A grid marking handles displaying the current value. Hiding both axes effectively hides the grid.
The rest comes down to creating methods to append div elements to placeholder to show the bar values, labels, and marking value.
This is a basic implementation of your example image that really focuses on the flot component of the chart. With a bit more time, the extra appended div elements could be styled in such a way to more closely match your example.
This JSFiddle contains the code below for easier review.
$(function() {
var data = [{
data: [ [0, 21.51] ],
lines: { show: false },
bars: { show: false },
stack: 0,
label: 'Hidden'
},{
data: [ [1, 32.50] ],
lines: { show: false },
bars: { show: false },
stack: 1,
label: 'Hidden'
},{
data: [ [2, 47.14] ],
lines: { show: false },
bars: { show: false },
stack: 2,
label: 'Hidden'
},{
data: [ [0, 37.77] ],
stack: 0,
label: 'Last Year'
},{
data: [ [1, 24.65] ],
stack: 1,
label: 'Last Month'
}, {
data: [ [2, 7.67] ],
stack: 2,
label: 'Last Week'
}];
var options = {
series: {
bars: { show: true },
points: { show: false }
},
xaxis: { show: false },
yaxis: { show: false },
grid: {
show: true,
borderWidth: 0,
backgroundColor: null,
markings: [{
xaxis: { from: 0, to: 3 },
yaxis: { from: 48.01, to: 48.01 },
color: "#000000"
}]
},
legend: { show: false }
};
var plot = $.plot($('#graph'), data, options);
var plotData = plot.getData();
var markings = plot.getOptions().grid.markings;
displayBarValues(plotData);
displayBarLabels(plotData);
displayMarkingValues(markings);
// display values next to bars
function displayBarValues(plotData) {
$.each(plotData, function(i, data) {
var stackedValue = data.data[0][1];
if (data.bars.show) {
stackedValue = findStackedValue(plotData, data.stack);
}
var offset = plot.pointOffset({x: data.data[0][0], y: stackedValue});
$('<div class="data-point-value">-- $' + stackedValue + '</div>').css( {
left: offset.left + 30,
top: offset.top - 8,
}).appendTo(plot.getPlaceholder());
});
}
function findStackedValue(dataSeries, stackNumber) {
var stackedValue = 0;
for (var i =0; i < dataSeries.length; i++) {
if (dataSeries[i].stack === stackNumber) {
stackedValue = stackedValue + dataSeries[i].data[0][1];
}
}
return stackedValue;
}
// display a marking value
function displayMarkingValues(markings) {
$.each(markings, function(i, marking) {
var offset = plot.pointOffset({x: marking.xaxis.to, y: marking.yaxis.to });
$('<div class="data-point-value">------ $' + marking.yaxis.to + '</div>').css( {
left: offset.left,
top: offset.top - 8,
}).appendTo(plot.getPlaceholder());
});
}
function displayBarLabels(plotData) {
$.each(plotData, function(i, data) {
if (data.bars.show) {
var stackedValue = findStackedValue(plotData, data.stack);
var offset = plot.pointOffset({x: data.data[0][0], y: stackedValue});
$('<div class="data-point-label">' + data.label + '</div>').css({
left: offset.left - 35,
top: offset.top + 50,
}).appendTo(plot.getPlaceholder());
}
});
}
});
#graph {
margin: 0 auto;
text-align: center;
width: 100px;
height: 600px;
}
.data-point-value {
position: absolute;
white-space: nowrap;
font-size: 11px;
}
.data-point-label {
position: absolute;
white-space: nowrap;
width: 100px;
font-size: 11px;
text-align: right;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>
<script src="https://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<script src="https://rawgit.com/flot/flot/master/source/jquery.flot.stack.js"></script>
<div id="graph"></div>

I have used Fusion Charts. Its pretty easy to customize and it works well in all browsers. Also have a look at Chart JS. Its pretty cool and its open source

I'v been using Chart.js for a while. While it is sweet at first glance, and you really can do super awesome stuff with it out of the box, it can be really limiting later on when you come across the need to do some simple/custom details that are not in documentation. For example: label outside the chart; turning off background for bar chart, doughnut bar with 1 value (for example - i have doughnut chart, with value 20%, i want the difference to be colored - you cant do that).
Of course all these stuff can be addressed and made with customizing .js file, and extending it but if you don't have time for that and you want out of the box solution, you can be stuck on simple detail so i suggest reading full docs to see if it is up to your expetations.

I would recommend D3.js with the caveat the the learning curve is steep; let me try to explain:
In something like chart.js, chartist,etc you provide the data, chart type and some configuration and you have your chart. In D3, it is a bit more complicated in the sense that D3 provides the framework for displaying and interacting with data via the Dom elements you design and specify.( Mostly svg's although you can also use divs,spans etc)
While it feels daunting at first and the documentation is basically an API Reference, there are hundreds of examples you can use as base or inspiration.

I'v been using (ChartJS, Morris, Inline Charts) for dashboard. It may help you much to customize the chart

I would recommend Chartist.js. It is fully responsive with great flexibility and DPI dependent.
you're able to style your charts with CSS in #media queries and lot of animation options. they have given examples for line chart, bar chart, pie chart with code. So it will definitely help you.

I like amCharts.
Can do all kinds of stuff and is free to use.

Google gives you an interesting charting library.
May want to try that but it requires you to be connected to Google for it to work (can't run it offline).

Here's a shot at it with HighCharts. I adapted the 'Stacked and grouped column' example at http://www.highcharts.com/demo/column-stacked-and-grouped.
Obviously there's work to be done in getting the labels and axes right, but I think this is a good start.
jsFiddle at http://jsfiddle.net/saevj2n4/1/
HTML:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
$(function () {
Highcharts.chart('container', {
chart: {
type: 'column',
width: 200,
height: 1000
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Profit']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
//groupPadding: .45,
pointPadding: 0,
//pointWidth: 40,
}
},
series: [{
name: 'Min',
data: [59.28 - 21.58 ],
stack: 'Last Year',
color: "#919191"
}, {
name: 'Max',
data: [21.58 ],
stack: 'Last Year',
color: "transparent"
}, {
name: 'Min',
data: [ 57.15 - 32.5 ],
stack: 'Last Month',
color: "#6095c9"
}, {
name: 'Max',
data: [32.50],
stack: 'Last Month',
color: "transparent"
}, {
name: 'Min',
data: [54.81 - 47.14 ],
stack: 'Last Week',
color: "#745f8e"
}, {
name: 'Max',
data: [47.14],
stack: 'Last Week',
color: "transparent"
}]
});
});

Highcharts Stacked Percentage Column Hyperlink

I have a Stacked % Column Highchart which without Hyperlinks on data sets works perfectly, however I need to link away to another page from the chart, If it was a standard column chart, I would have no issue (I have one already). But i cannot seem to work out why I'm getting an undefined error on the link.
Ive searched around for a working example but havent been able to find one matching the stacked percentage column.
I've setup a fiddle to indicate where im up to, any help appreciated.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Space Overview'
},
xAxis: {
categories: ['a', 'b', 'c', 'd']
},
yAxis: {
min: 0,
title: {
text: 'Total Space (%)'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
location.href = this.options.url;
}
}
}
}
},
subtitle: {
text: '+ Items relate to items in the dispay cabinets.',
align: 'left',
x: 10
},
series: [{
name: 'Free',
data: [1498, 1123, 556, 1176],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}, {
name: 'Used',
data: [1234,233,23,759],
url: ['Spaces.aspx?box=a', 'Spaces.aspx?box=b', 'Spaces.aspx?box=c', 'Spaces.aspx?box=d']
}]
});
http://jsfiddle.net/Mooglekins/qv8z5a2o/

This is a great question! I did some digging and think I've found a good solution for you.
First, I needed to update how you defined the custom value in your series. To capture certain values in events, I moved the url attribute within each data point. So now, each point has their y value and the new url value.
(Note: I used dummy URLs here since I wouldn't be able to connect to the ones you provided outside your website.)
series: [{
name: 'Free',
data: [
{ y: 1498, url: 'http://www.google.com' },
{ y: 1123, url: 'http://www.yahoo.com' },
{ y: 556, url: 'http://www.bing.com' },
{ y: 1176, url: 'http://www.msn.com' }
]
}, {
// second series here
}
]
Next, I updated your events call. Now that we've moved the url attribute to each point, we can refer to that value as point.url (as you could the y value using point.y).
What I also did here is use window.open vs. window.location. This will be a better experience for your users so they don't lose sight of the chart. Keep this if you wish.
plotOptions: {
column: {
stacking: 'percent'
},
series: {
cursor: 'pointer',
point: {
events: {
click: function (event) {
window.open(event.point.url);
}
}
}
}
}
Here's your updated fiddle with these changes: http://jsfiddle.net/brightmatrix/qv8z5a2o/5/
I hope this helps!

Change data source of Chart on select

I need a little bit of help to change data from a chart, when an option is selected from a drop-down menu. I've searched for similar questions but nothing was really helpful.
So far I have this code and I don't understand what am I missing that it's not working?
the html:
<div id="scroll-container">
<select id="menu">
<option value="Oil">Oil</option>
<option value="Gas">Gas</option>
</select>
<div id="container_Oil" data-role="ejmchart" style="height: 320px"></div>
</div>
and the javascript part:
<script>
$(function () {
var value = document.getElementById("menu").value;
var chart = document.getElementById("container_Oil");
$('#menu').change(function(evt){
var dataSelection = eval($("#menu").val());
var chart = $('#container_Oil').ejChart ({
dataSource: dataSelection
})
})
})
</script>
The date I am using for the chart, I have in another file, app.js and it contains the following:
var Oil = ...
var Gas = ...
$("#container_Oil").ejChart(
{
primaryXAxis:
{
//labelFormat: 'dd, MM',
//labelFormat: "{value}",
range: { min: 1, max: 30, interval: 2 },
font: { size: '10px' },
labelRotation: 20,
visible :false
},
primaryYAxis:
{
labelFormat: "{value}",
//range: { min: 39, max: 40, interval: 0.1 },
rangePadding: 'normal',
font: { size: '10px' },
visible : false
},
commonSeriesOptions: {
tooltip: { visible: true },
type: 'line', enableAnimation: false,
marker:
{
shape: 'circle',
size:
{
height: 5, width: 5
},
visible: true
},
border: { width: 2 }
},
series: [{
//Binding series with a JSON data source
dataSource: Oil,
//Mapping name of the field containing X value to series
//xName: 'Day',
//Mapping name of the field containing Y value to series
yName: 'Actual',
name: 'Actual'
},
{ dataSource: Oil,
//xName: 'Day',
yName: 'Plan',
name: 'Plan'
}
],
canResize: true,
load: 'onchartload',
title: { text: 'Product - Oil', font: { size: '12px' } },
legend: { visible: true, position: "top" }
});
I want when I select for example Gas in the selector to change the dataSource for the chart from Oil to Gas.
I tried debugging and it said that "Oil" and "Gas" were undefined. Then I tried to put the data for "Oil" and "Gas" in the same file with the script. No more error, but still not working. I think I am missing something important in my code, but I can't seem to understand what. A little help would be more than welcomed!

Perhaps it only creates the charts on page load? Since it's only two charts, you could create them both on page load, and then hide and show the divs depending on the dropdown value for a quick fix.

Did you tried?
$('#menu').on( "change", function(evt){
Instade of:
$('#menu').change(function(evt){

Highstock Column Chart - data grouping causes data to scroll independently of axis

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).
For example: when scrolling one "step" to the right, I note these differences:
The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)
What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.
I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.
(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)
chart: {
alignTicks: false,
backgroundColor: '#eeeeee',
events: {
load: function (e) {
this.xAxis[0].setExtremes(1390943153305, 1400015153305);
}
},
ignoreHiddenSeries: true,
renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
enabled: true,
shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
height: 40,
xAxis: {
gridLineWidth: 1
},
series: {type: 'column'}
},
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [
['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
['second', [604800]],
['minute', [10080]],
['hour', [168]],
['day', [7]],
['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
['month', null],
['year', null]
]
}
}
},
xAxis: {ordinal: false},
series: data

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/
I think that resolves your issue, right?
plotOptions: {
series: {
showInLegend: true,
stacking: 'normal',
dataGrouping: {
enabled: true,
forced: true,
units: [ [ 'week', [1] ]]
}
}
},
Regarding additional question:
- yes you can set specific color for each point, but you need to determine on your own what color should be set:
data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]
Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).

Can the colors on charts in ExtJs/ YUI Charts be changed dynamically?

I am using ExtJs/ YUI charts in my application.
What I am wondering, is it possible to dynamically change the color on any of the charts based on data?
i.e. I have a store which contains a field holding the hex color for that particular row. Is it possible to dynamically set the color of a bar in the bar chart with the hex value?

Take a look at this blog post. When you are configuring the chart object, pass a series object with a style property as described in that post to define the colors and their sequence.
Then you just need to get your colors by either looping through your store records and building a new array, or perhaps pulling it from your store with store.query. Then pass this array as the property.
(...),
series: [style: { colors: arrayBuiltFromStore }],
(...)

From what I've been able to find, you can use the
(...),
series: [style: {colors: arrayBuiltFromStore }],
(...)
method if you're creating a pie chart (or another chart with series.colors attribute), and it works great.
If you're using a type of chart that doesn't support series.colors... it gets a little more convoluted. I found that using the renderer method works fairly well. The only problem with this method (that I can see right away) is that it doesn't change the colors in the legend. It would take some further editing to see if this could be pulled from the store.
If you figure out the legend issue, let me know, but I hope this helps.
Note: Not all the variables used in the below script are populated in the script.
function myColorer(rec) {
var aFiller = new Array('#0000FF','#31CD31','#FFFF00','#FF0000');
return aFiller[rec];
}
Ext.onReady(function() {
var sDataStore = new Ext.data.JsonStore(sPathToDataStore);
chart = new Ext.chart.Chart({
renderTo: document.getElementById('test-graph'),
width: 800,
height: 600,
animate: true,
store: sDataStore,
legend: {
position: 'right',
isVertical: true,
},
axes: [{
type: 'Numeric',
grid: true,
position: 'left',
fields: ['field1','field2','field3','field4'],
title: 'Title Here',
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 1
}
},
minimum: 0,
adjustMinimumByMajorUnit: 0
}, {
type: 'Category',
position: 'bottom',
fields: label1,
title: sXAxisLabel,
grid: true,
}],
series: [{
renderer: function(sprite, record, curAttr, index, store) {
var color = myColorer(index);
return Ext.apply(curAttr, {
fill: color
});
},
type: 'area',
highlight: false,
axis: 'left',
xField: label1,
yField: ['field1','field2','field3','field4'],
style: {
opacity: 0.93
}
}]
});
});

Try this:
Create a hidden field and assign its value to the value of the store field which contains the colour value.
when rendering bar chart, set the background colour of a bar to the value of the hidden field.

Yes, you can do it by using renderers. Following code example changes colors of bars in bar chart:
series: {
type: 'bar',
xField: 'name',
yField: 'value',
label:{
field: 'value'
},
renderer: function(sprite, config, rendererData, index) {
var record = rendererData.store.getData().items[index];
return Ext.apply(rendererData, {
fillStyle: record.data.color,
});
}
}
Here 'color' is a field of the store model. You can set different color for each bar by setting it in corresponding record in your store.