Task #1235: Add Javascript charting library - TextCritical.net - LukeMurphey.net

Task #1235

Feature #1224: Morphology tool word search

Add Javascript charting library

Added by Luke Murphey about 8 years ago. Updated about 8 years ago.

Status:

Closed

Priority:

Normal

Assignee:

Luke Murphey

Target version:

1.3

Start date:

03/04/2016

Due date:

% Done:

100%

Description

History

#1 Updated by Luke Murphey about 8 years ago

Chartist example:

new Chartist.Bar('.ct-chart', {
  labels: ['νόμον', 'νόμος', 'νόμου', 'νόμῳ'],
  series: [
    [16, 7, 8, 4]
  ]
}, {
  reverseData: true,
  horizontalBars: true
}).on('draw', function(data) {
  if(data.type === 'bar') {
    data.element.attr({
      style: 'stroke-width: 60px'
    });
  }
});

#2 Updated by Luke Murphey about 8 years ago

Canvas.js:

<!DOCTYPE HTML>
<html>

<head>  
    <script type="text/javascript">
    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {

            title:{
                text:"Word Frequency"                

            },
                        animationEnabled: true,
            axisX:{
                interval: 1,
                gridThickness: 0,
                labelFontSize: 10,
                labelFontStyle: "normal",
                labelFontWeight: "normal",
                labelFontFamily: "Lucida Sans Unicode" 

            },
            axisY2:{
                gridColor: "rgba(32,32,32,.1)" 

            },

            data: [
            {     
                type: "bar",
                name: "companies",
                axisYType: "secondary",
                color: "#BF1010",                
                dataPoints: [

                {y: 16, label: "νόμον"  },
                {y: 7, label: "νόμος"  },
                {y: 8, label: "νόμου"  },
                {y: 4, label: "νόμῳ"  },

                ]
            }

            ]
        });

chart.render();
}
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>
</html>