![](\"https:\/\/mindfusion.dev\/samples\/javascript\/chart\/custom_grid.png\" "\\"Line")
<\/a><\/p>\nThe line chart uses DateTimeSeries<\/a> for the data and a standard GridType<\/a> for the major grid lines. The auxiliary grid lines among them are made with custom drawing: we will discuss in details the code for that.<\/p>\n The sample uses MindFusion Charting library for JavaScript<\/a>, which also supports TypeScript.<\/p>\n You can see the sample online at https:\/\/mindfusion.dev\/samples\/javascript\/chart\/CustomGrid\/DateTimeSeries.html<\/a><\/p>\n <\/p>\n I. General Setup<\/strong><\/p>\n The chart requires several JavaScript files to be included. These are:<\/p>\n We add them at the end of the web page, where we want to render the chart, straight before the closing BODY tag. The chart itsel needs a DIV element to render itself onto. It is important hat the DIV has an id. We add one to the web page:<\/p>\n II. Chart Initialization<\/strong><\/p>\n We create the Chart<\/a> as an instance of the AreaChart<\/a> class. First, we must get the HTML element that represents it and then we get its size. This element is used in the chart constructor – we cannot create any type of Chart without it:<\/p>\n The data for the chart is a Series<\/a> instance. The Series<\/a> interface is implemented by various classes that allow you to choose the best one regarding your data type and project goals. In our case we use JavaScript Date objects as data for the X-axis, which is why we’ve chosen the DateTimeSeries<\/a> to represent the data for our chart.<\/p>\n The DateTimeSeries<\/a> instance has a variety of properties, including minValue<\/a> and maxValue,<\/a> which we will set. They set the values that correspond to the MinDate<\/a> and MaxDate<\/a> in the series. We also use the dateTimeFormat<\/a> property and customDateTimeFormat<\/a> to further specify how our DateTimeSeries<\/a> shall look.<\/p>\n Each chart Axis<\/a> has properties that specify its scale: minValue,<\/a> maxVaue<\/a> and interval<\/a> Axes can have a title<\/a> The labels at the X-axis can be hidden with the showXCoordinates<\/a> property.<\/p>\n III. The Grid<\/strong><\/p>\n The default grid of the chart is set with the gridType<\/a> property. The types of grid are members of the GridType<\/a> enumeration. We customize the grid with the gridLineColor<\/a> and the gridColor1<\/a> and gridColor2<\/a> properties for the grid stripes. The default grid draws lines and stripes between the scale divisions of the axes. We want to customize it to draw 4 more lines between the default lines for each interval. This functionality is not supported out of the box and we need to use custom drawing for that.<\/p>\n The method that we need to overwrite is called drawGrid. There we get the drawing context, which we can use to perform drawing of graphic primitives. Because this is method that draws the grid, we need to call the default grid drawing code, if we want to see the default grid drawn next to our custom grid drawing code. We do it this way:<\/p>\n Now we need to get the two axis: X and Y, and use their scale coordinates to calculate the additional points, which we will use for grid drawing.<\/p>\n Then, in a cycle, we draw 5 additional lines for each interval, as long as we haven’t reached the last coordinate of the axis:<\/p>\n The mapValueToPixelY<\/a> method is worth noting, because it is a useful public method, which converts a numeric value on the axis to a physical coordinate. The chart length can be taken from the actualHeight<\/a> and actualWidth<\/a> properties.<\/p>\n With that our custom drawing method is ready. There is one method we need to call in order to see any type of chart rendered – the draw<\/a> method.<\/p>\n You can download the source code for this chart, together will all libraries used from this link:<\/p>\n Area Chart with Custom Grid in JavaScript: Download the Sample<\/a><\/p>\n Technical support is available through MindFusion discussion board at https:\/\/mindfusion.dev\/Forum\/YaBB.pl?board=jschart_disc<\/a>.<\/p>\n About Charting for JavaScript:<\/i> MindFusion library for interactive charts and gauges. It supports all common chart types including 3D bar charts. Charts can have a grid, a legend, unlimited number of axes and series. Scroll, zoom and pan are supported out of the box. You can easily create your own chart series by implementing the Series interface. In this blog post we will look in short at the steps to build this JavaScript area chart with custom grid: The line chart uses DateTimeSeries for the data and a standard GridType for the major grid lines. The auxiliary … Continue reading <script src=\"..\/Scripts\/drawing.js\" type=\"text\/javascript\"><\/script>\n<script src=\"..\/Scripts\/controls.js\" type=\"text\/javascript\"><\/script>\n<script src=\"..\/Scripts\/common.js\" type=\"text\/javascript\"><\/script>\n<script src=\"..\/Scripts\/common-collections.js\" type=\"text\/javascript\"><\/script>\n<script src=\"..\/Scripts\/charting.js\" type=\"text\/javascript\"><\/script>\n<\/pre>\n
<div id=\"content\" style=\"top: 60px; bottom: 24px; overflow-y: scroll;\">\n\t<div style=\"position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px\">\n\t\t<canvas id=\"chart\" style=\"width: 100%; height: 100%; display: block;\">\n\t\t<\/canvas>\n\t<\/div>\n<\/div>\n<\/pre>\n
var chartEl = document.getElementById('chart');\nchartEl.width = chartEl.offsetParent.clientWidth;\nchartEl.height = chartEl.offsetParent.clientHeight;\nvar chart = new Controls.AreaChart(chartEl);\n<\/pre>\n\/\/ create sample data\nvar data = new Collections.ObservableCollection();\n\nvar years = new Collections.List();\nvar dt = new Date(new Date().getFullYear() - 10, 11, 31);\nfor (; ; )\n{\n\tif (dt.getFullYear() > new Date().getFullYear())\n\t\tbreak;\n\tyears.add(new Date(dt.setFullYear(dt.getFullYear() + 1)));\n}\n\nvar income = new Collections.List([52, 63.2, 35.6, 47.8, 39, 50, 29, 79, 101, 120, 112]);\n\nvar series = new Charting.DateTimeSeries(\n\tyears, income, years.item(0), years.item(years.count() - 1));\n<\/pre>\nchart.showXCoordinates = false;\n\nchart.xAxis.title = \"\";\nchart.xAxis.minValue = 0;\nchart.xAxis.maxValue = 1;\nchart.xAxis.interval = 0.1;\nchart.yAxis.minValue = 0;\nchart.yAxis.maxValue = 130;\nchart.yAxis.interval = 10;\n<\/pre>\n
let originalDrawGrid = Charting.Plot2D.prototype.drawGrid;\n\nCharting.Plot2D.prototype.drawGrid = function(context) \n{\n\n \/\/ draw the default grid\n originalDrawGrid.call(this, context);\n\n}\n<\/pre>\nlet xAxis = this.xAxis == null ? context.xAxis : this.xAxis;\nlet yAxis = this.yAxis == null ? context.yAxis : this.yAxis;\n<\/pre>\n
let gridPen = new Drawing.Pen(\"#e8e8e8\");\n\n\tlet prevY = null;\n\tlet steps = 5;\n\tyAxis.enumerateIntervals(this.pinGrid, (y, yi) => {\n\t\tvar pixelY = yAxis.mapValueToPixelY(y, this.actualHeight);\n\n\t\tif (prevY != null) {\n\t\t\tvar dy = (prevY - pixelY) \/ steps;\n\t\t\tlet yy = prevY + dy;\n\t\t\tfor (var i = 0; i < steps - 1; i++, yy += dy)\n\t\t\t\tcontext.graphics.drawLine(gridPen, 0, yy, this.actualWidth, yy);\n\t\t}\n\n\t\tprevY = pixelY;\n\t}, true);\n<\/pre>\nchart.draw();\n<\/pre>\n
\nThe gauges library is part of Charting for JavaScript. It supports oval and linear gauge with several types of labels and ticks. Various samples show you how the implement the gauges to create and customize all popular gauge types: car dashboard, clock, thermometer, compass etc. Learn more about Charting and Gauges for JavaScript at https:\/\/mindfusion.dev\/javascript-chart.html<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"