logo
Tags down

shadow

Amcharts: Put dots without line in serial graphs


By : muhammad yusran
Date : October 17 2020, 01:08 AM
I hope this helps . Your best bet is to create a graph specifically for those red dots. You just have to set lineColor to a red color for the bullets, set lineAlpha to 0 so that the lines aren't visible and then add data points for them. You can also set visibleInLegend to false if you don't want a marker for this graph.
code :
var chartData = [{
    "date": "2017-06-05 15:47:00",
    "hectares": 10,
    "temperature": 50,
    "wind": 11,
    "humidity": 35,
    "reddot": 50 //data point for red dot graph
  },
  {
    "date": "2017-06-05 16:47:00",
    "hectares": 12,
    "temperature": 41,
    "wind": 11,
    "humidity": 35
  },
  {
    "date": "2017-06-05 17:47:00",
    "hectares": 13,
    "temperature": 47,
    "wind": 12,
    "humidity": 31,
    "reddot": 50 //data point for red dot graph
  },
  // ... etc
]



var weatherChart = AmCharts.makeChart("weatherChart", {
  // ...
  "graphs": [
    // ... other graphs omitted
    {
        "id": "g5",
        "bullet": "round",
        "valueField": "reddot",
        "bulletColor": "#800",
        "lineColor": "#800",
        "visibleInLegend": false, //optional: hide from legend
        "lineAlpha": 0
    }
  ],
  // ...
});
var chartData = [{
    "date": "2017-06-05 15:47:00",
    "hectares": 10,
    "temperature": 50,
    "wind": 11,
    "humidity": 35,
    "reddot": 55
  },
  {
    "date": "2017-06-05 16:47:00",
    "hectares": 12,
    "temperature": 41,
    "wind": 11,
    "humidity": 35,
    "reddot": 55
  },
  {
    "date": "2017-06-05 17:47:00",
    "hectares": 13,
    "temperature": 47,
    "wind": 12,
    "humidity": 31
  },
  {
    "date": "2017-06-05 18:47:00",
    "hectares": 12,
    "temperature": 44,
    "wind": 8,
    "humidity": 37,
    "reddot": 55
  },
  {
    "date": "2017-06-05 19:47:00",
    "hectares": 12,
    "temperature": 43,
    "wind": 12,
    "humidity": 38
  },
  {
    "date": "2017-06-05 20:47:00",
    "hectares": 11,
    "temperature": 48,
    "wind": 9,
    "humidity": 37
  },
  {
    "date": "2017-06-05 21:47:00",
    "hectares": 11,
    "temperature": 40,
    "wind": 12,
    "humidity": 32,
    "reddot": 55
  },
  {
    "date": "2017-06-05 22:47:00",
    "hectares": 15,
    "temperature": 44,
    "wind": 8,
    "humidity": 32
  },
  {
    "date": "2017-06-05 23:47:00",
    "hectares": 15,
    "temperature": 44,
    "wind": 9,
    "humidity": 32
  },
  {
    "date": "2017-06-06 00:47:00",
    "hectares": 13,
    "temperature": 50,
    "wind": 10,
    "humidity": 32
  },
  {
    "date": "2017-06-06 01:47:00",
    "hectares": 11,
    "temperature": 41,
    "wind": 12,
    "humidity": 31
  },
  {
    "date": "2017-06-06 02:47:00",
    "hectares": 10,
    "temperature": 48,
    "wind": 12,
    "humidity": 38
  },
  {
    "date": "2017-06-06 03:47:00",
    "hectares": 12,
    "temperature": 46,
    "wind": 12,
    "humidity": 36
  },
  {
    "date": "2017-06-06 04:47:00",
    "hectares": 15,
    "temperature": 48,
    "wind": 11,
    "humidity": 37
  },
  {
    "date": "2017-06-06 05:47:00",
    "hectares": 11,
    "temperature": 47,
    "wind": 9,
    "humidity": 36
  },
  {
    "date": "2017-06-06 06:47:00",
    "hectares": 13,
    "temperature": 40,
    "wind": 9,
    "humidity": 36,
    "hectares_dash": 5,
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 07:47:00",
    "hectares": 14,
    "temperature": 49,
    "wind": 12,
    "humidity": 32,
    "hectares_dash": 5,
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 08:47:00",
    "hectares": 10,
    "temperature": 47,
    "wind": 9,
    "humidity": 37,
    "hectares_dash": 5,
    "temperature_dash": 5,
    "humidity_dash": 5,
    "wind_dash": 5
  },
  {
    "date": "2017-06-06 09:47:00",
    "hectares": 10,
    "temperature": 46,
    "wind": 10,
    "humidity": 33,
    "hectares_dash": 0, //reset the dash by setting it to 0
    "temperature_dash": 0,
    "humidity_dash": 0,
    "wind_dash": 0
  },
  {
    "date": "2017-06-06 10:47:00",
    "hectares": 13,
    "temperature": 47,
    "wind": 10,
    "humidity": 34,
    "reddot": 55
  }
]



