Here's my code
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
Chart1
Chart1
var labelType;
function init() {
//init data
var json = {
'label': ['label A'],
'values': [
{
'label': 'date A',
'values': [20]
},
{
'label': 'date B',
'values': [30]
},
{
'label': 'date E',
'values': [38]
},
{
'label': 'date F',
'values': [58]
},
{
'label': 'date D',
'values': [55]
},
{
'label': 'date C',
'values': [26]
}]
};
//end
//init BarChart
var barChart = new $jit.BarChart({
//id of the visualization container
injectInto: 'infovis',
//whether to add animations
// animate: true,
//horizontal or vertical barcharts
orientation: 'horizontal',
//bars separation
barsOffset: 0.5,
//visualization offset
Margin: {
top: 5,
left: 5,
right: 5,
bottom: 5
},
//labels offset position
labelOffset: 5,
//bars style
type: 'stacked',
//whether to show the aggregation of the values
showAggregates: true,
//whether to show the labels for the bars
showLabels: true,
//label styles
Label: {
type: labelType, //Native or HTML
size: 13,
family: 'Arial',
color: 'white'
},
//tooltip options
Tips: {
enable: true,
onShow: function (tip, elem) {
tip.innerHTML = "" + elem.name + ": " + elem.value;
}
}
});
//load JSON data.
barChart.loadJSON(json);
//end
var list = $jit.id('id-list'),
button = $jit.id('update');
//update json on click 'Update Data'
$jit.util.addEvent(button, 'click', function () {
var util = $jit.util;
if (util.hasClass(button, 'gray')) return;
util.removeClass(button, 'white');
util.addClass(button, 'gray');
barChart.updateJSON(json2);
});
//dynamically add legend to list
var legend = barChart.getLegend(),
listItems = [];
for (var name in legend) {
listItems.push('
+ legend[name] + '\'>
' + name); }
list.innerHTML = '' + listItems.join(' ') + ' ';
}
1 Reply
Know the answer? Post it — somebody with the same question will find it here.
Sign in to answer this question
It is the same account you read, post and publish with — and you will come straight back to this page.

Guest UserPosted Aug 19, 2014, 12:19 PM
my answer might not sound relevant, but if you're not building something complexing for charting then use NVD3.js library. it's wrapper over D3.js and easy to use.
I had used it in past and found it simple and handy. Do you want to take look?
http://nvd3.org/
Please accept answer if you find it helpful!