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>