var weatherChart = AmCharts.makeChart("weatherChart", {
  "type": "serial",
  "theme": "light",
  "language": "es",
  "marginRight": 80,
  "mouseWheelZoomEnabled": true,
  "zoomOutText": "Mostrar todo",
  "autoMarginOffset": 20,
  "gridAboveGraphs": false,
  "marginTop": 7,
  "dataProvider": chartData,
  "valueAxes": [{
    "id": "v1",
    "axisColor": "#969696",
    "axisAlpha": 1,
    "axisThickness": 2,
    "offset": 10,
    "autoGridCount": true,
    "gridAlpha": 0,
    "minorGridEnabled": false,
    "position": "left",
    "title": "Temperatura y velocidad del viento"
  }, {
    "id": "v2",
    "axisColor": "#969696",
    "axisThickness": 2,
    "axisAlpha": 1,
    "offset": 10,
    "minorGridEnabled": false,
    "position": "right",
    "title": "Humedad"
  }, {
    "id": "v3",
    "axisColor": "#969696",
    "axisThickness": 0,
    "axisAlpha": 0,
    "labelsEnabled": false,
    "offset": 50,
    "minorGridEnabled": false,
    "position": "left",
  }],
  "graphs": [{
    "id": "g4",
    "valueAxis": "v3",
    "fillColorsField": "color",
    "balloonText": "[[value]]ha",
    "fillAlphas": .6,
    "lineAlpha": 0.2,
    "type": "column",
    "title": "Hectareas fumigadas",
    "showBalloon": true,
    "valueField": "hectares",
    "dashLengthField": "hectares_dash",
  }, {
    "id": "g1",
    "valueAxis": "v1",
    "balloonText": "[[value]]°",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#ffb014",
    "hideBulletsCount": 50,
    "title": "Temperatura",
    "bulletSize": 5,
    "valueField": "temperature",
    "dashLengthField": "temperature_dash",
    "lineColor": "#ffb014",
    "useLineColorForBulletBorder": true
  }, {
    "id": "g2",
    "valueAxis": "v2",
    "balloonText": "[[value]]%",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#245be5",
    "hideBulletsCount": 50,
    "title": "Humedad",
    "bulletSize": 5,
    "valueField": "humidity",
    "dashLengthField": "humidity_dash",
    "lineColor": "#245be5",
    "useLineColorForBulletBorder": true
  }, {
    "id": "g3",
    "valueAxis": "v1",
    "balloonText": "[[value]]km/h",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#63c2f2",
    "hideBulletsCount": 50,
    "title": "Velocidad del viento",
    "valueField": "wind",
    "dashLengthField": "wind_dash",
    "bulletSize": 5,
    "lineColor": "#63c2f2",
    "useLineColorForBulletBorder": true
  }, {
    "id": "g5",
    "bullet": "round",
    //if this needs to be on a particular value axis, set that here as well
    //"valueAxis": "v2",
    "valueField": "reddot",
    "bulletColor": "#800",
    "lineColor": "#800",
    "visibleInLegend": false, //optional: hide from legend
    "lineAlpha": 0
  }],
  "chartScrollbar": {
    "oppositeAxis": false,
    "scrollbarHeight": 30,
    "dragIcon": "dragIconRectBig"
  },
  "chartCursor": {
    "categoryBalloonDateFormat": "YYYY-MM-DD HH:NN:SS",
    "pan": true
  },
  "categoryField": "date",
  "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
  "categoryAxis": {
    "minPeriod": "hh",
    "parseDates": true,
    "axisColor": "#DADADA",
    "dashLength": 1,
    "autoGridCount": true,
    "gridAlpha": 0,
    "minorGridEnabled": false
  },
  "legend": {
    "enabled": true,
    "useGraphSettings": false
  },
  "export": {
    "enabled": true
  }
});
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>

<div id="weatherChart" style="width: 100%; height: 300px;"></div>


Share : facebook icon twitter icon

AmCharts Smoothed Line Serial Multiple Y Axis is not Showing


By : user7428131
Date : March 29 2020, 07:55 AM
I wish did fix the issue. It's all very simple, you have a typo:
graph.valueaxis should be graph.valueAxis

AmCharts serial chart trend-line click


