Some time ago, we need to use free chart tools to make reports , My colleague mentioned a chart tool morris. Official website :

http://www.oesmith.co.uk/morris.js/

The plug-in follows BSD agreement , Can be used for commercial software , It can also be modified , Relatively loose . The current plug-in version 0.4.3, It feels like it's not fully developed , Because there are relatively limited pictures that can be drawn .

The plug-in relies on jquery and Raphaël,jquery It goes without saying that everyone knows , Actually Raphaël That's the real core . About Raphaël You can refer to the following blog , Unfortunately, it seems that the Chinese help page can be opened a few days ago , Failed to open today , Let's look at the English documents

http://www.cnblogs.com/lhb25/archive/2013/01/06/raphael-js-reference.html

Use morris The biggest thing is simplicity , It's very suitable for us to write js The habit of , It's not like some chart tools have to write xml etc. , And not using flash, I love that .

Here's an example , Let's see how to use it : It's different from the official website

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>morris test </title>
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.css"/>
</head>
<body>
<div style="height:300px;" id="myfirstchart"></div> <script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>
<script>
$(function() {
new Morris.Line({
element: $('#myfirstchart'),
data: [
{ year: ' The first week ', value: 20 },
{ year: ' In the second week of ', value: 10 },
{ year: ' The third week ', value: 5 },
{ year: ' The fourth week ', value: 5 },
{ year: ' Week 5 ', value: 20 }
],
xkey: 'year',
ykeys: ['value'],
labels: [' score '],
parseTime: false
});
})
</script>
</body>
</html>

Because we need pie charts , But this plug-in doesn't provide a pie chart , I wrote a pie chart extension according to the help document , Upload it when you have a chance .

A free js Chart tools --morris More articles about

  1. BlackHat A free car hacking tool will be announced at the conference

    automobile , Undoubtedly, it is a very important means of transportation in modern society , But at the same time, it also brings many security risks , No matter what , Automobile safety is a major issue that we can't ignore . About to share the tool for free Recently, a French researcher will release a tool to detect car safety loopholes , ...

  2. Windows The next few are free C/C++ Introduction to development tools

    I believe that as a beginner of programming , We all want good programming software . here " To use " There should be at least two :1. Simple installation ,2. Easy to use . Great God moves , Special preference for tools , Never Windows The end of the game . This article does not do ...

  3. To introduce the online compression JS Tools for

    First, the domain name of the tool :http://javascriptcompressor.com/ The interface after entering is as follows : Specific to talk about its function point : Online compression Javascript Source code can be divided into different compression levels : such as , General situation ...

  4. Recommend a free PDF Transformation tool | PDFCandy

    I believe you are using PDF There are also many conversion tools , Now I recommend this software (PDFCandy) For everyone , It is convenient to use in the future work . Improve your work efficiency . PDFCandy Divided into two : Web and client .( According to everyone's preference ...

  5. Five free UML Modeling tools

    1. free UML Modeling tools recommendation :JUDE–community 2. free UML Modeling tools recommendation :UMLet 3. free UML Modeling tools recommendation :ArgoUML 4. free UML Modeling tools recommendation :BOUml 5. free UML modeling ...

  6. JS Chart tools ---- Highcharts

    Highcharts It's a pure JavaScript Write a chart Library , Can be very simple and convenient in the web Website or web The application adds interactive charts , And it's free for individuals to learn . Personal website and non-commercial use . Hi ...

  7. Online compression JS Tools for

    To introduce the online compression JS Tools for First, the domain name of the tool :http://javascriptcompressor.com/ The interface after entering is as follows : Specific to talk about its function point : Online compression Javascript Source code can ...

  8. turn : Some free charts js plug-in unit

    1,ichartjs( domestic )(http://www.ichartjs.com/)  =============== Strongly recommend ichartjs Is an excellent domestic open source plug-in , The author is Wang he , English name taylor, graduation ...

  9. VOOKI: A free Web Application vulnerability scanning tool

    Vooki Is a free and user-friendly Web Application of leak scanning tool , It can easily scan anything for you Web Apply and find vulnerabilities .Vooki It mainly includes three parts ,Web Application scanner ,Rest API Scanners and reports .Web Application scanner ​V ...

Random recommendation

  1. Add right click menu command Open command window here (E)( With Icon )

    @color 0A @title Add right click menu command Open command window here (^&E)( With Icon ) by wjshan0808 @echo off reg add HKCR\Directory\Bac ...

  2. advanced validation on purchase.

    Install the module This module is in Standard function 2 On the basis of level approval increase Boss approval increase Different technology classes and Non technical branch Core approval workflow As shown in the figure below For approval users grant purchase manager jurisdiction otherwise , Out of sight To examine ...

  3. of servlet Resources and suggestions for beginners

    Four days to study servlet It's a very painful experience , It doesn't have to be so painful , The key is to learn to analyze and solve problems calmly , Or learning is not so much fun . Beginners java Just full 15 God . First of all, for resources, it is recommended to read a little PPT ...

  4. PHP All loopholes are solved ( 6、 ... and )- Cross Site Request Forgery

    In this paper, we mainly introduce the concept of PHP Cross Site Request Forgery of websites . stay CSRF All of the attack methods include the attacker forging one that appears to be initiated by other users HTTP request , in fact , Tracking messages sent by a user HTTP Request is the attacker's goal . CSRF(Cros ...

  5. CSDN Download channel 2014 year 11 month 4 Japan -5 Daily maintenance Bulletin

    Dear users : CSDN On 2005 Download service launched in . After years of development . The users who download the channel have helped countless users , Share 500 The technology resources of ten thousand . CSDN Download channel will be on 2014 year 11 month 4 Japan 23 Point to the 11 month 5 Japan 8 Product of points ...

  6. C# Read XML The way

    Preface In the previous article, we made a brief introduction XML Introduction to , Now let's continue this series XML File is a common file format , for example WinForm Inside app.config as well as Web In program web.config file , There are also many important issues ...

  7. WeChat official account is everywhere. (java)

    Before the company project development payment is done with Ali's payment , It's called a simple one , at will : Be miserable , Now the company has developed the official account of WeChat. , So I stepped into the development of wechat payment which is full of pits ... ------------------------------ ...

  8. springMVC Source code analysis --HandlerMethodReturnValueHandler Return value parser ( One )

    HandlerMethodReturnValueHandler It's for Controller The return value of function execution in ,springMVC Multiple HandlerMethodReturnValue ...

  9. A random note ,maven pack

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-depen ...

  10. C#-this The extension method of keyword function

    Catalog 1. brief introduction 2. Simple example 3. Details 1. brief introduction Our methods are all associated with declaring his class ( All the methods we write now are defined in the class , So we call methods with the entity object of the class to which the method belongs ). stay C#3.0 ...