Gráfico con tecnología SVG & Graph Library-NiceChart. js

Vista prévia

Descripción

La biblioteca NiceChart. js le permite crear gráficos personalizables, escalables y basados en SVG & gráficos en la aplicación Web.

Supported chart types:

• Gráfico de barras/columnas.
• Gráfico línea/líneas múltiples/TrendLine.
• Medidor animado.

Funcionamiento

Incluya el archivo de JavaScript principal nicechart. js en la Página Web.

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

Incluye plugins para admitir más tipos de gráficos.

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

También puede incluir el archivo JS ALL-IN-ONE en la página.

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

Cree un contenedor SVG vacío para el gráfico.

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

Cree un gráfico de barras/columnas básico.

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();

Cree un gráfico de líneas básico.

var lineChart = new NiceChart('Line', {


renderHere : 'demo',


input : myData
}).render();

Cree un gráfico multilínea.

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();

Cree un gráfico de líneas de tendencia.

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();

Cree un medidor animado.

var myData = {


gaugeVal : 30,


minGaugeVal : 0,


maxGaugeVal : 100
}

var gaugeChart = new NiceChart('Gauge', {


renderHere : 'demo',


input : myData
}).render();

Opciones posibles para personalizar el gráfico.

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
}

Posibles opciones para el gráfico de calibres.

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)