By : Chris Kay
Date : March 29 2020, 07:55 AM
I hope this helps . Not the most elegant solution (i.e. it uses the generated content rather than hooking neatly into the framework), but I have done the following to catch a click event.
code :
$('#chartdiv').on('click', 'svg path[fill="#00CC00"]', function(){alert('hello');})

amCharts - adding padding for a smoothed line serial chart


By : user309201
Date : March 29 2020, 07:55 AM
I hope this helps you . The only way to add padding is to change your axis' minimum/maximum. There isn't a direct way to compute an optimal min/max value, but you can set the valueAxis' minMaxMultiplier to pad the automatically calculated min/max values by a small multiplier, i.e. 1.05:
code :
valueAxes: [{
  // ...
  minMaxMultiplier: 1.05,
  // ...
}]

Amcharts SerialChart multiple line graphs different category value member paths (Silverlight)


By : Cedric Mutabazi Ntwa
Date : March 29 2020, 07:55 AM
I wish this help you You need to add two 'value' axes, one in the X direction and one in the Y direction (imagine, like a bubble chart).

How to make charts/graphs (such as line graphs, bar graphs, circle graphs), etc. in C++, Qt, QML, Blackberry 10 Cascades


By : Ernesto Silva
Date : March 29 2020, 07:55 AM
I wish did fix the issue. You should check out QChart.js:
http://jwintz.me/blog/2014/02/15/qchart-dot-js-qml-binding-for-chart-dot-js/
Related Posts Related Posts :
  • How to set weight and height in Css with responsive when reduce screen size
  • Price formatting and user input value to change slider
  • Pass params to q.defer (d3.csv)
  • Combine a textfield and TinyMCE field to a third field with JavaScript. Constrain TinyMCE to Numbered List
  • Javascript regex to match alpha length followed by number length
  • Pass props from child to parent react navigation
  • How to share redux store in multiple components
  • Javascript Regex Expression Not Returning Expected Value
  • with draft.js is it possible to create a custom block span with classname
  • How to convert Javascript object to a url string?
  • Adobe Javascript in Action Wizard vs a form button
  • Filtering Tooltip in Kendo
  • How to update a grouped bar-chart in d3js
  • Javascript ES6 custom sort method not working all the times
  • Use a Vue JS component method in another vue comonent
  • Disable copy text from tinymce textarea
  • Need Dropdown to fill out db info on my page using AJAX
  • Join two arrays of objects on property
  • Angular checkboxes for objects within array
  • jQuery append to HTML table
  • Same DOM element is inserting after the input elements while validating form
  • Mocha flow control after assertion fails
  • AFrame content not rendering on Chrome with hyperHTML
  • Able to create multiple users with same email despite email set as unique in Mongoose
  • I am having trouble getting my text input to append <li> to a blank <ul> in my html
  • Ajax not parsing data correctly?
  • Rewrite of an vanilla JS Pong with the help of PixiJS
  • Manipulating object arrays for unique data
  • drag event is being fired on click
  • If not working after lower-casing and trimming
  • Hiding element on body click
  • What am I supposed to write in my if condition in order to check if there is a record in my MySQL query?
  • Why does Typescript think async/await returns a value wrapped in a promise?
  • How can I make the Menu closed, after clicking a Link (on mobile screen)?
  • Hover bootstrap datepicker
  • Materialize - Using Carousel functionalities
  • How to add event to every image using ES5
  • Getting 200 response, but also CORS error?
  • Wrap text within #id>span in href
  • Return all docs when all docs are deleted in a collection in Firestore
  • ClojureScript deep equal for JavaScript objects
  • Load multiple json files and display it to the html using ajax and jquery
  • Force spaces to convert to %20 from HTML input field using js or jQuery
  • React-Bootstrap Modal rendering twice
  • How to make a side panel in a component with Quasar Vue Framework 14.3
  • jquery checkall button and uncheckall button to select other checkbox
  • JavaScript loop doesn't work
  • jQuery if list item contains ''-" .remove()?
  • express strips newline when reading buffer and returning in response
  • Sort table both numerically and alphabetically using Javascript
  • js TreeWalker and/or document.createRange() not picking up single element
  • Read a field from every array object
  • MongoDB update array of documents with new array of documents
  • Disable Checkbox on Certain Date? JavaScript
  • Simple Angular JS Module Not Working, But Master Angular Script Working
  • Cordova Unable to load platformapi
  • Make multiple screenshots with nightmare-screenshot-selector
  • Combining values in nested objects with common properties
  • Create object from JSON using headers from JSON
  • scroll event not firing on div inside scroll-able div
  • shadow
    Privacy Policy - Terms - Contact Us © soohba.com