Abhishek  Jaiswal

Abhishek Jaiswal

  • 95
  • 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] + '\'>&nbsp;</div>' + name);
        }
        list.innerHTML = '<li>' + listItems.join('</li><li>') + '</li>';
    }

</script>

</asp:Content>


Answers (1)