SVG Powered Chart & Graph Library – NiceChart.js

Preview:

Description:

The NiceChart.js library lets you create customizable, scalable, SVG-based charts & graphs on the web app.

Supported chart types:

• Bar/column chart.
• Line/Multiline/TrendLine chart.
• Animated gauge.

How to use it:

Include the main JavaScript file nicechart.js on the webpage.

<script src="nicechart.1.1.js"></script>

Include plugins to support more chart types.

<script src="gauge.plugin.nicechart.js"></script>
<script src="multiline.plugin.nicechart.js"></script>
<script src="trendline.plugin.nicechart.js"></script>

You can also include the ALL-IN-ONE JS file on the page.

<script src="nicechart.master.js"></script>

Create an empty SVG container for the chart.

<svg id="demo">
</svg>

Create a basic bar/column chart.

var myData = ["1,2000", "2,1100" ,"3,1500", "4,1700" ,"5,2200", "6,2300",
"7,1500" ,"8,1950" ,"9,1970" ,"10,2500" ,"11,1860" ,"12,1920"];

var barChart = new NiceChart('Bar', {
    renderHere : 'demo',
    input : myData
}).render();

Create a basic line chart.

var lineChart = new NiceChart('Line', {
    renderHere : 'demo',
    input : myData
}).render();

Create a multi-line chart.

var mydata = {
    label : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series : [
      {
        name : 'Device1',
        color  : 'red',
        data : [100, 550, 400, 700, 500, 900, 1000]
      },
      {
        name : 'Device2',
        color  : '#F97D10',
        data : [200, 450, 500, 800, 600, 1000, 1100]
      },
      {
        name : 'Device3',
        color  : '#950aa8',
        data : [300, 700, 550, 850, 650, 1100, 1200]
      },{
        name : 'Device6',
        color  : 'green',
        data : [500, 800, 650, 1000, 750, 750, 750]
      }
    ]
}

var multiChart = new NiceChart('MultiLine', {
    renderHere : 'demo',
    input : myData
}).render();

Create a trend line chart.

var myData = {
    data : ["Jan,2000", "Feb,1100", "Mar,1500", "Apr,1700", "May,2200", "Jun,2300", "July,1500", "Aug,1950", "Sep,1970", "Oct,2500", "Nov,1860", "Dec,1920"],          
    type : 'Line',
    trendline : [
      {
        label : 'High',
        color  : '#FDA915',
        value : 1700
      },
      {
        label : 'V High',
        color  : 'red',
        value : 2100
      }
    ]
}

var trendChart = new NiceChart('TrendLine', {
    renderHere : 'demo',
    input : myData
}).render();

Create an animated gauge.

var myData = {
    gaugeVal : 30,
    minGaugeVal : 0,
    maxGaugeVal : 100
}

var gaugeChart = new NiceChart('Gauge', {
    renderHere : 'demo',
    input : myData
}).render();

Possible options to customize the chart.

axisStyle: {
  axisColor: "#D8D8D8",
  axisWidth: "1px",
  axisYLabelCount: "",
  axisXTitle: "",
  axisYTitle: "",
  axisYTitleTb: !0,
  axisXTitleLMargin: 0,
  axisXTitleColor: "#000",
  axisYTitleColor: "#000",
  axisXLabelColor: "#000",
  axisYLabelColor: "#000",
  axisXLabelTb: !1,
  axisXLabelSkipIndex: 1
},
chartStyle: {
  chartWidth: 450,
  chartHeight: 300,
  chartMargin: 30,
  chartPlotColor: "#000",
  lineStrokeWidth: "1px",
  chartPlotMargin: 10,
  showToolTip: !1,
  toolTipPrefix: "",
  toolTipColor: "#fff",
  toolTipBgColor: "#000",
  toolTipSuffix: "",
  circleRadius: 3,
  chartBgColor: "#fff",
  chartBgLines: !1,
  chartBgLineColor: "#D8D8D8",
  chartBgLineDotted: !1,
  showLegend: !1,
  legendTitleColor: "#000"
},
animation: {
  highLight: !1,
  animateLoad: !1,
  animateReload: !1
}

Possible options for gauge chart.

axisStyle: {},
chartStyle: {
  gaugeBgColor: "#fff",
  gaugeColor: "#000",
  gaugeTitle: "",
  gaugeTitleColor: "#000",
  gaugeTitleFontSize: "12px",
  gaugeTitleMargin: 30,
  gaugeWidth: 30
},
animation: {}

API methods.

// toggle charts between Line and Bar
instance.toggleChart();
// get the current chart type
instance.tgetChartType();
// update the chart data
instance.refreshChartData(data)
// change axis titles
instance.changeAxisTitles(titleX, titleY)
// resize the chart
instance.resizeChart(w, h)