ChartNewJs Examples

HTML 5 Charting Examples using chartnew js library.

by Erik Bartlow

HTML

<script src="https://rawgit.com/FVANCOP/ChartNew.js/master/ChartNew.js"></script>
<canvas id="myChart" width="800" height="800"></canvas>

JavaScript

var demo_common_options = {
	canvasBorders : true,
	canvasBordersWidth : 3,
	canvasBordersColor : "black",
	graphTitleFontFamily:"'Open Sans'",
	graphTitleFontStyle:"normal normal",
	graphTitleFontColor:"rgba(52,152,219,1)",
	graphTitleFontSize:26,
	graphSubTitleFontFamily:"'Open Sans'",
	graphSubTitleFontStyle:"normal normal",
	graphSubTitleFontColor:"rgba(102,102,102,1)",
	graphSubTitleFontSize:16,
	scaleFontFamily:"'Open Sans'",
	scaleFontStyle:"normal normal",
	scaleFontColor:"rgba(0,0,0,1)",
	responsive : true,
	scaleFontSize:12,
	legend : true,
	inGraphDataShow : true,
	responsive : true
};
var stageLabels = ["New", "Estimation", "Planning", "Awaiting Approval", "Active", "Complete"];

var setupData = {
    labels: stageLabels,
    datasets: [{
        fillColor: 'rgba(0,150,214,1)',
        data: [2],
        title: 'New'
    }, {
        fillColor: 'rgba(0,105,150,1)',
        data: [3],
        title: 'Estimation'
    }, {
        fillColor: 'rgba(255,129,83, 0.8)',
        data: [2],
        title: 'Planning'
    }, {
        fillColor: 'rgba(119,70,119, 1)',
        data: [3],
        title: 'Awaiting Approval'
    }, {
        fillColor: 'rgba(80,145,55, 0.2)',
        data: [6],
        title: 'Active'
    }, {
        fillColor: 'rgba(80,145,55, 1)',
        data: [20],
        title: 'Complete'
    }]
};

var setupOptions = {
    canvasBorder: true,
    canvasBorderWidth: 3,
    canvasBorderColor: '#333',
    legend: true,
    inGraphDataShow: true,
    inGraphDataAnglePosition: 2,
    inGraphDataRadiusPosition: 2,
    inGraphDataRotate: "inRadiusAxisRotateLabels",
    inGraphDataAlign: "center",
    inGraphDataVAlign: "middle",
    inGraphDataFontColor: "white",
    inGraphDataFontSize: 10,
    responsive: true
};
setupOptions = $.extend({}, setupOptions, demo_common_options);
var myChartObj = new Chart(document.getElementById("myChart").getContext("2d")).Pie(setupData, setupOptions);