I'm trying to find a free charting library for JS that does not require jQuery and is able to add vertical cursor bars at indicated locations. Interactivity would be nice. I only need a line chart, no doughnuts required. Anyone know if this creature exists?
var chartJSON = {
"type": "line",
"background-color": "#fff",
"border-color": "#dae5ec",
"border-width": "1px",
"title": {
"margin-top": "7px",
"margin-left": "12px",
"text": "TODAY'S SALES",
"background-color": "none",
"shadow": 0,
"text-align": "left",
"font-family": "Arial",
"font-size": "11px",
"font-color": "#707d94"
},
"plot": {
"animation": {
"effect": "ANIMATION_SLIDE_LEFT"
}
},
"plotarea": {
"margin": "50px 25px 70px 46px"
},
"scale-y": {
"values": "0:100:25",
"line-color": "none",
"guide": {
"line-style": "solid",
"line-color": "#d2dae2",
"line-width": "1px",
"alpha": 0.5
},
"tick": {
"visible": false
},
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-right": "5px"
}
},
"scale-x": {
"line-color": "#d2dae2",
"line-width": "2px",
"values": ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
"tick": {
"line-color": "#d2dae2",
"line-width": "1px"
},
"guide": {
"visible": "false"
},
"markers": [{
"type": "area",
"range": [5, 7],
"background-color": "red",
"alpha": 0.3,
"label": {
"text": "Summer Sale",
"alpha": 0.5
}
}],
"item": {
"font-color": "#8391a5",
"font-family": "Arial",
"font-size": "10px",
"padding-top": "5px"
}
},
"legend": {
"layout": "2x2",
"background-color": "none",
"shadow": 0,
"margin": "auto auto 15 auto",
"border-width": 0,
"item": {
"font-color": "#707d94",
"font-family": "Arial",
"padding": "0px",
"margin": "0px",
"font-size": "9px"
},
"marker": {
"show-line": "true",
"type": "match",
"font-family": "Arial",
"font-size": "10px",
"size": 4,
"line-width": 2,
"padding": "3px"
}
},
"crosshair-x": {
"lineWidth": 1,
"line-color": "#707d94",
"plotLabel": {
"shadow": false,
"font-color": "#ffffff",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px",
"alpha": 1
},
"scale-label": {
"font-color": "#ffffff",
"background-color": "#707d94",
"font-family": "Arial",
"font-size": "10px",
"padding": "5px 10px",
"border-radius": "5px"
}
},
"tooltip": {
"visible": false
},
"series": [{
"values": [69, 68, 54, 48, 70, 74, 98, 70, 72, 68, 49, 69],
"text": "Kenmore",
"line-color": "#4dbac0",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#36a2a8",
"shadow": 0
},
"palette": 0
}, {
"values": [51, 53, 47, 60, 48, 52, 75, 52, 55, 47, 60, 48],
"text": "Craftsman",
"line-width": "2px",
"line-color": "#25a6f7",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#1993e0",
"shadow": 0
},
"palette": 1,
"visible": 1
}, {
"values": [42, 43, 30, 50, 31, 48, 55, 46, 48, 32, 50, 38],
"text": "DieHard",
"line-color": "#ad6bae",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#975098",
"shadow": 0
},
"palette": 2,
"visible": 1
}, {
"values": [25, 15, 26, 21, 24, 26, 33, 25, 15, 25, 22, 24],
"text": "Land's End",
"line-color": "#f3950d",
"line-width": "2px",
"shadow": 0,
"marker": {
"background-color": "#fff",
"size": 3,
"border-width": 1,
"border-color": "#d37e04",
"shadow": 0
},
"palette": 3
}]
}
zingchart.render({
id: "myChart",
height: 300,
width: 500,
data: chartJSON
});
<script src="http://www.zingchart.com/playground/lib/zingchart/zingchart-html5-min.js"></script>
<div id="myChart"></div>
Are you referring to something like this? This was done with ZingChart, which is free to use. A marker was set on the x-axis with a range and lowered opacity.
Let me know if you were looking for something else and I'll put together another demo. I'm on the team at ZingChart and happy to help :)
You can do this with amCharts, here is a stacked area chart demo. If you don't need a fill, simply set fillAlphas to 0. and stackType of value axis to "none"
Disclaimer: I am the author of amCharts.
Here is an example made with D3js Framework, it might interest you..
Related
Made this with Amcharts V3
I've set line thickness in my graph to 3. Whenever the readings are 0, the graph line will then lie on x axis for those values, and here the thickness becomes 1. But if the values are more than 0, then the thickness is correct of 3.
Here is the function which renders the graphs:
function drawChart(chartData, color)
{
var ballon = '<div class="ballon"><p class="heading">[[date_full]]</p><div class="values"><span class="chart_label">Score</span><span class="chart_reading">[[score]]</span></div></div>';
return AmCharts.makeChart("score_chart",
{
"type": "serial",
"theme": "none",
"dataProvider": chartData,
"valueAxes": [
{
"axisAlpha": 0,
"gridAlpha": 0.5,
"position": "left",
"minimum": 0,
"maximum": 100,
"labelsEnabled": true,
"gridColor": "#E9EBED",
"axisColor": "#E9EBED",
"color": "#68737D",
"fontSize": 13
}],
"graphs": [
{
"id": "g1",
"balloonText": ballon,
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"title": "red line",
"valueField": "score",
"useLineColorForBulletBorder": true,
"lineColor": color,
"lineThickness": 3,
"bulletBorderThickness": 3,
"balloonColor": "white",
"balloon": {
"borderAlpha": 0,
"borderThickness": 0,
"fillAlpha": 0
},
"bulletSize": 10
}],
"chartCursor":
{
"limitToGraph": "g1",
"cursorColor": color
},
"categoryField": "date",
"categoryAxis":
{
"parseDates": false,
"axisColor": "lightgrey",
"gridAlpha": 0,
"color": "#68737D",
"fontSize": 13
}
});
With these basic options, this chart is feeling cramped — the 'U.S. Average' plotline label is overlapping the first bar.
Is there a way to add padding to the top and bottom of the plot area, thereby giving a little breathing room for the plotline & its label?
JSFiddle of the problem
Plotline code:
Highcharts.setOptions({
chart: {
style: {
fontFamily: "Oswald, sans-serif",
textTransform: "uppercase"
}
}
});
var chart = new Highcharts.Chart({
"credits": {
"enabled": false
},
"chart": {
"renderTo": "container",
"type": "bar"
},
"title": {
"text": "Percent of Adults Who Binge Drank"
},
"subtitle": {
"text": "2013 | Percent of Adults Who Binge Drank"
},
"xAxis": {
"categories": ["Boston", "Denver", "Miami", "New York", "Phoenix", "San Antonio", "San Jose", "Seattle", "Washington"],
"labels": {
"useHTML": true,
"style": {
"width": "100px",
"min-width": "100px",
"text-align": "right"
}
}
},
"yAxis": {
"title": {
"text": null
},
"plotLines": [{
"color": "#9b9b9b",
"dashStyle": "shortdot",
"value": 26,
"width": 2,
"label": {
"text": "U.S. Average",
"align": "left",
"x": 5,
"rotation": 0,
"zIndex": 1000,
"useHTML": true,
"style": {
"font-size": "10px",
"background-color": "#fff"
}
}
}]
},
"series": [{
"data": [35, 26, 18, 18, 15, 21, 55, 19, 22],
"color": "#e12922"
}],
"exporting": {
"enabled": true,
"buttons": {
"contextButton": {
"menuItems": "buttons"
}
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height:400px;width:600px;margin:1.5em 1em;"></div>
I'm using amcharts 3 for xychart and I would like to disable possibility for user to zoom y axis, but still make it possible to zoom x axis by ChartCursor.
Yes, you should set:
"hideYScrollbar":true
Full source:
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"marginRight": 80,
"marginTop": 17,
"hideYScrollbar":true,
"dataProvider": [{
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": 0,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": -3,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": -3,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 1,
"value2": 16
}],
"valueAxes": [{
"position": "bottom",
"axisAlpha": 0
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "bubble",
"lineAlpha": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"fillAlphas": 0,
"bulletBorderAlpha": 0.2,
"maxBulletSize": 80
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "bubble",
"lineAlpha": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"fillAlphas": 0,
"bulletBorderAlpha": 0.2,
"maxBulletSize": 80
}],
"marginLeft": 46,
"marginBottom": 35,
"chartScrollbar": {},
"chartCursor": {},
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
});
Codepen: http://codepen.io/team/amcharts/pen/cdd55aa9f4f761686a4027d6895263da
In the following example, the value of X=X1+X2+X3, and I want to show negative X3 below the zero axis. Also, when computing the percentage value, it appears that negative value of X3 is not taken into account. For example, for year 2001, percentage values for X1, X2, and X3 are computed as 70, 20, and -10, respectively. However, I want these to be (100*(70/(70+20-10)) % (87.5 %), (100*(20/(70+20-10)) % (25%), and (100*(-10/(70+20-10)) % (-12.5 %), respectively.
example here: https://jsfiddle.net/831g79xp/1/
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight":30,
"legend": {
"equalWidths": false,
"periodValueText": "total: [[value.sum]]",
"valueText": "[[value]] ([[percents]]%)",
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"dataProvider": [
{
"year": 2001,
"X1": 70,
"X2": 20,
"X3": -10,
}, {
"year": 2002,
"X1": 80,
"X2": 15,
"X3": -20,
}, {
"year": 2003,
"X1": 90,
"X2": 20,
"X3": -25,
}],
"valueAxes": [{
"stackType": "regular",
"gridAlpha": 0.07,
"position": "left",
"title": "X Components"
}],
"graphs": [{
"balloonText":"<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X1",
"valueField": "X1"
}, {
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X2",
"valueField": "X2"
}, {
"balloonText": "<span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
"fillAlphas": 0.6,
"lineAlpha": 0.4,
"title": "X3",
"valueField": "X3"
}
],
"plotAreaBorderAlpha": 0,
"marginTop": 10,
"marginLeft": 0,
"marginBottom": 0,
"chartScrollbar": {},
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "year",
"categoryAxis": {
"startOnAxis": true,
"axisColor": "#DADADA",
"gridAlpha": 0.07,
"title": "Year"
},
"export": {
"enabled": true
}
});
I would like to draw a chart using this code
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"addClassNames": true,
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"dataProvider": [
{
"maand": #Model.Maanden[0],
"neerslag": 33,
"temperatuur": 33
},
{
"maand": "Februari",
"neerslag": 33,
"temperatuur": 33
}
],
"valueAxes": [
{
"axisAlpha": 0,
"position": "left"
}
],
"startDuration": 1,
"graphs": [
{
"alphaField": "alpha",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"dashLengthField": "dashLengthColumn",
"fillAlphas": 1,
"title": "Gemiddelde neerslag",
"type": "column",
"valueField": "neerslag"
}, {
"id": "graph2",
"balloonText": "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>",
"bullet": "round",
"lineThickness": 3,
"bulletSize": 7,
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"useLineColorForBulletBorder": true,
"bulletBorderThickness": 3,
"fillAlphas": 0,
"lineAlpha": 1,
"title": "Gemiddelde temperatuur",
"valueField": "temperatuur"
}
],
"categoryField": "maand",
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 0,
"tickLength": 0
}
});
</script>
when I use "maand": #Model.Maanden[0] instead of a string it doesn't draw a chart but I know I can access the properties in the model what am I doing wrong?
Try use "maand": '#Model.Maanden[0]' because if you dont put the '' the javascript will understand that the value of the "maand" is #Model.Maanden[0] and not the value of #Model.Maanden[0].