TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Abhishek Jaiswal
94
19.8k
9.6m
I want to use my JSON data in creating D3JS chart
Aug 19 2014 5:48 AM
I want to use my JSON data in creating D3JS chart, but code isn't rendering anything.
Here's my code
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Chart1
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Chart1</h2>
<script src="http://d3js.org/d3.v2.min.js" type=""></script>
<script>
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 = "<b>" + elem.name + "</b>: " + 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('<div class=\'query-color\' style=\'background-color:'
+ legend[name] + '\'> </div>' + name);
}
list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
}
</script>
</asp:Content>
Reply
Answers (
1
)
Remove object from Collection using javascript/jquery
DOM Exception: INVALID_CHARACTER_ERR (5)